js调试技巧(二)

前端很美
422 阅读6分钟

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

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

接上文# js的调试技巧(一)

11.屏蔽脚本文件

当我们在Chrome DevTool中逐行调试应用程序代码时，调试器有时会跳转到不关注的源文件（例如第三方JS库）,或许你已经体验过再返回到自己的应用程序代码的烦恼。 Chrome DevTool提供了对 JavaScript 文件进行屏蔽处理的功能，以便在调试代码时调试器不跳入这些文件并忽略它们。

当我们黑盒了一个脚本时，会发生什么？
  • 从库代码抛出的异常不会暂停（如果启用了异常暂停），
  • 绕过库代码，
  • 事件侦听器断点不会在库代码中中断，
  • 调试器不会在库代码中设置的任何断点上暂停。

最终的效果是调试的是应用程序代码而不是第三方库。屏蔽一个JavaScript 文件的步骤：

  1. 单击Main Menu > Settings图标 image.png
  2. 单击Blackboxing菜单项（新版本已经更名为ignore list）。
  3. 单击Add Pattern... 按钮。
  4. 在文本框中输入文件名或模式，然后单击add按钮。
  5. 选中☑ Blackbox content script以启用黑盒。

image.png

12保存片段代码

很多时候，我们会直接在devtools里面直接调试代码，而且，有的时候我们还会重复的调试相同的片段代码，DevTools提供了保存代码片段以供将来使用的功能。

保存代码片段的步骤：

  1. 点击 Sources 选项卡.
  2. 在左侧点击Snippets次选项卡 image.png
  3. 点击New Snippet来新建保存代码的文件。 我们可以使用该功能来保存自己经常调试的代码片段。

13.打印多个值

大多数开发人员使用console.log() 在浏览器控制台中调试值。它是调试之王，它可以解决大部分调试问题。你可能不知道的是，console.log() 可以通过提供逗号分隔值来打印多个值，因此您无需自己连接值。每个逗号 “,” 在值之间添加一个空格。

let x = 1;
console.log('x =', x);

let y = "hello";
let fruits = ['apple', 'banana', 'mango'];
var obj = {a: 1, b: 2};

console.log('x =', x, 'y =', y, 'fruits =', fruits, 'obj =', obj);

输出

x = 1
x = 1 y = hello fruits = (3) ["apple", "banana", "mango"] obj = {a: 1, b: 2}

您还可以使用模板在单个字符串中组合多个值，如下所示

console.log(`x = ${x}, y = ${y}, fruits = ${fruits}, obj = ${obj}`);

14.不要直接打印对象类型的数据

不要直接使用console.log(obj)，而是要使用console.log(JSON.parse(JSON.stringify(obj)))作为更好的替代方法。

当我们使用console.log() 打印数组（或对象 ） 时，如果之后又更新来这个变量的时候，许多浏览器会向我们显示数组（或对象） 的最新状态，这可能会引起误导。 使用console.log(JSON.parse(JSON.stringify(obj)))确保我们正在打印数组（或对象） 的副本，而这个副本记录的打印时那一刻的状态。 下面这个例子，有助于我们理解：

let fruits =  ['apple', 'banana', 'mango'];

console.log(fruits);
console.log(JSON.parse(JSON.stringify(fruits))); //制造一个副本

fruits.push('grapes');

输出

▼ (3) ["apple", "banana", "mango"]
   0: "apple"
   1: "banana"
   2: "mango"
   3: "grapes"
   length: 4
 ➤ __proto__: Array(0)


▼ (3) ["apple", "banana", "mango"]
   0: "apple"
   1: "banana"
   2: "mango"
   length: 3
 ➤ __proto__: Array(0)

当我们展开变量时，我们可以看到已经记录了grapes，而使用console.log(JSON.parse(JSON.stringify(obj)))却是正确的初始的状态。
再来看看对象的例子：

let person =  { name: 'adam', age: 21, gender: 'male' };

console.log(person);
console.log(JSON.parse(JSON.stringify(person))); //makes a copy of it

person.married = 'NO';

输出

▼ {name: "adam", age: 21, gender: "male"}
   age: 21
   gender: "male"
   married: "NO"
   name: "adam"
 ➤ __proto__: Object

▼ {name: "adam", age: 21, gender: "male"}
   age: 21
   gender: "male"
   name: "adam"
 ➤ __proto__: Object

可以看到，console.log()打印的是最新的状态，而不是初始的状态。

15.以json格式打印dom元素

使用console.log()打印dom元素，得到的结果是html元素树，而使用console.dir()得到的是json化的树结构

console.log(document.body);
console.dir(document.body);

image.png

16.打印构造函数的原型方法

console.dir() 方法在打印构造函数的内部属性(如原型方法)时比较好用。 console.log() 只打印构造函数的名称，而使用console.dir() ，我们可以看到Array函数的所有原型方法。

console.log(Array);
console.dir(Array);

Output

ƒ Array() { [native code] }

▼ ƒ Array()
      arguments: (...)
      caller: (...)
      length: 1
      name: "Array"
    ▼ prototype: ƒ ()
          length: 0
        ➤ constructor: ƒ Array()
        ➤ concat: ƒ concat()
        ➤ find: ƒ find()
        ➤ findIndex: ƒ findIndex()
        ➤ lastIndexOf: ƒ lastIndexOf()
        ➤ pop: ƒ pop()
        ➤ push: ƒ push()
        ➤ reverse: ƒ reverse()
        ➤ slice: ƒ slice()
        ➤ sort: ƒ sort()
        ➤ splice: ƒ splice()
        ➤ includes: ƒ includes()
        ➤ indexOf: ƒ indexOf()
        ➤ join: ƒ join()
        ➤ toString: ƒ toString()
        ...

