网页中的开发者工具各个菜单的工具有什么用_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 4:54:40 共计：3616 浏览

网页中的开发者工具各个菜单的工具有什么用？

不同浏览器的开发者工具大同小异，这这里以chrome为例。

打开网页后，按F12即可打开开发者工具。

Element（审查元素）

这个按钮功能是查看网页源码的网页都是html语言写的，Element可以查看网页的html源码，里面的各种html标签都可以看到，分析网页结构时，这个功能很实用。鼠标放到页面的元素上，控制台就会定位到指定行。

Network（网络）

这里可以查看网页在加载时建立的连接可以清楚的看到各种请求。点击指定的连接后可以看到该连接的详细信息，做爬虫的时候经常用到。

里面的小菜单又分为4个

headers（头文件）

可以查看请求方式，地址等信息。

preview（预览）

用于查看资源。

Response：响应信息面板包含资源还未进行格式化处理的内容timing

资源下载花费的时间，可以看出网页的打开时间，那些模块耗时久可以清晰看出。

source（资源）

查看网页资源的详细信息，如图片，js脚本，com组件等等。

对于js脚本还可以设置断点，运行时可以定位到断点。

console（控制台）

可以测试代码，控制台中输入js代码是可以执行的，也可以看脚本中自己设置的打印信息，可以直观的看出语句有没有执行。

profile（性能监视器）

用于查看各个资源所耗费的内存大小。

Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等

以上只是对工具菜单的简单介绍，开发者工具的功能远不止这些，还得靠自己慢慢挖掘。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。