Chrome Devtools使用总结

Chrome Devtools使用总结

一、九大面板

a、 Elements面板：检查调整页面，检查和调整页面，调试DOM，调试CSS。

b、 Network网络面板：调试请求，查看网页资源请求概览、页面静态资源分布，网页性能检测（针对单一请求查看Request/Response或消耗时间等，分析网页性能优化，使用代理页面请求数据等）。

c、 Console控制台面板：调试JavaScript、查看Console log日志、交互式代码调试。

d、 Sources源代码资源面板：调试JavaScript页面源代码，进行断点调试代码(重点：非常有利于bug的解决)

e、 Application应用面板：查看&调试客户端存储，如cookie,localStorage,SessionStorage

f、 Performance性能面板：查看页面性能细节，细粒度对网页载入进行性能优化（高阶）

g、 Memory内存面板：Javascript CPU分析器，内存堆分析器（高阶）

h、 Security安全面板：查看页面安全及证书问题；

i、 Audits面板：使用google Lighthouse辅助性能分析，给出优化建议（高阶）

二、快捷键

a) 快速查看DOM或样式（Elements面板）：ctrl+shift+c

b) 打开或关闭开发者工具：ctrl+shift+i或者F12(打开最后一次关闭时候的面板)

c) 快速进入Console面板：ctrl+shift+j

d) 快速切换最后一次开发者工具的视图位置：ctrl+shift+d

e) 在开发者工具中搜索：ctrl+shift+f

f) 快速调出console打印台：Esc

g） 快速调用：

三、在DOM中断点调试

a) 子树修改时打断点：break on > subtree modifications

b) 属性修改时打断点：break on > attribute modifications

c) 节点删除时打断点：break on > node removal

注意：执行DOM断点调试的时候，必须先打断点，然后再复制jspath，在console台打印进行操作，如下删除节点操作：

四、CSS样式查看与操作

a) {}可以格式化压缩过的代码：

b) 这三个 styles的按钮，都是新增操作，只有往里添加 :hover .class 和新样式的时候点击才有效果：

c）从左到右分别是 增加文字阴影、盒子阴影、增加文字颜色、增加背景颜色：

五、 Console面板

a) 一键清空控制台

b) console.time()可以检测代码运行时间（效率）

c) console.clear()清除打印台（类似于a）

d) 调试的三种方式：在代码中插入“debugger”，或者图中两种方式

六、Network面板

通过waterfall来查看具体某个请求的时间（网络性能）：

七、Application面板

操作cookies：可以新增可以删除：

Application面板中主要操作Cookies、Local Storage、Session Storage

1. Elements面板：检查调整页面，检查和调整页面，调试DOM，调试CSS。
2. Network网络面板：调试请求，查看网页资源请求概览、页面静态资源分布，网页性能检测（针对单一请求 查看Request/Response或消耗时间等，分析网页性能优化，使用代理页面请求数据等）。
3. Console控制台面板：调试JavaScript、查看Console log日志、交互式代码调试。
4. Sources源代码资源面板：调试JavaScript页面源代码，进行断点调试代码(重点：非常有利于bug的解决)
5. Application应用面板：查看&调试客户端存储，如cookie,localStorage,SessionStorage
6. Performance性能面板：查看页面性能细节，细粒度对网页载入进行性能优化（高阶）
7. Memory内存面板：Javascript CPU分析器，内存堆分析器（高阶）
8. Security安全面板：查看页面安全及证书问题；
9. ​ Audits面板：使用google Lighthouse辅助性能分析，给出优化建议（高阶）