脱发秘籍：前端Chrome调试技巧最全汇总（前端调试bug的方法）

作者：安妮·穆西

原文：https://juejin.cn/post/7248118049584316472

注：本文所有测试和截图均基于Edge浏览器（内核为Chromium），浏览器内核位于《有哪些浏览器/内核？[1]》。

00、基础操作汇总

操作类型快捷键/指令切换浏览器选项卡Ctrl+1~8 切换到对应序号的浏览器选项卡Ctrl+PgUp/PgDn tab 切换浏览器左/右全屏F11 (+shift+FMac) 打开调试模式F12 , Ctrl + Shift + I (Windows) 或Cmd + Opt + I (Mac) 切换页面右键菜单“检查”中调试工具的位置，浏览器菜单“开发人员工具”（底部，右侧） Ctrl + Shift + D ( +Shift + DMac ) 切换DevTools Ctrl + [ 和Ctrl + ] 面板标签左右在查找和搜索调试工具面板的内容之间切换Ctrl+F：元素、控制台、源代码和网络全部支持搜索和搜索命令面板命令面板Ctrl + [Shift] + [ P] (Mac: [] + [Shift] + [P]) 命令面板类似于VSCode，可以搜索和使用大量隐藏功能。将元素复制到此处。 元素面板：选择元素> Ctrl+C 元素面板：选择元素》右键菜单》复制元素($0) 控制台中的代码复制当前选定的元素控制台：到当前元素\’$0 轻松访问。 \’ $0 代表元素面板中选定的元素，$1 是前一个元素，最多支持$4。 控制台：全局复制方法将任何对象复制到剪贴板。 copy(window.location) 控制台：queryObjects(Type) 查询对象实例。指定类型（构造函数）的控制台：保存堆栈信息（stack Trace） 错误信息可以通过右键保存为文件，并保存完整的堆栈信息。 Console: $, $$Query Dom elements-$=document.querySelector- $$=document.querySelectorAllStore as global (另存为全局变量) Console (右键): 将对象设置为全局变量并自动保存到temp* 它将命名为Elements面板（右键）：将元素设置为全局变量。上面的元素：按h 立即隐藏和显示元素。选择一个元素并按h 立即隐藏或显示该元素。元素：上下拖动鼠标，[ctrl] + []/[ctrl] + [] ([] + []/[] + ) Mac)

另存为全局（Save as Global Variable）：将对象保存为全局变量，与copy方法类似。变量名为temp1、temp2。

图片.png

**保存堆栈跟踪（Stack Trace）**：将错误堆栈信息保存为文件，并保存完整的堆栈信息。

图片.png

命令面板：与VSCode 的命令面板类似，您可以在其中找到调试工具的所有（隐藏）功能。 Ctrl] + [Shift] + [P]（Mac：[] + [Shift] + [P]）

图片.png

设置主题：您可以通过打开命令面板并搜索“主题”来在多个主题之间切换。

图片.png

分析代码覆盖率：打开命令面板，搜索“覆盖率”，如下图，分析第一页加载时哪些代码被执行，哪些代码没有被执行，并打印报告。

图片.png

选择一个文件以查看更多代码使用分析。红色=尚未执行，青色=至少执行一次。

图片.png

元素截图：输出指定元素的截图，包括隐藏的滚动内容。这个功能非常有用。

从命令面板：搜索“屏幕截图”、全屏屏幕截图和指定节点的屏幕截图。

在“元素”面板中，选择元素> 右键单击菜单> 捕获节点屏幕截图。

图片.png

01、元素面板（Element）

自由调试DOM和CSS样式，使用率很高：。

DOM Tree：左边是DOM元素树，支持编辑、删除、添加、复制DOM元素等各种操作。显示右键菜单以获取更多信息。

样式：所选元素的样式。编辑、添加CSS 样式并实时预览。

已计算：所选元素的计算样式值。

布局：网格布局、flex布局调试。

图像

1.1、CSS可视化编辑器

可视化的颜色、贝塞尔曲线、阴影编辑器所见即所得，非常简单易用。

颜色编辑器：单击色块按钮可直观地设置颜色、选择颜色并设置对比度。

Grid 和Flex 布局编辑器：使用灵活布局Grid 和Flex 时，支持布局排列的可视化编辑。

阴影编辑器：阴影属性显示编辑器按钮，用于直观地编辑阴影效果。

图片.png

贝塞尔曲线编辑器：贝塞尔曲线函数（缓动函数）用于动画过渡和动画。

图片.png

1.2、强制激活伪类

