你可能不知道的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}) 

---

格式化打印