简介：对于 Web 开发者，尤其是前端开发工程师，Chrome 浏览器开发者工具几乎成为我们每天开发调试的必备工具。那么掌握 Chrome 开发者工具会让我们更加全面、高效地进行页面调试和开发。本教程手把手教你全面的掌握 Chrome 开发者工具，让你在页面开发的过程中事半功倍！
1.1 Chrome DevTools 功能简介（九大功能面板）
- Elements 元素面板
- 检查和调整页面，调试DOM,调试CSS
- Network 网络面板
- 调试请求，了解页面静态资源分布，网页性能检测
- Console 控制台面板
- 调试JavaScript、查看Console log 日志、交互式代码调试
- Sources 源代码资源面板
- 调试JavaSctipt页面源代码，进项断点调试代码
- Application 应用面板
- 查看&调试客户端存储，如Cookie,LocalStorage,SessionStorage等
- Performance 性能面板
- 查看页面性能细节，细粒度对网页载入进行性能优化（高阶）
- Memory内存面板
- JavaScript CPU 分析器，内存堆分析器（高阶）
- Security 安全面板
- 查看页面安全及证书问题
- Audits 面板
- 使用Google Lighthouse 辅助性能分析，给出优化建议（高阶）
1.2 打开Chrome 开发者工具
- 在Chrome 菜单中选择： 更多工具 -> 开发者工具
- 在页面元素上右键点击，选择“检查”
- 快捷键
- F12
- Ctrl + Shift + I
-
- 未完待续，敬请期待...
- [转载- 慕课网] 韩宗泽 老师
- Chrome DevTools开发者工具调试指南 www.imooc.com/video/19964
