js的调试技巧(一)

前端很美
883 阅读6分钟

「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」

作者： Ashish Lahoti 译者：前端很美 来源：codingnconcepts

在这个教程中，我们将学到很多使用chrome控制台调试js的技巧，例如打日志的多种不同的console api 等等。。。

1.尽量不要使用alert调试

alert("I will pop up in browser");

image.png

当我们使用alert调试时，他会烦人的在浏览器中弹出，并且阻塞进程，尽量避免使用alert,因为有很多替代的调试方法，随后我们将会看到。

2.使用浏览器作为调试器

大多数现代浏览器，例如 Chrome、Firefox、Edge、Opera 和 Safari，都内置了对 JavaScript 调试的支持。Chrome 作为调试器通常是开发人员的首选。

Chrome 开发者工具

image.png

Chrome DevTools 中一些最常用的图标是：

  1. 使用Inspect 图标 ⬉选择页面中的元素并在Elements 标签中检查其 DOM 位置。也可以更新或删除 DOM 元素，检查DOM元素的CSS，以及其他更多的操作。
  2. 使用设备图标 ⍇检查网站的响应能力。它在浏览器页面上添加了一个额外的工具栏，可以在其中模拟不同设备的视口，例如手机 （如 iPhone、三星 Galaxy、Nexus、LG、诺基亚、黑莓等） 、平板电脑 （如 iPad 等） 和笔记本电脑 。
  3. 可以在Sources选项卡下查看呈现页面的所有 JavaScript 源代码。通常源文件被压缩，无论是阅读还是打断点都很难。使用格式图标 {}以人类可读的格式格式化这些被压缩的js文件。

3.代码断点

我们可以使用断点在浏览器中暂停JavaScript代码的执行。 在 DevTools 中设置代码行断点：

  1. 单击source选项卡。
  2. 打开js文件并转到你要调试的代码行。
  3. 在代码的左侧可以看到行数列。点击行号，旁边会出现一个图标，表示断点已设置好了。
  4. 如果要删除断点，再次单击相同的行号，断点图标消失。

请注意的是，DevTool 中的断点图标可能会因 chrome 版本和操作系统（windows 或 MacOS）而不同

有的时候，设置代码行断点可能效率低下，尤其是当我们不知道确切的位置时，或者调试大型代码库时。了解并知道如何使用其他类型的断点将会提高调试的效率。

断点类型当您想暂停时使用它...
代码行在确切的代码行上。
有条件的代码行在仅当一些条件为真时的确切的代码行上
DOM在更改或删除特定 DOM 节点或其子节点的代码上。
XHR在XHRsend()或fetch()方法
事件监听器在触发事件（例如click ）之后运行的代码上。
异常在抛出异常的代码行上。
函数调用函数时。

4.使用‘debugger’语句设置断点

当浏览器处于调试模式，代码运行到debugger语句时，将会像像断点一样暂停代码的执行。
通常，我们会在浏览器devtools工具中找到有问题的代码并设置断点进行调试，但是有时在浏览器中不容易找到确切的代码，这个时候debugger语句会非常的好用。

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- 代码将会在这行暂停执行

  say(phrase);
}

5.条件断点

有时，我们需要在某种条件成立下调试代码，这时我们可以使用条件断点来进行调试。 、 设置条件断点的步骤:

  1. 单击source选项卡。
  2. 打开文件并转到要调试的代码行。
  3. 代码左侧找到行号列。右键单击它。
  4. 选择add conditional breakpoint.. ，代码行下方会显示一个对话框。
  5. 在对话框中输入条件。
  6. 按 Enter 键激活断点。
    此时，我们可以看到条件断点的标识和普通断点的标识不一样，具体如何不一样，视操作系统和浏览器版本不同而不同。

6.Dom更改断点

当我们需要调试change dom节点及子节点的代码时，使用dom改变断点会比较好。
设置一个dom chang的断点的步骤：

  1. 单击elements选项卡。
  2. 转到要设置断点的元素。
  3. 右键单击该元素。
  4. 将鼠标悬停在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断点的步骤：

  1. 单击source选项卡。
  2. 展开XHR 断点窗格。 image.png
  3. 单击添加断点。
  4. 输入要中断的字符串。当此字符串出现在XHR请求URL的任何位置时，DevTools 会暂停。
  5. 按Enter确认。

8.事件监听器断点

当我们想调试事件触发后的事件监听器代码时，我们可以使用事件监听器断点，我们可以选择特定的事件，例如鼠标下的click事件，clipboard类别下的剪切、复制、粘贴。

设置事件侦听器断点的步骤：

  1. 单击source选项卡。
  2. 展开Event Listener Breakpoints窗格。DevTools显示事件类别列表，例如Animation、Canvas、Clipboard、Mouse等。

image.png 3. 选中 ☑ 类别以包括该类别下的所有事件，或展开类别并选中 ☑ 特定事件。

9.异常断点

Chrome devtools允许我们在抛出捕获或未捕获的异常时暂停JavaScript代码的执行。当代码没有抛出错误并且无提示却执行失败时，这个技巧非常有用。 设置异常断点的步骤：

  1. 单击source选项卡。

  2. 单击Pause on exceptions图标。启用时变为蓝色。 image.png

  3. 如果您还想在捕获的异常上也暂停执行，请勾选☑ Pause on uncaught exceptions。

image.png

10. Function断点

使用debug(functionName)方法调试函数， 其中functionName是要调试的函数名，当我们需要调试一个具体的函数时，我们可以在代码中插入debug()函数，使用了debug()就和在函数的第一行打了一个行断点是一样的，

function sum(a, b) {
  let result = a + b; // 代码将会在这行暂停执行
  return result;
}
debug(sum); 
sum();

把以上代码复制到devtools控制台执行，将会看到调试效果。

总结

时间和篇幅原因，今天分享js调试技巧的上部分，下次将分享下部分，敬请期待。

avatar
文章
阅读
粉丝