你可能不知道的devtools调试技巧

编辑模式

打开控制台，输入如下代码，回车.你会发现，此时整个页面都是可编辑状态，想干什么随你！

---

document.body.contentEditable=true

---

页面可编辑示意图

清除控制台

clear()

clear

结构化输出

补充一点，console.table能够传第二个参数，要显示的序列 console.table(users，["name"])

var users=[
    {id:1,name:"react"},
    {id:2,name:"vue"},
    {id:3,name:"angular"}
]

---

console.log输出效果图

---

console.table输出效果图

---

console.table序列过滤

运行时间测试

var i;
console.time("for 循环测试");
for (i = 0; i < 100000; i++) {
  // 代码部分
}
console.timeEnd("for 循环测试");

i = 0;
console.time("while 循环测试");
while (i < 1000000) {
  i++
}
console.timeEnd("while 循环测试");

---

耗时比对

分组打印

console.group('云梦江氏');
    console.log('魏无羡');
    console.log('江厌离');
    console.log('江澄');
console.groupEnd();

console.group('义城三人组');
    console.log('晓星尘');
    console.log('宋岚');
    console.log('薛洋');
console.groupEnd();

---

分组打印效果图

美化打印

function beautyLog(info) {
    console.log(`%c${info}`, `color:${_hexColor()}`)
    function _hexColor() {

        let str = '#';
        let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
        for (let i = 0; i < 6; i++) {
            let index = Number.parseInt(Math.random() * 16);
            str += arr[index]
        }
        return str;
    }
}

beautyLog('hello');
beautyLog('hello');
beautyLog('hello');
beautyLog('hello');
beautyLog('hello');
beautyLog('hello');
beautyLog('hello');

---

美化打印效果图

主题切换

打开控制台，ctrl+shift+p 调出命令面板，输入theme 在暗黑和明亮两个主题之间进行切换

主题切换 黑色主题

格式化打印

var name="冷月心";
var age=18;
var like="coding"
console.log(name,age,like) //冷月心 18 coding

// 加一个大括号试试
console.log({name,age,like}) 

---

格式化打印