作者：Ashish Lahoti 译者：前端很美 来源：codingnconcepts
在这个教程中，我们将学到很多使用chrome控制台调试js的技巧，例如打日志的多种不同的console api 等等。。。
1.尽量不要使用alert调试
alert("I will pop up in browser");
当我们使用alert调试时，他会烦人的在浏览器中弹出，并且阻塞进程，尽量避免使用alert,因为有很多替代的调试方法，随后我们将会看到。
2.使用浏览器作为调试器
大多数现代浏览器，例如 Chrome、Firefox、Edge、Opera 和 Safari，都内置了对 JavaScript 调试的支持。Chrome 作为调试器通常是开发人员的首选。
Chrome 开发者工具
Chrome DevTools 中一些最常用的图标是：
使用Inspect 图标 ⬉选择页面中的元素并在Elements 标签中检查其 DOM 位置。也可以更新或删除 DOM 元素，检查DOM元素的CSS，以及其他更多的操作。使用设备图标 ⍇检查网站的响应能力。它在浏览器页面上添加了一个额外的工具栏，可以在其中模拟不同设备的视口，例如手机 （如 iPhone、三星 Galaxy、Nexus、LG、诺基亚、黑莓等） 、平板电脑 （如 iPad 等） 和笔记本电脑 。可以在Sources选项卡下查看呈现页面的所有 JavaScript 源代码。通常源文件被压缩，无论是阅读还是打断点都很难。使用格式图标 {}以人类可读的格式格式化这些被压缩的js文件。
3.代码断点
我们可以使用断点在浏览器中暂停JavaScript代码的执行。在 DevTools 中设置代码行断点：
单击source选项卡。 打开js文件并转到你要调试的代码行。 在代码的左侧可以看到行数列。点击行号，旁边会出现一个图标，表示断点已设置好了。 如果要删除断点，再次单击相同的行号，断点图标消失。
请注意的是，DevTool 中的断点图标可能会因 chrome 版本和操作系统（windows 或 MacOS）而不同
有的时候，设置代码行断点可能效率低下，尤其是当我们不知道确切的位置时，或者调试大型代码库时。了解并知道如何使用其他类型的断点将会提高调试的效率。
| 断点类型 | 当您想暂停时使用它... |
|---|---|
| 代码行 | 在确切的代码行上。 |
| 有条件的代码行 | 在仅当一些条件为真时的确切的代码行上 |
| DOM | 在更改或删除特定 DOM 节点或其子节点的代码上。 |
| XHR | 在XHRsend()或fetch()方法 |
| 事件监听器 | 在触发事件（例如click ）之后运行的代码上。 |
| 异常 | 在抛出异常的代码行上。 |
| 函数 | 调用函数时。 |
4.使用‘debugger’语句设置断点
当浏览器处于调试模式，代码运行到debugger语句时，将会像像断点一样暂停代码的执行。
通常，我们会在浏览器devtools工具中找到有问题的代码并设置断点进行调试，但是有时在浏览器中不容易找到确切的代码，这个时候debugger语句会非常的好用。
function hello(name) {
let phrase = `Hello, ${name}!`;
debugger; //
5.条件断点
有时，我们需要在某种条件成立下调试代码，这时我们可以使用条件断点来进行调试。 、 设置条件断点的步骤:
单击source选项卡。 打开文件并转到要调试的代码行。 代码左侧找到行号列。右键单击它。 选择add conditional breakpoint.. ，代码行下方会显示一个对话框。 在对话框中输入条件。 按 Enter 键激活断点。
此时，我们可以看到条件断点的标识和普通断点的标识不一样，具体如何不一样，视操作系统和浏览器版本不同而不同。
6.Dom更改断点
当我们需要调试change dom节点及子节点的代码时，使用dom改变断点会比较好。
设置一个dom chang的断点的步骤：
单击elements选项卡。 转到要设置断点的元素。 右键单击该元素。 将鼠标悬停在Break 上， 然后选择子Subtree modifications, Attribute modifications, 或 Node removal.。
DOM 更改断点的类型
Subtree modifications： 当当前选中节点的子节点被移除或添加，或者子节点的内容被改变时触发。不会在子节点属性更改或当前节点的更改时触发。 Attribute modifications： 在当前选择的节点上添加或删除属性时触发，或者当属性值更改时触发。 Node removal： 当当前选中的节点被移除时触发。
7.XHR/Fetch 断点
如果您在 AJAX 请求中遇到错误并且无法识别提交此请求的代码，那么 XHR 断点对于快速查找 AJAX 源代码非常有用。当我们遇见了一个ajax请求错误，同时又找不到触发此请求的代码，此时，xhr断点对于快速找到ajax源码将会非常的有用。
当AJAX请求的URL包含指定字符串时，XHR断点会暂停代码的执行。AJAXsend()和fetch()方法支持 XHR 断点。
设置XHR断点的步骤：
单击source选项卡。 展开XHR 断点窗格。 单击添加断点。 输入要中断的字符串。当此字符串出现在XHR请求URL的任何位置时，DevTools 会暂停。 按Enter确认。
8.事件监听器断点
当我们想调试事件触发后的事件监听器代码时，我们可以使用事件监听器断点，我们可以选择特定的事件，例如鼠标下的click事件，clipboard类别下的剪切、复制、粘贴。
设置事件侦听器断点的步骤：
单击source选项卡。 展开Event Listener Breakpoints窗格。DevTools显示事件类别列表，例如Animation、Canvas、Clipboard、Mouse等。
3. 选中 ☑ 类别以包括该类别下的所有事件，或展开类别并选中 ☑ 特定事件。
9.异常断点
Chrome devtools允许我们在抛出捕获或未捕获的异常时暂停JavaScript代码的执行。当代码没有抛出错误并且无提示却执行失败时，这个技巧非常有用。设置异常断点的步骤：
单击source选项卡。
单击Pause on exceptions图标。启用时变为蓝色。
如果您还想在捕获的异常上也暂停执行，请勾选☑ Pause on uncaught exceptions。
10. Function断点
使用debug(functionName)方法调试函数， 其中functionName是要调试的函数名，当我们需要调试一个具体的函数时，我们可以在代码中插入debug()函数，使用了debug()就和在函数的第一行打了一个行断点是一样的，
function sum(a, b) {
let result = a + b; // 代码将会在这行暂停执行
return result;
}
debug(sum);
sum();
把以上代码复制到devtools控制台执行，将会看到调试效果。
总结
时间和篇幅原因，今天分享js调试技巧的上部分，下次将分享下部分，敬请期待。