告别小白，这些谷歌浏览器调试技巧你必须知道

吾非同
2,380 阅读5分钟

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

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

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

如何打开Chrome开发工具？

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

主要窗口和功能

image-20210303160827272

  • 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 面板的使用技巧。

image-20210303161644791

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

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

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

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

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

控制器

image-20210303161959335

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

2.全局过滤：

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

image-20210303163201535

3.Preserve log

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

prelog

4.Disable cache

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

5.模拟网络

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

image-20210303181800279

过滤器

image-20210304112850033

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

image-20210304112826834

请求列表

image-20210304113855960

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

image-20210304132815159

image-20210304133355893

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

image-20210304133712342

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

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

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

其他重磅技巧：

1.浏览器常用快捷键

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

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

image-20210303143738740

效果:

image-20210303143945982

3.新建无痕窗口

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

image-20210303145409598

image-20210303145425208

4.快速截网页长图

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

jiechangtu 原创不易，如果觉得文章不错，请各位同学帮忙为本文点个赞、评论或转发一下，因为这将是我输出更多优质文章的动力，感谢！ 对了，掘友们记得给我点个免费的关注哟！

avatar
文章
阅读
粉丝