在Chrome DevTools中调试JavaScript的实现

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

　　DevTools 可为更改 CSS、分析页面加载性能和监控网络请求等不同的任务提供许多不同的工具。 我们就在 Sources 面板中调试 JavaScript。

　　JavaScript 调试窗口。 包含检查页面 JavaScript 的各种工具。 如果 DevTools 窗口布局较窄，此窗口会显示在 代码编辑 窗口下方。

　　调试上面这种问题的常用方法是将多个console.log()语句插入代码，以便在执行脚本的时候检查相关变量的值。

　　虽然console.log()方法可以完成任务，但断点可以更快完成此任务。 断点可在执行代码的过程中暂停代码，并在此时及时检查所有相关变量的值。 与console.log()方法相比ASP编程，断点具有一些优势：

　　接下来我们开始思考一开始抛出的程序的运作方式，我们可以根据经验推测出，我们在点击num1+num2按钮的时候触发的 click 事件肯定和 6+9=69 计算不正确有关系。 因此，我们可能需要在 click 侦听器运行的时候暂停代码。

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

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

　　在某代码行暂停时，Scope 窗格会显示当前定义的局部和全局变量，以及各变量值。 其中还会显示闭包变量（如果适用）。 双击变量值可进行编辑。 如果不在任何代码行暂停，则 Scope 窗格为空。

　　Watch 标签可监视变量值随时间变化的情况。 并且，监视不仅限于监视变量。 我们可以将任何有效的 JavaScript 表达式存储在监视表达式中。 我们尝试这样：

　　- 输入typeof n。 按 Enter 键。（这里代码是打包后的，n表示num1输入框的值）

　　控制台除了查看console.log()消息以外，还可以使用控制台对任意 JavaScript 语句求值。 对于调试，可以使用控制台测试 BUG 的潜在解决方法:

　　按 Enter 键。 DevTools 对语句求值并打印输出 15，即我们预计demo页面会产生的结果。

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

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

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

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

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

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

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

　　如果想要暂停更改 DOM 节点或其子级的代码，可以使用 DOM 更改断点。若要设置 DOM 更改断点：

　　modifications： 在移除或添加当前所选节点的子级，或更改子级内容时触发这类断点。在子级节点属性发生变化或对当前所选节点进行任何更改时不会触发这类断点。

　　Attributes modifications：在当前所选节点上添加或移除属性，或属性值发生变化时触发这类断点。

　　如果想在 XHR 的请求网址包含指定字符串时中断，可以使用 XHR 断点。 DevTools 会在 XHR 调用send()的代码行暂停。

　　例如，在您发现您的页面请求的是错误网址，并且您想要快速找到导致错误请求的 AJAX 或 Fetch 源代码时，这类断点很有用。

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

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

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

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