Chrome DevTools

Chrome DevTools

功能：（9大功能）

1. Elements元素面板（检查和调整也买你，调试DOM，调试CSS）
2. NetWork网络面板（抓包调试网络请求，了解也买你静态资源分布，网络性能检测）
3. Console控制面板（调试JavaScript，查看console.log日志，交互式代码调试）
4. Sources源代码资源面板（调试JavaScript页面源代码，进行断点调试代码）
5. 5.application应用面板（查看&调试客户短存储eg：cookie,localstorage,sessionstorage）
6. performance性能面板（查看页面性能细节，细粒度对网页载入进行性能优化）
7. Memory内存面板（JavaScript CPU 分析器，内存堆分析器）
8. Security安全面板（查看页面安全及证书问题）
9. Audits面板（使用Googlelighthouse 辅助性能分析，给出优化建议）

打开Chrome开发者工具

1. 在chrome菜单中打开：更多工具---》开发者工具

2. 页面元素右键点击----》检查

3. 快捷键：

1.打开最近关闭的状态：Cmd+Oot+I(Mac)或者Ctrl+shift+I（windows）

2.快速查看dom或者样式：Command+Option+C或者Cotrol+shift+C

3.快速查看console。Log：command+option+J或者control+shift+J

4.F12