17.打印闭包函数

console.dir() 在打印函数内部属性(如闭包和作用域)时用处很大。 下面这个例子我们可以看到console.log()仅仅打印函数的签名， 而console.dir却会打印出来原型方法、作用域、以及最重要的该函数的闭包。

var outerFunc  = function(c){ 
  var a = 1;
  var innerFunc = function(d) {
    var b = 2;
      var innerMostFunc = function(e) {
    return a + b + c + d + e;
    }
    return innerMostFunc;
  }
  return innerFunc;
}

// 打印 innerMostFunc
console.log(outerFunc(3)(4)); 
console.dir(outerFunc(3)(4));

输出

ƒ (e) {
    return a + b + c + d + e;
    }

▼ ƒ innerMostFunc(c)
    length: 1
    name: "innerMostFunc"
    arguments: null
    caller: null
  ➤ prototype: {constructor: ƒ}
  ➤ __proto__: ƒ ()
    [[FunctionLocation]]:
  ▼ [[Scopes]]: Scopes[3]
    ➤ 0: Closure (innerFunc) {d: 4, b: 2}
    ➤ 1: Closure (outerFunc) {c: 3, a: 1}
    ➤ 2: Global {parent: Window, opener: null, top: Window, length: 1, frames: Window, …}

18.打印对象内部属性

console.log() 在一些浏览器上打印对象时，将得到字符串化的对象，而console.dir()打印出的结果是对象的json格式的树。不过在现代浏览器如chrome上两者都打印出json格式的对象树。

var obj = {a: 1, b: 2};

console.log(obj);
console.dir(obj);

可以看到在chrome devtools，两个方法没有什么区别：

▼ {a: 1, b: 2}
  a: 1
  b: 2
➤ __proto__: Object

▼ Object
  a: 1
  b: 2
➤ __proto__: Object

19.以表格的方式打印对象

console.table()方法使得我们在打印大数据集的时候能够以表格的方式方便查看结果。通过该方法，我们还可以只查看对象的部分数据。
通过下面这个例子，我们来看看以表格的方式打印大的json数据集：

var personDetails = [
  {
    "_id": "5edbbb78633118f455e877fb",
    "index": 0,
    "guid": "30dd1d2c-5083-4165-8580-5ae734cd0d12",
    "isActive": true,
    "balance": "$1,778.03",
    "picture": "http://placehold.it/32x32",
    "age": 26,
    "eyeColor": "blue",
    "name": {
      "first": "Anderson",
      "last": "Sargent"
    },
    "company": "MAZUDA",
    "email": "anderson.sargent@mazuda.com",
    "phone": "+1 (839) 437-3851",
    "address": "235 Ashland Place, Chautauqua, Minnesota, 3487",
    "about": "Pariatur nisi cillum culpa aliquip mollit veniam. Laboris in minim non dolor ut deserunt ex sit occaecat irure consequat pariatur esse. Cillum velit dolore enim non enim ipsum aliqua veniam fugiat adipisicing magna mollit occaecat.",
    "registered": "Saturday, April 8, 2017 3:02 AM",
    "latitude": "26.03084",
    "longitude": "-74.869342",
    "tags": [
      "labore",
      "nulla",
      "ea",
      "qui",
      "sunt"
    ],
    "range": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    "friends": [
      {
        "id": 0,
        "name": "Coleman Nunez"
      },
      {
        "id": 1,
        "name": "Foley Curry"
      },
      {
        "id": 2,
        "name": "Kara Glass"
      }
    ],
    "greeting": "Hello, Anderson! You have 5 unread messages.",
    "favoriteFruit": "apple"
  }
]

console.table(personDetails);
console.table(personDetails, ["age", "eyeColor"]);  // print few fields

表格化的结果： image.png

20.打印代码执行消耗的时间

我们可以通过使用console.time()和console.timeEnd()来打印出代码执行消耗的时间。一些要点：

  • console.time()  and console.timeEnd()  要有相同的标签。
  • 我们可以通过设置多个标签来设置多个计时器
  • console.time()  和 console.timeEnd() 是Console API 之一 (就像console.log())
console.time('Timer1');
console.time('Timer2');

var items = [];

for(var i = 0; i < 100000; i++){
   items.push({index: i});
}

console.timeEnd('Timer1');

for(var j = 0; j < 100000; j++){
   items.push({index: j});
}
 
console.timeEnd('Timer2');

输出

Timer1: 13.088134765625ms
Timer2: 26.070517578125ms

21打印方法执行的调用栈

我们可以在控制台中使用console.trace()打印方法执行的调用栈。

  • console.trace() 与 Chrome DevTools 的片段功能兼容。
  • console.trace() 是 Console API 的一部分（就像 console.log()）
    const first = () => { second(); };
    const second = () => { third(); };
    const third = () => { fourth(); };
    const fourth = () => { console.trace("The trace"); };
    first();

我们可以在控制台中通过点击的方式查看源码。

VM56755:4 The trace
fourth @ VM56755:4
third @ VM56755:3
second @ VM56755:2
first @ VM56755:1
(anonymous) @ VM56755:5

22 使用单元测试框架

有许多用于JavaScript的第三方单元测试框架。使用比较广泛的是，Mocha、JEST、Jasmine、QUnit

总结

感谢阅读到最后，希望能帮助学会一些有用的js调试技巧。

avatar
文章
阅读
粉丝