JavaScript 的各种调试方法

任何一门编程语言，在学习之前都应该先弄清楚它的调试方法，毕竟没有不挖坑的人类！ 程序一旦出现问题，第一时间就是找到问题出在哪儿，其次才是拿出解决办法。如果都找不到问题原因，那又何从谈起解决办法呢？ 如何排查编程问题，这就是一门艺术了，同样的问题，也许 A 只需要 10 分钟，B 可能需要 30 分钟，C 可能束手无策。 调试方法不仅仅可以用于问题排查，还能用于运行结果输出，能让枯燥的学习多那么一点点乐趣~~ ## PC 端调试手段 ### console 输出 浏览器内置的输出方法，可以很方便地看到运行结果，也能帮助我们定位程序问题。常用方法： ```js console.log() // 输出 log 日志级别的变量值或信息。 console.info() // 输出 info 信息级别的变量值或信息。 console.error() // 输出 error 错误级别的变量值或信息。 console.warn() // 输出 warn 警告级别的变量值或信息。 console.trace() // 输出函数调用堆栈 console.table() // 以表格形式展示数组/对象 console.time() // 计时器 console.timeEnd() // 计时结束，查看计时结果 ``` `console` 掌握以上几个常用方法已经足够了，当然它还有其他一些不太常用的方法，比如： ```js console.assert() // 断言 console.clear() // 清空控制台 console.count() // 计数器 console.countReset() // 重置计数器 console.debug() // 输出调试信息 console.dir() // 输出对象结构 console.dirxml() // 输出 XML 结构 console.group() // 分组 console.groupCollapsed() // 收缩分组 console.groupEnd() // 结束分组 console.profile() // 开始性能分析（非标准，存在兼容性） console.profileEnd() // 结束性能分析（非标准，存在兼容性） console.timeLog() // 输出计时器 console.timeStamp() // 输出时间戳（非标准，存在兼容性） ``` 提到 console ，那么就不得不提浏览器的开发者工具了，因为 console 输出的内容，都是在开发者工具--控制台中展示的： 示例： ```js console.time() // 开始计时器 console.log('日志信息', 'hello world', {a: 'b'}) console.info('信息', 'hello world', {a: 'b'}) console.error('错误信息', 'hello world', {a: 'b'}) console.warn('警告信息', 'hello world', {a: 'b'}) console.trace('追踪信息') console.table([{a: 'b'}, {a: 'c'}]) console.timeEnd() // 结束计时器，查看计时结果 ``` 以上代码可以直接在开发者工具--控制台中执行，看看执行效果： **您的浏览器控制台可能不支持粘贴代码，会提示让您输入 `allow pasting`，可在控制台中输入 allow pasting 之后回车就能粘贴代码了！**  注意看最后的 `default: xxx ms`，这表示 `time` 到 `timeEnd` 的执行时间，截图中就表示我们代码执行耗时 0.66ms，所以这两个方法也能用于我们的代码性能检测，分析出哪些代码耗时太长，便可以针对耗时长的代码做优化。 ### debugger 语句 在代码中插入 `debugger;`，当浏览器开发者工具打开时自动进入中断。 ```js const test = '112233'; function foo() { const test1 = '123'; const test2 = '321'; const test3 = test1 + test2; debugger; } foo() ``` 控制台执行以上代码，开发者工具将会进入中断，此时可以看到当前程序状态：  `控制按钮` 可以程序继续执行、跳过下一个函数调用、进入下一个函数、跳出当前函数、单步调试、停用断点等。 `监视` 可以添加自定义表达式查看程序状态。。 `本地` 和 `全局` 可以查看当前程序作用域中的变量。 `调用堆栈` 可以查看当前程序的调用顺序。 ### 断点调试 可在 `源代码/来源（Sources）` 面板中添加断点进行调试，与 debugger 类似，不同地方在于 debugger 语句需要添加在代码中，而 `断点调试` 只需要在面板中打上断点即可。 示例代码： ```js ``` 断点调试演示：  ### 网络调试 开发者工具中的网络（Network）面板，可以查看所有的网络请求，包括请求头、响应头、响应内容、网络耗时等等。 也可以对网络请求节流，模拟低网速环境下网页响应状态等。  ### 性能、内存面板 开发者工具中的两个高阶技能，一般多用于性能优化。 性能（Performance）面板：录制代码执行过程，分析耗时函数 内存（Memory）面板：抓取堆快照，排查内存泄漏。 ### 开发者工具的其他手段 `日志点`：右键行号设置，无需修改代码输出日志。 `条件断点`：仅在满足条件时中断（如循环特定索引）。 `黑盒脚本（Blackbox）`：忽略第三方库/框架的内部代码，聚焦业务逻辑调试。 ### 框架专用工具 `React Developer Tools` 检查 React 组件状态、Props及Hooks，分析组件渲染性能。 `Vue Devtools` 查看Vue组件树、状态和事件。 ### 善用无痕模式 浏览器无痕模式，可以屏蔽浏览器的三方插件，避免缓存影响。有时候某个问题可能就是某个插件或者三方缓存造成的，这时候使用无痕模式可以分分钟定位问题。 ## 移动端调试手段 移动端没有内置开发者工具，程序调试不像 PC 端那么方便，这时候必须借助相关开源工具了，比如： ### vConsole `vConsole`：腾讯开源的轻量级网页控制台，集成日志、网络请求、设备信息查看等功能。 使用方法：必须在代码中引入并开启工具。 ```html ``` 效果：  ### Eruda `Eruda`：功能更丰富的控制台，支持元素检查、性能分析、本地存储查看等。 使用方法：必须在代码中引入并开启工具。 ```html ``` 效果：  ### Chrome远程调试 手机端 Chrome 浏览器，通过 USB 线连接电脑，可在电脑端查看手机端网页的调试信息。 1、手机开启USB调试模式（开发者选项中）。 2、用USB连接电脑，Chrome访问 chrome://inspect/#devices。 3、点击对应页面下的 Inspect，直接使用PC版DevTools调试。 ### 抓包工具 PC 端代表软件：Charles、Fiddler。 Node.js抓包工具：Whistle。 手机端抓包APP：HttpCanary（Android）、Stream（iOS）。 抓包工具可不仅仅用于抓包。 1、可以用来分析网络请求，比如查看各种请求内容是否正常。 2、可以模拟网络请求各种状态，比如请求超时、无网络、404、500等。 3、可以伪造请求内容，比如伪造一个接口的响应数据，用于模拟后端接口返回数据。 **手机抓包步骤：** 1、PC 安装 Charles 或者 Fiddler，设置代理端口（默认8888）。 2、手机与PC同一网络，Wi-Fi设置手动代理（IP 为 PC 内网地址，端口8888）。 3、安装证书以捕获HTTPS请求。 以 `Fiddler` 为例：  所有的 http 和 https 请求都会被软件捕获，我们可以查看所有被捕获的请求，也可以修改它们。 ## 终极手段 有时候可能所有的调试手段都用上了，但就是找不到问题，这时候可以尝试删除部分代码，直到删到没问题为止，基本就能定位到有问题的代码了。 ## 写在最后 调试手段不仅仅可以用于开发调试，还能用于线上环境问题定位，模拟程序的各种异常情况，提升程序的健壮性。