浏览器调试 技巧

 

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’))