目录
功能简介：
- Elements元素面板：检查和调整页面，调试DOM，调试CSS；
- Network网络面板：调试请求。了解页面静态资源分布，网页性能检测；
- Console控制台面板： 调试JavaScript、查看console log日志、交互式代码调试；
- Sources源代码资源面板：调试JavaScript页面源代码，进行断点调试代码；
- Application应用面板：查看&调试客户端存储，如cookie、local storage、session storage等；
- Performance性能面板：查看页面性能细节，细粒度对网页载入进行性能优化（高阶）；
- Memory内存面板：JavaScript CPU分析器，内存堆分析器（高阶）；
- Security安全面板：查看页面安全及证书问题；
- Audits面板：使用Google lighthouse辅助性能分析，给出优化建议（高阶）；
??
?打开Chrome开发者工具快捷键：
- 打开最近关闭的状态：Cmd+Opt+I（MAC）或Ctrl+Shift+I（Windows）；
- 快速查看DOM或样式：Command+Option+C（MAC）或Ctrl+Shift+C（Windows）；
- 快速进入Console查看log运行JavaScript：Command+Option+J（MAC）或Ctrl+Shift+J（Windows）；
- F12打开。
?实时编辑HTML和DOM节点：
- 编辑内容；
- 编辑属性Attributes；
- 修改元素类型；
- 调整DOM节点顺序；
- 像编辑器一样编辑HTML代码；
- 隐藏、删除、增加、拷贝节点。
在Console中访问节点：
- 使用document.querySelectAll访问；
- 使用$0快速访问选中的元素；
- 拷贝->JS Path.
?在DOM中断点调试：
- 属性修改时打断点：break on?-> attribute modification；
- 节点删除时打断点：break on -> node removal；
- 子树修改时打断点：break on -> subtree modifications；
?Console面板简介：
- 运行JavaScript代码，交互式编程；
- 查看程序中打印的Log日志；
- 断点调试代码Debugging。
调试JavaScript的基本流程：?
- 传统的console.log()甚至alert()打印运行时信息调试；
- JavaScript断点调试；
- 运行时变量调试，修改源代码临时保存调试。
Network面板简介：?
- 查看网页资源请求概览，查看资源分布（css、js、图片、第三方资源等）；
- 针对单一请求查看Request/Response或时间消耗等；
- 分析网页性能优化，使用工具代理页面请求数据等。
- 添加Network菜单：
?Application面板简介：
- cookie：
双击增加或修改cookie：
?以命令行的方式增加cookie：按esc键进入console面板：
- ?LocalStorage：
使用命令行增加：
?模拟移动设备：
- ?菜单：模拟设备外壳等功能：
- ?更改设备地理位置：
- 更改设备方向：也可进行拖拽（传感器功能）：?
?Network conditions：