强制激活元素的伪类效果。

选择Dom 节点并右键单击强制状态。

CSS 样式“切换元素状态”如下所示：

图片.png

1.3、DOM断点

选择DOM 元素并右键单击以设置断点。您可以在元素更改时触发断点（JS 代码更改DOM）。

图片.png

添加完成后，您可以在源代码中或在Elements 面板的“DOM Breakpoints”下看到添加的DOM 断点。

图片.png

02、控制台面板（Console）

它的主要功能是调试JavaScript代码。这是一个使用率很高且常用的调试工具：。

执行代码：执行任何JS代码，包括调用页面上现有的JS对象和函数。

控制台输出：代码中的控制台错误和异常错误将打印在此处。

图片.png

2.1、console函数

使用控制台函数打印变量是控制台的一个常见功能。

**console**[2] 功能说明console.log(str) 控制台打印一条消息。 console.error(str) 将显示类似的信息。 warnconsole.table(data [, columns]); 数据是：数据以表格形式显示，非常实用。第二个参数（数组）允许指定输出列console.dir(object)来输出对象（尤其是DOM对象）。 console.assert( false, \’false\’) 断言输出。如果为false，则console.trace() 打印当前位置的执行堆栈。使用断点更实用。您可以使用console.time(label) 计时器来计算所花费的时间（以毫秒为单位）。 time(starttiming) timeLog(timing) timeEnd(end) console.clear() 清除控制台并输出控制台。清除。

console.log(\’日志\’);

console.info(\’信息\’);

console.warn(\’警告\’);

console.error(\’错误\’);

console.table([\’萨姆\’,\’伊根\’,\’水壶\’])

thrownewError(\’发生错误！\’)

控制台输出效果。右边的链接是对应的JS代码。

图片.png

使用console.time() 计算代码的时间。参数为定时器名称。

函数和(n){

让总和=0；

for(i=1;i=n;i++){

letu={姓名：\’山姆\’, 年龄：i}

总和+=i；

}

总回报

}

//计算函数消耗的时间

console.time(\’sum\’)//开始计时

consttotal=总计(100000);

console.timeLog(\’sum\’);//计时： sum: 4.43994140625 毫秒

constttotal2=总计（1000）；

console.timeEnd(\’sum\’);//计时： sum: 5.0419921875 毫秒

console.log({total});//{total:5000050000}

2.2、增强log：真实用！

常量x=100，y=200；

console.log(x,y);//100200

console.log({x,y});//{x:100,y:200}

console.table({x,y});

当您直接打印一个值时，如上面的代码所示，您通常不知道该值对应于哪个变量。您可以在此处使用文字对象，并添加console.table 进一步提高输出的可读性。

图片.png

2.3、自定义log样式：占位符

控制台功能支持的占位符：

占位符描述%cCSS 样式占位符。该值是CSS 样式。您可以使用自定义日志样式%oor%O 打印JavaScript 对象，如下例所示。单击审阅器中的对象名称可展开更多对象信息。 %dor%i 输出一个整数。支持数字格式。例如，console.log(\’Foo %.2d\’, 1.1) 打印两个带前导零的有效数字(Foo 01)。 %s 打印一个字符串。 %f 打印浮点数。支持格式化。例如，console.log(\’Foo %.2f\’, 1.1) 打印2 位小数：Foo 1.10

图片.png

2.4、监听函数

可以通过以下全局函数（调试工具）监控函数和事件的执行情况：

函数说明Monitor(function) 输出有关执行受监视函数时调用的内容的信息。 MonitorEvents(event) 当事件触发时打印触发事件日志。

图片.png

2.5、监听变量：活动表达式

很棒的功能！点击下图中的眼睛图标相当于添加一个动态表情并实时观看（显示）表情的值。

图片.png

03、源代码面板（Sources）

顾名思义，它管理网页的所有源代码文件，包括JS、CSS、图像和其他资源。常用于使用断点调试JS 代码。

在调试模式下，您可以查看变量值、上下文范围和函数调用堆栈信息（通过将鼠标悬停在变量上）。

图像

页面资源目录：与页面相关的所有资源（树）。

源代码：文件源代码。如果你想编辑在线JS代码，也可以在这里添加断点。

调试工具栏：断点调试的操作工具，可以控制代码的执行，如暂停、继续、单步执行。

断点调试器：包括多个断点调试器。

监视：允许您添加变量监视。

断点：可以在这里编辑、删除和管理所有添加的断点。

作用域：当前代码上下文的作用域，包括闭包。

