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