码云前端开发 2020-01-08

前端开发必会的14个JavaScript调试技巧

文章目录隐藏

1. debugger;
2. 用表格显示对象
3. 使用不同屏幕尺寸
4. 如何快速找到 DOM 元素
5. 使用 console.time() 和 console.timeEnd() 测试循环
6. 获取函数的堆栈跟踪信息
7. 将代码格式化后再调试 JavaScript
8. 快速查找要调试的函数
9. 屏蔽不相关代码
10.在复杂的调试过程中寻找重点
11.观察特定函数的调用及参数
12. 在控制台中快速访问元素
13. Postman 很棒（但 Firefox 更快）
14.中断节点更改

前端开发中掌握 JavaScript 调试技巧，可以让我们能用很少的时间来解决错误和 bug，达到事半功倍的效果。下面将为大家总结日常经常用到的 JavaScript 调试技巧，大多数技巧都适用于 Chrome 控制台和 Firefox, 尽管还有很多其他的调试工具，但大部分也适用。

1. debugger;

除了 console.log, debugger 是我们最喜欢、快速且肮脏的调试工具。执行代码后，Chrome 会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。

if (thisThing) {
    debugger;
}

2. 用表格显示对象

有时，有一组复杂的对象要查看。可以通过 console.log 查看并滚动浏览，亦或者使用 console.table 展开，更容易看到正在处理的内容！

var animals = [
    { animal: 'Horse', name: 'Henry', age: 43 },
    { animal: 'Dog', name: 'Fred', age: 13 },
    { animal: 'Cat', name: 'Frodo', age: 18 }
];

console.table(animals);

如下图展示：

3. 使用不同屏幕尺寸

有时我们前端开发人员需要对自己的项目进行不同设备适配，如果在桌面上安装不同移动设备模拟器看似不错，但现实却很令人失望。那么，如何调整窗口大小呢？Chrome 提供了所需的一切。F12 到控制台并点击‘切换设备模式’按钮。观察窗口变化即可!

4. 如何快速找到 DOM 元素

在 Elements 面板中标记一个 DOM 元素，并在控制台中使用它。Chrome 控制台会保留选择历史的最后五个元素，最终选择的首个元素被标记为$0，第二个选择的元素为$1，依此类推。

如果您按照“item-4”，“item-3”，“item-2”，“item-1”，“item-0”的顺序选择以下标签，则可以在控制台中访问 DOM 节点：

5. 使用 console.time() 和 console.timeEnd() 测试循环

要得知某些代码的执行时间，特别是调试缓慢循环时，非常有用。甚至可以通过给方法传入不同参数，来设置多个定时器。来看看它是怎么运行的：

console.time('Timer1');var items = [];for(var i = 0; i < 100000; i++){
   items.push({index: i});
}console.timeEnd('Timer1');

如图所示：

6. 获取函数的堆栈跟踪信息

使用 JavaScript 框架，会引入大量代码。

创建视图并触发事件，最后你想了解函数调用的过程。

由于 JavaScript 不是一个很结构化的语言,有时候很难知道什么时候发生了什么。使用 console.trace(仅仅只是在控制台中跟踪)可以方便地调试 JavaScript.

想象一下，要查看第 24 行 car 实例调用函数 funcZ 的整个堆栈跟踪信息：

var func2 = function() {
  func4();
}
var func3 = function() {
}

var func4 = function() {
  car = new Car();
  car.funcX();
}
var Car = function() {
  this.brand = ‘volvo’;
  this.color = ‘red’;
  this.funcX = function() {
    this.funcY();
  }

  this.funcY = function() {
    this.funcZ();
  }

  this.funcZ = function() {
    console.trace(‘trace car’)
  }
}
func1();

24 行将输出：

可以看到 func1 调用 func2，func2 调用 func4。Func4 创建了一个 Car 的实例，然后调用函数 car.funcX，依此类推。

即使你认为自己的代码写的非常好，这依然很有用。假如你想改进自己的代码。获取跟踪信息和所有涉及的函数，每一项都可以点击，可以在他们之间来回切换。就像是给你提供了一个调用堆栈的选择列表。

7. 将代码格式化后再调试 JavaScript

有时代码会在生产环境出问题，但是你的 source maps 没有部署在生产环境上。不要怕。Chrome 可以将您的 JavaScript 文件格式化。格式化后的代码虽然不像真实代码那样有用，但至少可以看到发生了什么。点击 Chrome 控制台中的源代码查看器中的{}按钮即可。

8. 快速查找要调试的函数

假设你要在函数中打断点，最常用的两种方式是：

在控制台查找行并添加断点
在代码中添加 debugger

在这两个解决方案中，您必须在文件中单击以调试特定行。

使用控制台打断点可能不太常见。在控制台中使用 debug(funcName)，当到达传入的函数时，代码将停止。

这个调试方法很快,但缺点是不适用于私有或匿名函数。但除了私有和匿名函数,这可能是找到调试函数的最快方法。（注意：这个函数和 console.debug 函数不是同一个东西。）

var func1 = function() {
  func2();
};

var Car = function() {
  this.funcX = function() {
    this.funcY();
  }

  this.funcY = function() {
    this.funcZ();
  }
}

var car = new Car();

在控制台中输入 debug(car.funcY)，当调用 car.funcY 时，将以调试模式停止：

9. 屏蔽不相关代码

现在，我们经常在应用中引入几个库或框架。其中大多数都经过良好的测试且相对没有缺陷。但是，调试器仍然会进入与调试任务无关的文件。解决方案是屏蔽不需要调试的脚本。当然可以包括你自己的脚本。

10.在复杂的调试过程中寻找重点

在更复杂的调试中，我们有时希望输出很多行。可以做的就是保持良好输出结构，使用更多控制台函数，例如,console.log,console.debug,console.warn,console.info,console.error 等等。然后，可以在控制台中快速浏览。但有时候，某些 JavaScrip 调试信息并不是你需要的。现在，可以自己美化调试信息了。在调试 JavaScript 时，可以使用 CSS 并自定义控制台信息：

console.todo = function(msg) {
  console.log(
  ‘%c %s %s %s‘,‘color:yellow; background-color:black;’,‘–‘,msg,‘–‘
  );
}

console.important = function(msg) {
  console.log(
  ‘ %c %s %s %s’,‘color:brown;font-weight:bold;text-decoration:underline;’,‘–‘,msg,‘–‘
  );
}

console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

输出：

例如：

在 console.log()中，可以用%s 设置字符串，%i 设置数字，%c 设置自定义样式等等，还有很多更好的 console.log()使用方法。如果使用的是单页应用框架，可以为视图（view）消息创建一个样式，为模型（models），集合（collections），控制器（controllers）等创建另一个样式。也许还可以像 wlog，clog 和 mlog 一样发挥想象力！