Chrome 与 Firefox-Dev 的 DevTools

时间:2024-02-18 21:19:40

不管是做爬虫还是写 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 中看到你设置的阻塞条件。

参考