Chrome 控制檯經常使用調試技巧詳解

一、Chrome控制檯小技巧

• 打開和關閉抽屜式選項卡：按Esc鍵可打開和關閉 DevTools 的 Drawer（抽屜式選項卡）

  1. 在Drawer（抽屜式選項卡）中，你能夠在 Console 控制檯中執行命令，查看動畫檢查器(Animations)，配置網絡條件(network conditions)和渲染(rendering)設置，搜索(search)字符串和文件等

• 使用Request blocking 阻塞請求：

  1. 使用這個功能能夠攔截請求；
  2. 比較經常使用的場景是，頁面執行完某操做後頁面就進行重定向跳轉了，這時若是想調試重定向前發的請求作了啥，就可使用此功能進行阻塞攔截

• debugger:代碼手動編程設置斷點調試；
• Coverage 代碼覆蓋率檢測：能夠觀察到代碼覆蓋率，哪些是沒用的，去除無用代碼，較少代碼體積
• Changes 變化:顯示更改代碼的比較，能夠經過這個工具觀察你用控制檯修改過的代碼，相似於git 的 diff 功能相似，紅色表明刪除、綠色代碼新增;
• Snippets:在 console 裏能夠臨時運行代碼，可是書寫格式不太友好，並且一換行就執行了（雖然能夠 shift+enter 換行），不想打開代碼編輯器怎麼辦，可使用 Snippets 這個工具建立js腳本，並能夠訪問和從任何頁面的Chrome DevTools面板中執行（除非你刪除）。

---

二、console控制檯命令

• $_:返回最近一次計算的表達式的值；
• $(selector):返回匹配指定CSS選擇器的第一個DOM元素的引用,實際是document.querySelector()函數的別名；
• $$(selector):$\$(selector)返回一個與給定CSS選擇器匹配的元素數組,等效於調用document.querySelectorAll();
• $x(path):返回一個與給定XPath表達式匹配的DOM元素的數組;
• clear(): 清除控制檯中全部歷史記錄;
• copy(object):將指定對象的字符串表示複製到剪貼板;
• debug(function):當調用指定的函數時，調試器被調用並在Sources(源文件)面板上的函數內部斷點暫停;
• dir(object):Console API的console.dir()方法的別名。
• getEventListeners(object)返回在指定對象上註冊事件的監聽器
• keys(object) 返回一個數組，該數組包含屬於指定對象的屬性名;
• values(object):回一個數組，該數組包含屬於指定對象的屬性值;
• document.body.contentEditable=true:將瀏覽器變成編輯器
• monitorEvents(document.body, "click"):第一個參數是要監聽的對象。若是未提供第二個參數，全部事件都會返回。要指定要監聽的事件，傳遞一個字符串或字符串數組做爲第二個參數;
• unmonitorEvents(document.body):中止監聽body對象上的事件;

---

三、console API詳解

• 有開發就有console，開發調試必使用的一大命令console，看看都有些啥？

（1）輸出信息基本方法：

1. console.log 用於輸出普通訊息
2. console.info 用於輸出提示性信息
3. console.error用於輸出錯誤信息
4. console.warn用於輸出警示信息
5. console.group&&console.groupEnd分組輸出，console.groupCollapsed建立新分組

console.group('warn警告信息')
    console.warn('warn1')
    console.warn('warn2')
    console.warn('warn3')
console.groupEnd()
console.group('info信息')
    console.warn('info')
    console.warn('info1')
console.groupEnd()
console.group('log信息')
    console.warn('log1')
    console.warn('log2')
console.groupEnd()
console.group('error信息')
    console.warn('error1')
    console.warn('error2')
console.groupEnd()

• 給console輸出添加樣式(經過背景屬性圖片也能夠輸出哦)

['log','info','warn','error'].forEach(item => {
    let $print = console[item];
    console[item] = function() {
        $print.call(console, '%c'+Array.prototype.slice.apply(arguments).join(' '), 'font-size: 16px;padding:10px;font-weight: bold;text-decoration: underline;')
    }
})

---

（2）複雜類型輸出：

• console.dir | console.dirxml:替代for in詳細的輸出對象信息，常常遇到的坑點是，使用console.log想打印出對象信息,發現只有[object Object],如今可使用dir;dirxml若是能夠會使用xml形式打印。

let obj = {
    test_1: 'ffff',
    test_2: '這是test',
    fn: () => {
        console.log('fn')
    },
    arr_1: [1,{a: 'arr_obj'}, 'string']
}
console.group('log打印對象')
    console.log(obj)
console.groupEnd()
console.group('dir打印對象')
    console.dirxml(obj)
console.groupEnd()
console.group('dirxml打印對象')
    console.dirxml(obj)
console.groupEnd()
console.group('log打印數組')
    console.log(obj.arr_1)
console.groupEnd()
console.group('dir打印數組')
    console.dirxml(obj.arr_1)
console.groupEnd()
console.group('dirxml打印數組')
    console.dirxml(obj.arr_1)
console.groupEnd()

• 有時候對象或者數組數據過多，要是能表格形式直觀展現就perfect，console.table知足你

let obj = {
    test_1: 'ffff',
    test_2: '這是test',
    fn: () => {
        console.log('fn')
    },
    arr_1: [1,{a: 'arr_obj'}, 'string']
}
console.group('table打印')
    console.table(obj)
console.groupEnd()

---

（3）其餘調試輸出：

• 計算某段程序運行時間：

  1. console.time('time') 計時開始
  2. console.timeEnd('time') 計時結束

• 計算某段程序運行時CPU使用相關信息（統計結束後信息記錄在JavaScript Profiler面板）：

  1. console.profile('profile') 監聽開始
  2. console.profileEnd('profile') 監聽結束
• 條件輸出（斷言輸出，若是計算表達式返回false時,向控制檯寫入一個error）：

console.assert(false, '爲false時才輸出')
console.assert(true, '爲true時不輸出')

• console.count('fn執行次數：')統計代碼執行次數的必備；
• console.timeLine、console.timeLineEnd記錄一段時間軸
• console.clear():清空控制檯
• console.debug():使用方式和console.log同樣
• console.timeStamp():在記錄會話期間向Timeline(時間軸)面板添加一個事件
• console.trace(‘test’, obj):在調用該方法的地方打印堆棧跟蹤。

「積跬步、行千里」—— 愈來愈懶的本身，回來吧！態懶可不太好。喜歡的話留下個贊和關注哦！

• 往期經典好文：

  • 你不知道的CORS跨域資源共享
  • 性能優化篇---Webpack構建速度優化
  • 性能優化篇---Webpack構建代碼質量壓縮做