首页 | 编程 | Java

在Chrome DevTools中调试JavaScript的实现

2020年04月07日 作者：前端开发劝退师原文

由浅入深说一说怎么样在 Chrome DevTools 中调试 JavaScript。

一、案发现场

为了方便理解，我写了一个小demo。

点击打开demo；

在num1中输入6；

在num2中输入9；

点击 num1+num2，按钮下方的标签显示 69，结果应为 15，这就是我们需要断点调试找出的 BUG 。

Event Listener Breakpoints 可以完成此任务：

在 JavaScript 调试 窗口中，点击 Event Listener Breakpoints 前面的展开按钮。 可以看见 Animation、Canvas、Clipboard 等一系列事件；

在页面输入框中输入num1和num2的值；

展开 Mouse 事件，每个事件旁都有一个复选框。勾选 click 复选框。 DevTools 现在可以在任何 click 事件侦听器运行时自动暂停。

点击页面中的num1+num2按钮。此时页面如下图：

这是因为我装的浏览器插件导致的定位不准，最好在无痕模式进行操作。不过也不影响，我们点击一下最左边页面上的蓝色按钮，再点击中间的打括号（格式化代码），就可以定位准确并且格式化好代码：

- 点击 Watch 标签。
- 点击 右边的 + 添加表达式。
- 输入 typeof n。 按 Enter 键。（这里代码是打包后的，n表示num1输入框的值）
- DevTools 会显示 typeof n: "string"。 冒号右侧的值就是监视表达式的结果。

五、尝试修改

上一步我们已找到解决 BUG 的方法。 接下来就是尝试通过编辑代码并重新运行demo来使用修正方法。 我们可以在 代码编辑 窗口直接修改代码：

在 代码编辑 窗口中，将代码格式化关掉，然后修改代码，将 n+u 换成 parseInt(n)+parseInt(u) 。

按 Command+S (Mac) 或 Control+S（Windows、Linux）以保存更改。

点击 Deactivate breakpoints 取消激活断点。 其将变为蓝色，表示处于活动状态。 在完成此设置后，DevTools 会忽略您已设置的任何断点。

点击num1+num2按钮，则会看见正确的结果啦！

Tips: 这样做只能修正在浏览器中运行的代码， 不能为访问您页面的所有用户修正代码。 为此，我需要修改自己服务器上的代码。

六、介绍其他几种断点

断点类型 使用场景
代码行 在确切的代码区域中
条件代码行 在确切的代码区域中，且仅当其他一些条件成立时
DOM 在更改或移除特定 DOM 节点或其子级的代码中
XHR 当 XHR 网址包含字符串模式时
事件侦听器 在触发 click 等事件后运行的代码中
异常 在引发已捕获或未捕获异常的代码行中
函数 任何时候调用特定函数时

1. 代码行断点

直接点击

这是使用最多的一种断点方式，在知道需要检查的确切代码区域时，可以使用代码行断点。 DevTools 始终会在执行此代码行之前暂停。

在代码中调用 debugger 可在该行暂停。 此操作相当于使用代码行断点，只是此断点是在代码中设置，而不是在 DevTools 界面中设置。

console.log('a');
console.log('b');
debugger;
console.log('c');

条件代码断点
如果知道需要调查的确切代码区域，但只想在其他一些条件成立时进行暂停，则可使用条件代码行断点。若要设置条件代码行断点：

  1. 点击 Sources 标签。
  2. 打开包含您想要中断的代码行的文件。
  3. 转至代码行。
  4. 代码行的左侧是行号列。
  5. 右键点击行号列。
  6. 选择 Add conditional breakpoint。
  7. 代码行下方将显示一个对话框。
  8. 在对话框中输入条件。
  9. 按Enter 键激活断点。 行号列顶部将显示一个橙色图标。

这样就可以拦截包含getUserInfo字符串的请求，如果添加一个空的，则可以拦截所有请求！

5. 事件侦听器断点

如果想要暂停触发事件后运行的事件侦听器代码，可以使用事件侦听器断点。 您可以选择 click 等特定事件或所有鼠标事件等事件类别。

我们一开始使用的例子就是事件侦听器断点，这里就不演示了。

6. 异常断点

如果想要在引发已捕获或未捕获异常的代码行暂停，可以使用异常断点。

  • 点击 Sources 标签。
  • 点击 Pause on exceptions 引发异常时暂停 {:.devtools-inline}。 启用后，此按钮变为蓝色。
  • （可选）如果除未捕获异常以外，还想在引发已捕获异常时暂停，则勾选 Pause On Caught Exceptions 复选框。

7.函数断点

如果想要在调用特定函数时暂停，可以调用 debug(functionName)，其中 functionName 是要调试的函数。 您可以将 debug() 插入您的代码（如 console.log() 语句），也可以从 DevTools 控制台中进行调用。 debug() 相当于在第一行函数中设置代码行断点。

function sum(a, b) {
 let result = a + b; // DevTools 会在此行暂停
 return result;
}
debug(sum); // 传递函数对象，而不是字符串。
sum();

如果想要调试的函数不在范围内，DevTools 会引发 ReferenceError。

(function () {
 function hey() {
 console.log('hey');
 }
 function yo() {
 console.log('yo');
 }
 debug(yo); // 这行可以成功调用
 yo();
})();
debug(hey); // 这一行不能成功调用 hey() 不在作用域内

如果是从 DevTools 控制台中调用 debug()，则很难确保目标函数在范围内。所以一般还不如直接使用代码行断点！

到此这篇关于在Chrome DevTools中调试JavaScript的实现的文章就介绍到这了,更多相关Chrome DevTools调试JavaScript内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！

相关链接