Chrome 与 Firefox-Dev 的 DevTools

无论是作爬虫仍是写 Web App，Chrome 和 Firefox 的 DevTools 都是超经常使用的，可是常常发现别人的截图有什么字段我找不到，别人的什么功能个人 Chrome 没有，仔细一搜索才知道，原来是我不会用。。

---

Ctrl + Shift + I：打开 DevTools
Ctrl + Shift + J：打开控制台

搜索

1. Ctrl + F：在当前位置搜索关键字
   • 在网页界面用这个快捷键，就是页内搜索
   • 在 Network 的 Response 页面，就是在 Response 中搜索
2. Ctrl + Shift + F：全文搜索，在当前 Web App 的全部文件中搜索。
   • 爬虫必备！！！要寻找一些特殊字符串的来源，用它搜索屡试不爽。

Command

在 DevTools 里按快捷键 Ctrl + Shift + P 就能打开 Command 输入框，它和 vscode/sublime 的 Command 同样，用好了特别方便。

Network

1. 属性列

Chrome 能够右键属性列名来增减属性列，Firefox-Dev 也是同样：

2. copy

在 Chrome 中右键某个请求，选中 copy，会给出几个 options：

而 Firefox-Dev 的更强一点，能够复制消息头（请求头和响应头）：

3. response 的 pretty print

Chrome 的 Response 页面左下角，有{}按钮，能够 beautify 响应。

而 Firefox-Dev 只在 Debugger 页面提供该按钮，Response 中不支持。

Firefox 响应的 preview 和 payload 是放在 Response 页面下。而 Chrome 是分红了两个标签页

4. 导出 HAR

右键任意一个请求，选择 save all as HAR，就能够导出 HAR 文件。（Chrome 有 with content，导出的 HAR 文件会含有全部请求与响应的 body）

该文件可用于存储当前监听到的全部浏览器请求信息。在之后须要分析这些请求时，将 HAR 文件拖到 Network 页面便可恢复全部请求。

5. Raw Headers（原始消息头）

Chrome 只支持查看 HTTP/1.x 的 Raw Headers，对这种请求，会给出 view source 选项。

Chrome 不能查看 HTTP/2 的 Raw Headers。

而 Firefox 则支持查看 HTTP/2 的 Raw Headers。（是恢复后的，HTTP/2 的原始消息头是二进制压缩形式）

它还提供 Edit and Resend 请求的功能，这点要给个赞～

6. 审查 WebSocket（Chrome only）

在 NetWork 中点击对应的 WebScoket 请求，在右侧选择 Frames 标签，就能够看到全部的消息了

7. 跨页面加载时，保留网络请求记录

当页面重载或者页面跳转时，默认状况下，Network面板下的网络请求记录表也是刷新的。若是想保留以前页面的网络请求数据，能够勾选Preserve log。

经常使用的一个应用场景：登陆/注册时会调用登陆/注册API，开发者想查看这个接口返回的状况，可是登陆/注册成功后通常会跳转到新的页面，致使了Network面板的请求记录被刷新从而看不到登陆/注册接口返回的状况。此时勾选上Preserve log，不管跳转到那个页面，都能在Network网络请求记录表中查看到以前接口返回的状况。

JavaScript 控制台

1. 能够经过 $x(<xpath>, <DOM-element>)，用 xpath 查询 DOM 元素。
   
2. 经过控制台左上方的选单，能够切换 JS 的环境，它默认是当前页面（top）。

Elements 页面（Firefox-Dev 是 Inspector 页面）

1. DOM 元素断点（Chrome only）

在 Elements 页面，右键一个元素，有一个 Break on 选项，能够控制在特定事件发生时 Break.
- subtree modification: 子节点被修改
- attribute modification：当前节点的属性被修改。（inline style 被修改也会触发此事件）
- node removal：节点被移除

2. 检索元素上注册的事件（Chrome only）

