Chrome Devtools

目录

功能简介：

 打开Chrome开发者工具快捷键：

 实时编辑HTML和DOM节点：

在Console中访问节点：

 在DOM中断点调试：

 Console面板简介：

调试JavaScript的基本流程： 

Network面板简介： 

 Application面板简介：

 模拟移动设备：

 Network conditions：

---

功能简介：

1. Elements元素面板：检查和调整页面，调试DOM，调试CSS；
   
2. Network网络面板：调试请求。了解页面静态资源分布，网页性能检测；
   
3. Console控制台面板： 调试JavaScript、查看console log日志、交互式代码调试；
   
4. Sources源代码资源面板：调试JavaScript页面源代码，进行断点调试代码；
   
5. Application应用面板：查看&调试客户端存储，如cookie、local storage、session storage等；
   
6. Performance性能面板：查看页面性能细节，细粒度对网页载入进行性能优化（高阶）；
   
7. Memory内存面板：JavaScript CPU分析器，内存堆分析器（高阶）；
   
8. Security安全面板：查看页面安全及证书问题；
   
9. Audits面板：使用Google lighthouse辅助性能分析，给出优化建议（高阶）；
    

 

 打开Chrome开发者工具快捷键：

1. 打开最近关闭的状态：Cmd+Opt+I（MAC）或Ctrl+Shift+I（Windows）；
2. 快速查看DOM或样式：Command+Option+C（MAC）或Ctrl+Shift+C（Windows）；
3. 快速进入Console查看log运行JavaScript：Command+Option+J（MAC）或Ctrl+Shift+J（Windows）；
4. F12打开。

 实时编辑HTML和DOM节点：

1. 编辑内容；
2. 编辑属性Attributes；
3. 修改元素类型；
4. 调整DOM节点顺序；
5. 像编辑器一样编辑HTML代码；
6. 隐藏、删除、增加、拷贝节点。

在Console中访问节点：

1. 使用document.querySelectAll访问；
   
2. 使用$0快速访问选中的元素；
   
3. 拷贝->JS Path.
   

 在DOM中断点调试：

1. 属性修改时打断点：break on -> attribute modification；
   
2. 节点删除时打断点：break on -> node removal；
   
3. 子树修改时打断点：break on -> subtree modifications；

 Console面板简介：

1. 运行JavaScript代码，交互式编程；
2. 查看程序中打印的Log日志；
3. 断点调试代码Debugging。

调试JavaScript的基本流程： 

1. 传统的console.log()甚至alert()打印运行时信息调试；
2. JavaScript断点调试；
3. 运行时变量调试，修改源代码临时保存调试。

Network面板简介： 

1. 查看网页资源请求概览，查看资源分布（css、js、图片、第三方资源等）；
2. 针对单一请求查看Request/Response或时间消耗等；
3. 分析网页性能优化，使用工具代理页面请求数据等。

• 添加Network菜单：

 Application面板简介：

• cookie：

双击增加或修改cookie：

 以命令行的方式增加cookie：按esc键进入console面板：

•  LocalStorage：

使用命令行增加：

 模拟移动设备：

•  菜单：模拟设备外壳等功能：

•  更改设备地理位置：

• 更改设备方向：也可进行拖拽（传感器功能）： 

 Network conditions：