Chrome inspect 小技巧笔记

debugger

if (xxx) {
    debugger;
}

可以在 xxx 情况下 Chrome 会自动在这里断点，方便调试一些诡异环境。

以 table 格式显示 Object

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

效果很好看，自己调试器试试就知道了

快速计算程序时间

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

打点算时间用的，写起来比较简单

获取函数调用栈

function xxx() {
    console.trace('trace car')
}

高亮log

console.log(' %c %s %s %s', 'color: yellow; background-color: black;', '–', 'lalalalala', '–');
console.log(' %c %s %s %s', 'color: brown; font-weight: bold; text-decoration: underline;', '–', 'yoyoyoyoyo', '–');

---

参考文章

• The 14 JavaScript debugging tips you probably didn't know