掌握这些浏览器开发者技巧，绝对能提升你的level

╰半夏微凉° 2022-11-05 09:59 42阅读 0赞

###  ###

![format_png][]

###  ###

不管是前后端开发、还是测试工程师，平时都会用到浏览器开发者工具，比如调试一些web应用，定位前后端请求问题，爬虫的页面分析等。

但是，很多小白依然对一些概念和使用技巧不是很清楚，希望这篇分享，能够对你平时的开发调试、问题定位有所帮助。

## 如何打开Chrome开发工具？ ##

*  在Chrome菜单：更多工具 >开发者工具
 *  在页面元素上右键，选择“检查”
 *  快捷键：`F12`有时候被占用了，记得试试`Ctrl+Shift+I (Windows)` 或 `Cmd+Opt+I (Mac)`

## 主要窗口和功能 ##

![format_png 1][]

*  Elements（元素面板）：使用“元素”面板可以通过自由操纵DOM和CSS来重演您网站的布局和设计。
 *  Console（控制台面板）：控制台面板记录诊断信息，或者使用它作为 shell，在页面上与JavaScript交互。
 *  Sources（源代码面板）：在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。
 *  Network（网络面板）：从发起网页页面请求Request后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），并可以根据这个进行网络性能优化。
 *  Performance（性能面板）：记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能。
 *  Memory（内存面板）：分析web应用或者页面的执行时间以及内存使用情况。
 *  Application（应用面板）：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等
 *  Security（安全面板）：使用安全面板调试混合内容问题，证书问题等。

## Network 面板 ##

日常工作中使用频率最高的就是Network 面板，本次主要介绍Network 面板的使用技巧。

![format_png 2][]

1.控制器： 控制日志、缓存等信息。

2.过滤器： 控制在请求列表中显示哪些资源。

3.时间线： 检索资源的时间轴。

4.请求列表： 按时间顺序展示请求项。

5.请求的总体概要： 显示请求总数、传输的数据量和加载时间。

## 控制器 ##

![format_png 3][]

1.记录请求按钮和清空请求按钮。

2.全局过滤：

对所有请求资源和响应内容（包括请求 url、请求体、响应体 等）进行全量搜索。

![format_png 4][]

3.Preserve log

Preserve log勾选后，会保存跨页面的请求，这样跳转前后的请求都会显示在同一个请求列表中。

![format_png 5][]

4.Disable cache

Disable cache ，禁止从 Cache 中加载资源，选中就不会从缓存请求数据了，一般在web应用调试时使用。

5.模拟网络

可以模拟在线、离线、弱网等场景的网页加载情况，模拟一些弱网场景还是很好用的。

![format_png 6][]

## 过滤器 ##

![format_png 7][]

网络面板的过滤器，主要就是起过滤功能，一个页面的请求中包含各种资源文件和接口数据的请求，可以通过过滤器 模块来筛选你想要的文件类型，常用的是XHR和js。

![format_png 8][]

![format_png 9][]

## 请求列表 ##

![format_png 10][]

*  Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
 *  Status HTTP状态码。
 *  Type 请求的资源MIME类型。
 *  Method 请求方法（默认不显示，需要标题行右键勾选）
 *  Initiator 标记请求是由哪个对象或进程发起的（请求源）。
 *  Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
 *  Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
 *  Watefall显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。

![format_png 11][]

![format_png 12][]

在爬虫中需要关注的几个字段：响应体类型，cookie(模拟登录)、user-agent(模拟浏览器)

![format_png 13][]

## 网络面板一个隐藏技能：重新发送 XHR 请求 ##

XHR，即 XMLHttpRequest，是一种创建 AJAX 请求的 JavaScript API 。

如果想重新发送 XHR 请求，一般我们会选择刷新页面，其实可以直接在“网络”面板中右键选择Replay XHR调试。

![format_png 14][]

## 其他重磅技巧：    ##

### 1.浏览器常用快捷键 ###

*  放大内容 CTRL + +
 *  缩小内容 CTRL + -
 *  回到正常大小 CTRL + 0
 *  标签页切换 CTRL + 1~9 (1~9 分别代表第一个标签，第二个标签...)
 *  打开新的标签 CTRL + T
 *  搜索内容 CTRL + F
 *  回到上一页 CTRL + 左箭头
 *  回到下一页 CTRL + 右箭头
 *  刷新页面 CTRL + R

### 2.修改地址栏默认搜索引擎 ###

![format_png 15][]

效果:

![format_png 16][]

### 3.新建无痕窗口 ###

不会携带之前保存的cookie，也不会保存cookie到本地，可以完整的查看请求的完整过程。

![format_png 17][]

![format_png 18][]

### 4.快速截网页长图 ###

打开开发者工具，使用快捷键 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)  ，打开命令输入窗口，输入命令`Capture full size screenshot`（关键字即可），点击命令即可截取完整网页。

![format_png 19][]

如果觉得文章不错，请各位同学帮忙点赞和在看，谢谢啦

[format_png]: /images/20221023/609ea58b7f51498d9c5abc2a430b6cd0.png
[format_png 1]: /images/20221023/ce763d33547645238ebc1beca5c07ff2.png
[format_png 2]: /images/20221023/22966bba7a394e1eaacd82d0c0da992e.png
[format_png 3]: /images/20221023/0a970f96841d4fd79a426663ed143646.png
[format_png 4]: /images/20221023/8e907f269bdd487e8955e08f77244119.png
[format_png 5]: /images/20221023/cf83464c9bf0412883fa60f458f996ce.png
[format_png 6]: /images/20221023/09cff65f52af420588eb7bc7eb7ef78e.png
[format_png 7]: /images/20221023/74ddd77532fb4c588d5f5ff225d8df7f.png
[format_png 8]: /images/20221023/ab1d072c7b92406d8d59e160b5da2871.png
[format_png 9]: /images/20221023/aaf42f6d39a54a73bd8dc4645341aa19.png
[format_png 10]: /images/20221023/52a92093317b4c01b822ca44f73488ea.png
[format_png 11]: /images/20221023/08bfb5e6cc86467ab31defa242aadff5.png
[format_png 12]: /images/20221023/667e5bfc3eae49749b786212c32bf20b.png
[format_png 13]: /images/20221023/5d18074badc649738ce4935d65eede77.png
[format_png 14]: /images/20221023/fb7112a183c340bb82083e023ebd9dfe.png
[format_png 15]: /images/20221023/0364518e08674b93beb92e265fb36cf8.png
[format_png 16]: /images/20221023/09863d4bacbf4dc79cd186b12c5a0c3c.png
[format_png 17]: /images/20221023/239f5475208b4952b69baac831274abe.png
[format_png 18]: /images/20221023/f944e69193d745508928a79a290457c3.png
[format_png 19]: /images/20221023/a02782f07d3a4eeda13c5a6af7d1e03d.png