js 调试技巧-CSDN博客

本文链接：https://blog.csdn.net/qq_35516360/article/details/122066740

大多数技巧都适用于 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 提供了所需的一切。跳到控制台并点击 ‘切换设备模式’ 按钮。观察窗口变化即可!

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('start1');
      var items = [];
      for (var i = 0; i < 1000; i++) {
        items.push({index: i});
      }
      console.timeEnd('start1');
      console.time('start2');
      var items = [];
      for (var i = 0; i < 10000; i++) {
        items.push({index: i});
      }
      console.timeEnd('start2');
      console.time('start3');
      var items = [];
      for (var i = 0; i < 100000; i++) {
        items.push({index: i});
      }
      console.timeEnd('start3');