在 Elements 页面选中一个元素（或者直接右键检查该元素），而后在右侧窗口，选择 Event Listeners 标签，就能够看到该元素上注册的全部事件。

3. 颜色选择器

选中任一元素，在右侧选择 Styles 选单，会显示当前元素的 css 属性。

其中全部的颜色小方块都是能够点击的，点击颜色方块后

1. 能够将颜色属性转换成多个格式（Chrome only）
   • 默认格式：#207981
   • RGB格式：rgb(32, 121, 129)
   • HSL格式：hsl(185, 60%, 32%)
2. 提供 color picker，可用于在网页任意位置取色。（Firefox-Dev 也有）
3. 提供复制按键，直接将该颜色当前格式的表达复制到剪切板

元素审查

Ctrl + Shift + C 或者点击 DevTools 最左上角的小箭头按钮，就能进入元素审查模式。

该模式下会自动审查鼠标所指的元素，Elements 页面也会自动定位到该元素。

Sources 页面（Firefox-Dev 是 Debuuger 页面）

Sources 右侧的 Debugger 支持各类断点调试。

1. 条件断点
   Sources 中，在任意 JS 代码的行号上单击鼠标左键，就能在该行设置一个普通断点（在 Response 中可不行）。在行号上右键，能直接设置条件断点。
   
2. XHR 断点：在右侧 Debugger 中，能够添加 XHR 断点。
   • 若是条件留空，一旦有 XHR 发起，就会无条件进入调试。
   • 条件是 “Break When URL Contaions ”
3. Watch Expressions：表达式审查
   • 双击选中 JS 代码中的任意变量，而后右键它，能够将该变量添加到 Watch 中，这样就能够随时观察它的值。
   • 也能够在右侧 Watch 中手动输入 JS 表达式。
4. DOM 元素断点（Chrome only）：在 Elements 部分讲过了。

Chrome 的断点功能比 Firefox-Dev 的更丰富。

Screenshot

1. For Chrome

方法一：在 DevTools 界面，按快捷键 Ctrl + Shift + P 打开 Command 窗口，而后输入 screenshot，在下拉栏里选择你须要的截图命令就行。

方法二：
先进 dev tools，点击 左上角的设备图标（toggle device toolbar），而后页面顶部就会出现一个导航栏，在这里好选择设备或者自定义图像尺寸，而后点击该导航栏右侧（不是 dev tools 右侧）的 options 图标，会有两个选项：“截图（capture screenshot）”和“截网页全图（capture full size screenshot）”，以下：

2. For Firefox

1. 只截显示出来的部分：和 Chrome 同样点击设备图标，而后在页面上面的 toolbar 就有截图按钮
   
2. 截网页全图：在 DevTools 右边的 options 中进入 Settings，勾选 take a screenshot of the entire page，DevTools 右上角就会出现截图按钮了。
   

其余

1. Fake Geolocation（Chrome only）

在 Chrome 中进入 DevTools，点击右上角的 options 按钮，选择 More tools -> Sensors，在 Geolocation 处选择 Custom location，就能够修改地理位置了。

2. 自定义请求头

For Chrome

和 上一小节同样，先进 More tools，选择 Network conditions，取消勾选 Select atuomatically，就能够修改请求头了。

上面的演示中，使用 python-requests/2.21.0 作 user agent，知乎返回 404.

For Firefox

打开设备模拟，在 toolbar 的右上角勾选 show user agent，而后就能够在 toolbar 修改 user agent 了：

3. Request Blocking（Chrome only）

在 Network 的任意请求上右键，菜单中就有 Block request URL（阻塞该 URL）和 Block request domain（阻塞请求所在的整个域）

而后就能够在 More tools -> Request blocking 中看到你设置的阻塞条件。

参考

• 你不知道的 Chrome 调试技巧
• Chrome Dev Tools 中文手册
• Firefox Quantum：开发者版本
• How to Capture Screenshots in Google Chrome without using Extensions
• Chrome DevTools - Network