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

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

使用Request blocking 阻塞請求：

使用這個功能可以攔截請求；

比較常用的場景是，頁面執行完某操作后頁面就進行重定向跳轉了，這時如果想調試重定向前發的請求做了啥，就可以使用此功能進行阻塞攔截

debugger:代碼手動編程設置斷點調試；

Coverage 代碼覆蓋率檢測：可以觀察到代碼覆蓋率，哪些是沒用的，去除無用代碼，較少代碼體積

Changes 變化:顯示更改代碼的比較，可以通過這個工具觀察你用控制臺修改過的代碼，類似于git 的 diff 功能類似，紅色代表刪除、綠色代碼新增;

Snippets:在 console 里可以臨時運行代碼，但是書寫格式不太友好，而且一換行就執行了（雖然可以 shift+enter 換行），不想打開代碼編輯器怎么辦，可以使用 Snippets 這個工具創建js腳本，并可以訪問和從任何頁面的Chrome DevTools面板中執行（除非你刪除）。

$_:返回最近一次計算的表達式的值；

$(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，開發調試必使用的一大命令console，看看都有些啥？

console.log 用于輸出普通信息

console.info 用于輸出提示性信息

console.error用于輸出錯誤信息

console.warn用于輸出警示信息

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;")
    }
})

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

計算某段程序運行時間：

console.time("time") 計時開始

console.timeEnd("time") 計時結束

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

console.profile("profile") 監聽開始

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構建代碼質量壓縮作