Chrome Devtools 高级调试指南（新）

前言

本文暂未涉及Performance面板的内容。

1. 常用命令和调试

2. 黑盒脚本：Blackbox Script

3. 控制台内置指令

4. 远程调试WebView

1. Chrome Devtools 的用处

• 前端开发：开发预览、远程调试、性能调优、bug跟踪、断点调试等

• 后端开发：网络抓包、开发调试Response

• 测试：服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试

• 其他：安装扩展插件，如AdBlock、Gliffy、Axure等

2. 菜单面板拆解

• Elements - 页面dom元素

• Console - 控制台

• Sources - 页面静态资源

• Network - 网络

• Performance - 设备加载性能分析

• Application - 应用信息，PWA/Storage/Cache/Frames

• Security - 安全分析

• Audits - 审计，自动化测试工具

3. 常用命令和调试

1. 呼出快捷指令面板：cmd + shift + p

在Devtools打开的情况下，键入cmd + shift + p将其激活，然后开始在栏中键入要查找的命令或输入"?"号以查看所有可用命令。

• …: 打开文件

• :: 前往文件

• @：前往标识符（函数，类名等）

• !: 运行脚本文件

• >;: 打开某菜单功能

1.性能监视器：> performance monitor

将显示性能监视器以及相关信息，例如CPU，JS堆大小和DOM节点。

2.FPS实时监控性能：> FPS选择第一项

3.截图单个元素：> screen 选择 Capture node screenhot

2. DOM 断点调试

当你要调试特定元素的DOM中的更改时，可以使用此选项。这些是DOM更改断点的类型：

• Subtree modifications: 子节点删除或添加时

• Attributes modifications: 属性修改时

• Node Removal: 节点删除时

如上图：监听form标签，在input框获得焦点时，触发断点调试

3. 黑盒脚本：Blackbox Script

剔除多余脚本断点。

例如第三方（Javascript框架和库，广告等的堆栈跟踪）。

为避免这种情况并集中精力处理核心代码，在Sources