前端Chrome调试技巧汇总

01、元素面板（Element）

可以自由调试DOM、CSS样式，使用评率级高：⭐⭐⭐⭐⭐。

• DOM树：左侧为DOM元素树，支持多种操作，如编辑、删除、新增、复制DOM元素，更多可查看右键菜单。

• 样式：选中元素的样式，可编辑、添加CSS样式，实时预览。

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

• 布局：grid布局、flex布局调试。

02、控制台面板（Console）

主要功能就是调试JavaScript代码，是比较常用的调试工具，使用评率很高：⭐⭐⭐⭐⭐。

• 运行代码：可执行任意JS代码，包括调用页面已有的JS对象、函数。

• console输出：代码中的Console、异常错误都会在这里输出。

用console函数输出变量，是比较常用的调试技巧，console的常用函数：

**console**[2]函数	说明
console.log(str)	控制台输出一条消息
console.error(str);	打印一条错误信息，类似的还有info、warn
console.table(data [, columns])	将数据以表格的形式显示，很实用，data为数组或对象，第二个参数（数组）可指定输出的列
console.dir(object)	树形方式打印对象，特别是DOM对象非常实用
console.assert(false, 'false')	断言输出，为false才会输出
console.trace()	输出当前位置的执行堆栈，用断点会更实用一些。
console.time(label)	计时器，可用来计算耗时（毫秒），三个函数配合使用：time(开始计时) > timeLog(计时) > timeEnd(结束)
console.clear()	清空控制台，并输出 Console was cleared。

03、源代码面板（Sources）

顾名思义，管理网页所有的源代码文件，包括JS、CSS、图片等资源，经常就是在这里断点调试JS代码，使用评率中：⭐⭐⭐⭐。

在调试模式下可以查看（鼠标悬浮在变量上）变量值、上下文作用域、函数调用堆栈信息。

• ① 页面资源目录：页面涉及的所有资源（树）。

• ② 源代码：文件源代码，可以在这里添加断点调试JS代码，如果想编辑在线JS代码，也是可以的，详见后文。

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

• ④ 断点调试器：这里包含多个断点调试器：

• 监视（Watch）：可添加对变量的监视。

• 断点（Breakpoints）：所有添加的断点，可在这里编辑、删除管理。

• 作用域（Scope）：当前代码上下文的作用域，含闭包。

• 调用堆栈（Call Stack）：当前函数的调用堆栈，推荐参考《JavaScript函数(2)原理{深入}执行上下文[3]》。

• XHR/提取断点：可以在这里添加对AJAX请求（XHR、Fetch）的断点，添加URL地址即可。

• DOM断点：在元素页面添加的DOM断点会在这里显示。

3.1、断点调试

如下图，在源代码行号位置添加断点。

• 添加断点（Add breakpoint）：添加一个普通断点，最左侧行号处，点击添加断点，或者右键菜单。

也可以在JS代码中设置断点，关键字：debugger

debugger // 会在这里断点
console.log('debugger')

• 添加条件断点（Add conditional breakpoint）：添加一个条件断点，符合条件断点才会生效，条件可使用当前代码上下文中的变量。

• 添加记录点（Add logpoint）：添加一个日志打印，打印当前代码环境的变量，非常方便，不用在源码下添加console了。

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

如果是线上的环境，能不能直接修改源代码（JS、CSS）调试呢？—— 可以的。思路就是创建本地的JS副本，页面加载本地的JS文件，就可以在本地JS文件上修改了。

① 创建本地工作目录：

• 如下图，源代码下面找到“覆盖（Override）”。

• 然后点击“选择替代文件夹”，添加一个本地空的文件夹，作为本地工作目录。

• 添加后要注意要确认授权。

② 创建源代码的本地副本：选择需要修改的源代码右键“保存以备替代”，就会在本地目录创建副本文件，网页使用本地的JS文件。

• 创建的本地副本，可以在“覆盖”下看到，也可以在本地文件夹下看到。

③ 编辑代码：该JS文件就可以直接在源代码中编辑修改了，实时生效。

• CSS、HTML、JavaScript都支持。

• 可以在浏览器的源代码中修改，也可以本地其他工具中打开编辑。

04、网络面板（Network）

工具栏中两个比较实用的小功能：禁用缓存、模拟弱网环境。

点击请求的资源项，可以查看详细的请求、响应数据，常用于服务端接口的联调。

还可以编辑参数，重新发起请求

05、性能面板（Performance）

先录制，后分析，分析网络、CPU、内存、渲染FPS帧率，用于定位、解决页面性能问题。

🚩特别提示：调试性能建议在无恒模式下进行，尽量避浏览器插件的影响。包括其他异常Bug的调试，也要考虑浏览器插件问题，之前就遇到过类似问题，页面上一个Bug怎么也复现不了，几经波折才发现是测试机上的油猴插件的影响。

🔸性能监视器（Performance monitor）面板可以实时的监控页面性能参数。

🔸Lighthouse，这个就很厉害了，对页面进行综合分析，包括性能、PWA（Progressive Web App，渐进式Web应用）、SEO、无障碍访问等，分析完后产出报告，给出得分，还给出了页面改进建议。

作者：安木夕

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