Chrome开发者工具实用指南：调试效率翻倍不是梦！

创作时间:

作者:

@小白创作中心

Chrome开发者工具实用指南：调试效率翻倍不是梦！

引用

CSDN

https://blog.csdn.net/zag666/article/details/145327772

Chrome开发者工具是谷歌浏览器Chrome内置的一套Web开发和调试工具，可用于对网站进行迭代、调试和分析，帮助开发人员大幅提升工作效率。本文将详细介绍Chrome开发者工具各个面板的功能和使用技巧，包括Elements、Console、Sources、Network等，同时还会介绍一些实用的快捷键和技巧，帮助开发者更高效地进行Web开发和调试。

Elements元素面板

选中元素，按下h快速隐藏、显示该元素。
在元素面板中展开所有的子节点：右键选择 expand recursively
右侧Styles中Ctrl+鼠标左键(Mac上的Cmd+鼠标左键)一个CSS属性名，开发调试工具会在Sources面板跳转定位到定义这个CSS属性的位置。
强制激活伪类：右侧Styles中
:hov
按钮可以让你为选中的元素启用/禁用状态，或者元素右键选择强制执行状态，因此你可以看到元素的激活、悬停、聚焦状态的样式。
右侧Styles中
:cls
按钮可以让你为选中的元素增加新的类名。
右侧Styles中

按钮可以让你为选中的元素新建样式规则。

在Elements面板可以拖拽任何HTML元素来改变它在页面上的位置。
编辑DOM节点和其子节点的HTML：右键相应元素，点击以HTML格式修改。
快速调节样式中数值类型的值

Console控制台面板

Console 中的
$
：在Elements面板选中一个节点，然后在Console面板输入
$0
来引用这个节点。
$0：当前选择的元素，$1：上一次的引用，$2：上上次的引用，一直到 $4
$
和
$$
：
$(‘xxx’)
相当于
document.querySelector(‘xxx’)
；
$$(‘xxx’)
相当于
Array.form(document.querySelectorall(‘xxx’))
在Console面板输入
$_
来引用先前一次执行操作返回的值。
编辑页面上的任何文本：在控制台输入
document.body.contentEditable="true"
或者
document.designMode = 'on’
就可以实现对网页的编辑。
搜索网页下所有引入的文件：在Console面板按下ESC ，点击左边竖形排列的三个小点，选择 Search搜索代码会跳到具体的源码文件。
用大括号console.log({})将变量包围起来。这样的优点是不仅会把变量的值打印，同时还会将变量名打印出来。

Sources源代码/来源面板

断点调试：Cmd+P搜索要打断点的文件，点击代码行左边的数字添加断点进行调试，相当于在源代码中敲debugger。

Network网络面板

过滤请求：基础过滤，条件过滤：例如method:POST，可以输入 - 来查看所有的条件。
重新发送 XHR 的请求：无须刷新页面，直接右键请求Replay XXHR
模拟弱网环境：在网络面板点击“已停用节流模式”可以模拟网速慢的场景。
重写 HTTP 响应头：调试跨域、缓存策略、安全策略、自定义响应类型。
打开控制台 -> 网络 -> 对应请求 -> 右键 -> 替换标头 -> 添加/修改标头。操作步骤
模拟API：后端接口未完成时mock数据。
打开控制台 -> 网络 -> 对应请求 -> 右键 -> 替换内容 -> 添加/修改响应体。操作步骤
在 Console 面板中发请求：有时候我们需要修改请求头、入参再重新发起请求。
操作步骤：
1.导航至 Network 网络面板，右击一个 XHR 请求，可以点击 Fetch/XHR 过滤。
2.点击 Copy -> Copy as fetch。
3.导航至 Console 面板，Ctrl + V 粘贴。
4.修改内容，如接口 url、header、body，然后按回车键即可发起请求。

Recorder记录器

实现录制、重播和分享在浏览器触发的行为。包含：记录用户在浏览器中的操作，包括点击、输入、滚动等；生成可交互的回放脚本，可以在 DevTools 中回放；支持多种回放速度，方便开发者快速定位问题；可以导出记录的数据，以便于分享和存档。

快捷键和实用技巧

Cmd+1到8切换到对应序号的浏览器标签
快速打开DevTools：快捷键 F12；Ctrl+Shift+I (Windows) 或Cmd+Opt+I (Mac)；在页面元素上右键点击，选择 “检查”。
切换 DevTools 的面板：ctrl + [ 和 ctrl + ] 可以从当前面板向左/向右切换面板。
切换 DevTools 窗口的展示位置（右侧或底部）：快捷键ctrl + shift + D (Cmd + shift + D)来实现位置的切换，方便移动端或web端调试。
快速打开检查元素面板：Ctrl+Shift+C(Cmd+Shift+C)，然后鼠标悬浮在目标元素，可以快速打开DevTools的Elements(元素)面板中自动突出显示你鼠标悬停的元素。单击元素退出检查模式，同时保持元素Elements(元素)面板中突出显示。
快速打开console面板：Ctrl+Shift+J（Windows）或Cmd+Opt+J（Mac）。
Ctrl+Shift+P(Mac上Cmd+Shift+P)命令菜单
截图：搜索screen或截图，选择所需命令。
截取某个DOM节点的渲染图，使用前得先在Elements Tab下选中DOM节点：capture node screenshot
自定义选中截图区域，和常用截图工具类似：capture area screenshot
截滚动全屏：capture full size screenshot
截当前视窗所见屏幕：capture screenshot
所有快捷键：Chrome 里面所有的快捷键都可以在设置里找到。
清除缓存强制刷新：开启 devtools 的情况下，长按刷新按钮清除或 Cmd + Shift + R 来强制刷新。