Chrome DevTools
功能：（9大功能）
- Elements元素面板（检查和调整也买你，调试DOM，调试CSS）
- NetWork网络面板（抓包调试网络请求，了解也买你静态资源分布，网络性能检测）
- Console控制面板（调试JavaScript，查看console.log日志，交互式代码调试）
- Sources源代码资源面板（调试JavaScript页面源代码，进行断点调试代码）
- 5.application应用面板（查看&调试客户短存储eg：cookie,localstorage,sessionstorage）
- performance性能面板（查看页面性能细节，细粒度对网页载入进行性能优化）
- Memory内存面板（JavaScript CPU 分析器，内存堆分析器）
- Security安全面板（查看页面安全及证书问题）
- 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