浏览器调试 技巧
1.格式化JSON代码
我们可能在处理一些JSON相关的处理时很多时候都会使用到JSON.stringify
,但是你是否意识到它可以帮助缩进JSON呢?
stringify()
方法接受两个可选参数:一个replacer
函数和一个space
值,replacer
函数可以用来过滤显示的JSON。
space
值接受一个整数,表示需要的空格数或一个字符串(如'\t'
来插入制表符),它可以使读取获取的JSON数据变得容易得多。
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t')); // Result: // '{ // "alpha": A, // "beta": B // }'
2.拼接
console.log("I like %s but I do not like %s.", "Skittles", "pus"); // 常见的占位符 %o (这是字母 o,不是 0),它接受对象,%s 接受字符串,%d 表示小数或整数。 // I like Skittles but I do not like pus.
3.颜色高亮
console.warn()
console.warn()
4.一目了然 console.table
const data = [ { id: "7cb1-e041b126-f3b8", seller: "WAL0412", buyer: "WAL3023", price: 203450, time: 1539688433 }, { id: "1d4c-31f8f14b-1571", seller: "WAL0452", buyer: "WAL3023", price: 348299, time: 1539688433 }, { id: "b12c-b3adf58f-809f", seller: "WAL0012", buyer: "WAL2025", price: 59240, time: 1539688433 } ]; console.table(data); console.table(data, ["id", "price"]);
5.计数 console.count()
for (let i = 0; i < 10000; i++) { if (i % 2) { console.count("odds"); } if (!(i % 5)) { console.count("multiplesOfFive"); } if (isPrime(i)) { console.count("prime"); } } // odds: 1 // odds: 2 // prime: 1 // odds: 3 // multiplesOfFive: 1 // prime: 2 // odds: 4 // prime: 3 // odds: 5 // multiplesOfFive: 2 // ...
6.计算时间
const slowFunction = number => { console.log(number); }; console.time(); for (i = 0; i < 10; ++i) { slowFunction(i); } console.timeEnd();
7. 非码农的彩蛋
document.body.contentEditable = true;
将浏览器转换为编辑器
8.查找与 DOM 中的元素关联的事件
getEventListeners($(‘input’))
monitorEvents($(‘selector’))