作者：Ashish Lahoti 译者：前端很美 来源：codingnconcepts 接上文 当我们在Chrome DevTool中逐行调试应用程序代码时，调试器有时会跳转到不关注的源文件（例如第三方JS库）,或许你已经体验过再返回到自己的应用程序代码的烦恼。Chrome DevTool提供了对 JavaScript 文件进行屏蔽处理的功能，以便在调试代码时调试器不跳入这些文件并忽略它们。 最终的效果是调试的是应用程序代码而不是第三方库。屏蔽一个JavaScript 文件的步骤： 很多时候，我们会直接在devtools里面直接调试代码，而且，有的时候我们还会重复的调试相同的片段代码，DevTools提供了保存代码片段以供将来使用的功能。 保存代码片段的步骤： 大多数开发人员使用console.log() 在浏览器控制台中调试值。它是调试之王，它可以解决大部分调试问题。你可能不知道的是，console.log() 可以通过提供逗号分隔值来打印多个值，因此您无需自己连接值。每个逗号 “,” 在值之间添加一个空格。 您还可以使用模板在单个字符串中组合多个值，如下所示 不要直接使用 当我们使用console.log() 打印数组（或对象 ） 时，如果之后又更新来这个变量的时候，许多浏览器会向我们显示数组（或对象） 的最新状态，这可能会引起误导。使用 当我们展开变量时，我们可以看到已经记录了grapes，而使用 可以看到， 使用 console.dir() 方法在打印构造函数的内部属性(如原型方法)时比较好用。console.log() 只打印构造函数的名称，而使用console.dir() ，我们可以看到Array函数的所有原型方法。 console.dir() 在打印函数内部属性(如闭包和作用域)时用处很大。下面这个例子我们可以看到 console.log() 在一些浏览器上打印对象时，将得到字符串化的对象，而console.dir()打印出的结果是对象的json格式的树。不过在现代浏览器如chrome上两者都打印出json格式的对象树。 可以看到在chrome devtools，两个方法没有什么区别： 表格化的结果： 我们可以通过使用 我们可以在控制台中使用 我们可以在控制台中通过点击的方式查看源码。 有许多用于JavaScript的第三方单元测试框架。使用比较广泛的是，Mocha、JEST、Jasmine、QUnit 感谢阅读到最后，希望能帮助学会一些有用的js调试技巧。
11.屏蔽脚本文件
当我们黑盒了一个脚本时，会发生什么？
12保存片段代码
13.打印多个值
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(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)
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);
16.打印构造函数的原型方法
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.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.打印对象内部属性
var obj = {a: 1, b: 2};
console.log(obj);
console.dir(obj);
{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
20.打印代码执行消耗的时间
console.time()和console.timeEnd()来打印出代码执行消耗的时间。一些要点：
console.time('Timer1');
console.time('Timer2');
var items = [];
for(var i = 0; i
输出
Timer1: 13.088134765625ms
Timer2: 26.070517578125ms
21打印方法执行的调用栈
console.trace()打印方法执行的调用栈。
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 使用单元测试框架
总结