Web前端入门第 53 问：JavaScript 的各种调试方法
<p>任何一门编程语言，在学习之前都应该先弄清楚它的调试方法，毕竟没有不挖坑的人类！</p><p>程序一旦出现问题，第一时间就是找到问题出在哪儿，其次才是拿出解决办法。如果都找不到问题原因，那又何从谈起解决办法呢？</p>
<p>如何排查编程问题，这就是一门艺术了，同样的问题，也许 A 只需要 10 分钟，B 可能需要 30 分钟，C 可能束手无策。</p>
<p>调试方法不仅仅可以用于问题排查，还能用于运行结果输出，能让枯燥的学习多那么一点点乐趣~~</p>
<h2 id="pc-端调试手段">PC 端调试手段</h2>
<h3 id="console-输出">console 输出</h3>
<p>浏览器内置的输出方法，可以很方便地看到运行结果，也能帮助我们定位程序问题。常用方法：</p>
<pre><code class="language-js">console.log() // 输出 log 日志级别的变量值或信息。
console.info() // 输出 info 信息级别的变量值或信息。
console.error() // 输出 error 错误级别的变量值或信息。
console.warn() // 输出 warn 警告级别的变量值或信息。
console.trace() // 输出函数调用堆栈
console.table() // 以表格形式展示数组/对象
console.time() // 计时器
console.timeEnd() // 计时结束，查看计时结果
</code></pre>
<p><code>console</code> 掌握以上几个常用方法已经足够了，当然它还有其他一些不太常用的方法，比如：</p>
<pre><code class="language-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() // 输出时间戳（非标准，存在兼容性）
</code></pre>
<p>提到 console ，那么就不得不提浏览器的开发者工具了，因为 console 输出的内容，都是在开发者工具--控制台中展示的：</p>
<p>示例：</p>
<pre><code class="language-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() // 结束计时器，查看计时结果
</code></pre>
<p>以上代码可以直接在开发者工具--控制台中执行，看看执行效果：</p>
<p><strong>您的浏览器控制台可能不支持粘贴代码，会提示让您输入 <code>allow pasting</code>，可在控制台中输入 allow pasting 之后回车就能粘贴代码了！</strong></p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202505/596097-20250515102446461-142170426.gif"></p>
<p>注意看最后的 <code>default: xxx ms</code>，这表示 <code>time</code> 到 <code>timeEnd</code> 的执行时间，截图中就表示我们代码执行耗时 0.66ms，所以这两个方法也能用于我们的代码性能检测，分析出哪些代码耗时太长，便可以针对耗时长的代码做优化。</p>
<h3 id="debugger-语句">debugger 语句</h3>
<p>在代码中插入 <code>debugger;</code>，当浏览器开发者工具打开时自动进入中断。</p>
<pre><code class="language-js">const test = '112233';
function foo() {
const test1 = '123';
const test2 = '321';
const test3 = test1 + test2;
debugger;
}
foo()
</code></pre>
<p>控制台执行以上代码，开发者工具将会进入中断，此时可以看到当前程序状态：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202505/596097-20250515102503174-1819274170.png"></p>
<p><code>控制按钮</code> 可以程序继续执行、跳过下一个函数调用、进入下一个函数、跳出当前函数、单步调试、停用断点等。<br>
<code>监视</code> 可以添加自定义表达式查看程序状态。。<br>
<code>本地</code> 和 <code>全局</code> 可以查看当前程序作用域中的变量。<br>
<code>调用堆栈</code> 可以查看当前程序的调用顺序。</p>
<h3 id="断点调试">断点调试</h3>
<p>可在 <code>源代码/来源（Sources）</code> 面板中添加断点进行调试，与 debugger 类似，不同地方在于 debugger 语句需要添加在代码中，而 <code>断点调试</code> 只需要在面板中打上断点即可。</p>
<p>示例代码：</p>
<pre><code class="language-js"><script>
const test = '112233';
function foo() {
const test1 = '123';
const test2 = '321';
const test3 = test1 + test2;
return test3;
}
foo()
</script>
</code></pre>
<p>断点调试演示：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202505/596097-20250515102512845-1296045207.gif"></p>
<h3 id="网络调试">网络调试</h3>
<p>开发者工具中的网络（Network）面板，可以查看所有的网络请求，包括请求头、响应头、响应内容、网络耗时等等。</p>
<p>也可以对网络请求节流，模拟低网速环境下网页响应状态等。</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202505/596097-20250515102517918-160983752.png"></p>
<h3 id="性能内存面板">性能、内存面板</h3>
<p>开发者工具中的两个高阶技能，一般多用于性能优化。</p>
<p>性能（Performance）面板：录制代码执行过程，分析耗时函数<br>
内存（Memory）面板：抓取堆快照，排查内存泄漏。</p>
<h3 id="开发者工具的其他手段">开发者工具的其他手段</h3>
<p><code>日志点</code>：右键行号设置，无需修改代码输出日志。<br>
<code>条件断点</code>：仅在满足条件时中断（如循环特定索引）。<br>
<code>黑盒脚本（Blackbox）</code>：忽略第三方库/框架的内部代码，聚焦业务逻辑调试。</p>
<h3 id="框架专用工具">框架专用工具</h3>
<p><code>React Developer Tools</code> 检查 React 组件状态、Props及Hooks，分析组件渲染性能。</p>
<p><code>Vue Devtools</code> 查看Vue组件树、状态和事件。</p>
<h3 id="善用无痕模式">善用无痕模式</h3>
<p>浏览器无痕模式，可以屏蔽浏览器的三方插件，避免缓存影响。有时候某个问题可能就是某个插件或者三方缓存造成的，这时候使用无痕模式可以分分钟定位问题。</p>
<h2 id="移动端调试手段">移动端调试手段</h2>
<p>移动端没有内置开发者工具，程序调试不像 PC 端那么方便，这时候必须借助相关开源工具了，比如：</p>
<h3 id="vconsole">vConsole</h3>
<p><code>vConsole</code>：腾讯开源的轻量级网页控制台，集成日志、网络请求、设备信息查看等功能。</p>
<p>使用方法：必须在代码中引入并开启工具。</p>
<pre><code class="language-html"><script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.1/vconsole.min.js"></script>
<script>
new VConsole();
</script>
</code></pre>
<p>效果：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202505/596097-20250515102531274-117598608.gif"></p>
<h3 id="eruda">Eruda</h3>
<p><code>Eruda</code>：功能更丰富的控制台，支持元素检查、性能分析、本地存储查看等。</p>
<p>使用方法：必须在代码中引入并开启工具。</p>
<pre><code class="language-html"><script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.4.1/eruda.min.js"></script>
<script>
eruda.init();
</script>
</code></pre>
<p>效果：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202505/596097-20250515102536305-495388312.gif"></p>
<h3 id="chrome远程调试">Chrome远程调试</h3>
<p>手机端 Chrome 浏览器，通过 USB 线连接电脑，可在电脑端查看手机端网页的调试信息。</p>
<p>1、手机开启USB调试模式（开发者选项中）。<br>
2、用USB连接电脑，Chrome访问 chrome://inspect/#devices。<br>
3、点击对应页面下的 Inspect，直接使用PC版DevTools调试。</p>
<h3 id="抓包工具">抓包工具</h3>
<p>PC 端代表软件：Charles、Fiddler。</p>
<p>Node.js抓包工具：Whistle。</p>
<p>手机端抓包APP：HttpCanary（Android）、Stream（iOS）。</p>
<p>抓包工具可不仅仅用于抓包。</p>
<p>1、可以用来分析网络请求，比如查看各种请求内容是否正常。<br>
2、可以模拟网络请求各种状态，比如请求超时、无网络、404、500等。<br>
3、可以伪造请求内容，比如伪造一个接口的响应数据，用于模拟后端接口返回数据。</p>
<p><strong>手机抓包步骤：</strong></p>
<p>1、PC 安装 Charles 或者 Fiddler，设置代理端口（默认8888）。<br>
2、手机与PC同一网络，Wi-Fi设置手动代理（IP 为 PC 内网地址，端口8888）。<br>
3、安装证书以捕获HTTPS请求。</p>
<p>以 <code>Fiddler</code> 为例：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202505/596097-20250515102546308-1946838116.png"></p>
<p>所有的 http 和 https 请求都会被软件捕获，我们可以查看所有被捕获的请求，也可以修改它们。</p>
<h2 id="终极手段">终极手段</h2>
<p>有时候可能所有的调试手段都用上了，但就是找不到问题，这时候可以尝试删除部分代码，直到删到没问题为止，基本就能定位到有问题的代码了。</p>
<h2 id="写在最后">写在最后</h2>
<p>调试手段不仅仅可以用于开发调试，还能用于线上环境问题定位，模拟程序的各种异常情况，提升程序的健壮性。</p>
</div>
<div id="MySignature" role="contentinfo">
<p> </p>
<p style="font-size: 18px;font-weight: bold;">文章首发于微信公众号【<span style="color:rgb(255, 71, 87)">前端路引</span>】，欢迎 <span style="color:#4ec259">微信扫一扫</span> 查看更多文章。</p>
<p>
<img style="max-width: 320px;" src="https://images.cnblogs.com/cnblogs_com/linx/2447020/o_250228035031_%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.png"/>
</p>
<p>本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/18877259</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/linx/p/18877259
頁:
[1]