调用栈：当前函数的调用栈。推荐参考值为《JavaScript函数(2)原理{深入}执行上下文[3]》。

XHR/Fetch断点：在这里为AJAX请求（XHR、Fetch）添加断点，只需添加URL地址即可。

DOM 断点：添加到元素页面的DOM 断点显示在此处。

3.1、断点调试

在源代码的行号处添加断点，如下所示。

图片.png

添加断点：添加公共断点。 单击最左侧行号上的“添加断点”或右键单击菜单。

您还可以在JS 代码中设置断点（关键字：debugger）

debugger//这里设置断点

console.log(\’调试器\’)

添加条件断点：添加条件断点。仅当满足条件时，变量在当前代码上下文中才可用。

图片.png

添加日志点：为当前代码环境的输出变量添加一个日志输出。无需在源代码下方添加控制台。

图片.png

3.2、调试线上代码：本地工作区

在线环境下，是否可以直接修改、调试源码（JS、CSS）？ —— 是的。这个想法是创建JS 的本地副本，将该本地JS 文件加载到页面中，然后修改本地JS 文件。

创建本地工作目录。

在源代码下找到“Override”，如下所示。

图片.png

然后单击“选择替代文件夹”以添加本地空文件夹作为本地工作目录。

添加后请仔细检查权限。

图片.png

创建源代码的本地副本。如果右键单击需要更改的源代码并“保存以替换”，则会在本地目录中创建一个副本文件，并且您的网页将使用本地JS 文件。

创建的本地副本将显示在“覆盖”或本地文件夹下。

代码编辑：可以直接在源代码中编辑和更改JS文件，并且更改会实时反映。

CSS、HTML 和JavaScript 均受支持。

您可以在浏览器的源代码中修改它，也可以使用其他本地工具打开它进行编辑。

图片.png

04、网络面板（Network）

图像

工具栏有两个有用的小功能：使缓存无效和模拟弱网络环境。

图片.png

单击请求的资源项可查看详细的请求和响应数据。这通常用于服务器接口的协作调试。

图像

您还可以编辑参数并重新启动请求。

图片.png

05、性能面板（Performance）

首先记录并分析网络、CPU、内存和渲染的FPS 帧率，以识别和解决页面性能问题。

图像

特别提示：我们建议在非恒定模式下运行调试性能，以避免浏览器插件效应。还应该考虑浏览器插件问题，包括调试其他异常错误。我以前也遇到过类似的问题，几经周折才发现是油脂引起的。测试机上的Monkey 插件。

性能监视器面板允许您实时监视页面的性能参数。

图片.png

Lighthouse 功能极其强大，可以对您的页面进行全面分析，包括性能、PWA（渐进式Web 应用程序）、SEO、可访问性等。分析后，生成报告并给出评分。它还提供了改进页面的建议。

图片.png

参考资料

掘金小册子：你不知道的Chrome调试技巧[4]，开源版[5]

掘金小册子：前端开发调试之PC端调试[6]

前端应该知道的开发调试知识.pptx[7]

您有什么浏览器/内核？ [8]

JavaScript函数（二）原理{详细}执行上下文[9]

参考资料

[1]

https://www.yuque.com/kanding/ktech/fh36v0:https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fkanding%2Fktech%2Ffh36v0

[2]

https://developer.mozilla.org/zh-CN/docs/Web/API/Console:https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FConsole

[3]

https://www.yuque.com/kanding/ktech/jsfunctoin2#cuhoC:https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fkanding%2Fktech%2Fjsfunctoin2%23cuhoC

[四]

https://juejin.cn/book/6844733783166418958:https://juejin.cn/book/6844733783166418958

[五]

https://dendoink.github.io/daydream/docs/chrome-tricks/index:https://link.juejin.cn?target=https%3A%2F%2Fdendoink.github.io%2Fdaydream%2Fdocs%2Fchrome-tricks%2Findex

[6]

53 85

[7]

https://bytedance.feishu.cn/file/boxcnAGLgshQ1EKi7ACwx4WI9vc:https://bytedance.feishu.cn/file/boxcnAGLgshQ1EKi7ACwx4WI9vc

[8]

https://www.yuque.com/kanding/ktech/fh36v0:https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fkanding%2Fktech%2Ffh36v0

[9]

https://www.yuque.com/kanding/ktech/jsfunctoin2#cuhoC:https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fkanding%2Fktech%2Fjsfunctoin2%23cuhoC

以上#脱发秘密：最全的前端Chrome调试技巧合集，摘自网络，仅供参考。相关信息请参见官方公告。