标签：浏览器 查看 chrome 页面 信息 界面 devtools 面板 加载
文章目录
说明
作为前端开发者，是一定要学会使用chrome浏览器的devtools工具的，本篇文章旨在以图形化的界面帮助大家梳理出工具的使用方法。
版本是91.0.4472.124(64位）
主界面
针对主界面，我按照序号，进行了总结
| 序号 | 名称 | 作用 |
|---|---|---|
| 0 | 工具头部 | 显示访问网址 |
| 1 | 鼠标选择 | 用来拾取网页上的节点元素 |
| 2 | 设备切换键 | 用来调整网页的大小 |
| 3 | elements | 在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑 |
| 4 | console | 一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互 |
| 5 | source | 该面板中主要用来进行一些调试和查看源码 |
| 6 | network | 在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时 |
| 7 | performance | 在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。有人会问，这个跟上面的 Network 有什么区别呢，上面也能显示耗时信息。在 Performance 面板中，你不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息 |
| 8 | memory | Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况 |
| 9 | application | 记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息 |
| 10 | security | 用于检测当面页面的安全性 |
| 11 | lighthouse | 审计面板会对页面的加载进行分析，然后给出提高页面性能的建议，官网建议查看 PageSpeed Insights 来获得更多的页面加载建议。 |
还想知道啥。。可以留言
标签：浏览器,查看,chrome,页面,信息,界面,devtools,面板,加载 来源： https://blog.csdn.net/wangbiao9292/article/details/118694453
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。