打開(kāi)和關(guān)閉抽屜式選項(xiàng)卡：按Esc鍵可打開(kāi)和關(guān)閉 DevTools 的 Drawer（抽屜式選項(xiàng)卡）

在Drawer（抽屜式選項(xiàng)卡）中，你可以在 Console 控制臺(tái)中執(zhí)行命令，查看動(dòng)畫檢查器(Animations)，配置網(wǎng)絡(luò)條件(network conditions)和渲染(rendering)設(shè)置，搜索(search)字符串和文件等

使用Request blocking 阻塞請(qǐng)求：

使用這個(gè)功能可以攔截請(qǐng)求；

比較常用的場(chǎng)景是，頁(yè)面執(zhí)行完某操作后頁(yè)面就進(jìn)行重定向跳轉(zhuǎn)了，這時(shí)如果想調(diào)試重定向前發(fā)的請(qǐng)求做了啥，就可以使用此功能進(jìn)行阻塞攔截

debugger:代碼手動(dòng)編程設(shè)置斷點(diǎn)調(diào)試；

Coverage 代碼覆蓋率檢測(cè)：可以觀察到代碼覆蓋率，哪些是沒(méi)用的，去除無(wú)用代碼，較少代碼體積

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

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

$_:返回最近一次計(jì)算的表達(dá)式的值；

$(selector):返回匹配指定CSS選擇器的第一個(gè)DOM元素的引用,實(shí)際是document.querySelector()函數(shù)的別名；

$$(selector):$$(selector)返回一個(gè)與給定CSS選擇器匹配的元素?cái)?shù)組,等效于調(diào)用document.querySelectorAll();

$x(path):返回一個(gè)與給定XPath表達(dá)式匹配的DOM元素的數(shù)組;

clear(): 清除控制臺(tái)中所有歷史記錄;

copy(object):將指定對(duì)象的字符串表示復(fù)制到剪貼板;

debug(function):當(dāng)調(diào)用指定的函數(shù)時(shí)，調(diào)試器被調(diào)用并在Sources(源文件)面板上的函數(shù)內(nèi)部斷點(diǎn)暫停;

dir(object):Console API的console.dir()方法的別名。

getEventListeners(object)返回在指定對(duì)象上注冊(cè)事件的監(jiān)聽(tīng)器

keys(object) 返回一個(gè)數(shù)組，該數(shù)組包含屬于指定對(duì)象的屬性名;

values(object):回一個(gè)數(shù)組，該數(shù)組包含屬于指定對(duì)象的屬性值;

document.body.contentEditable=true:將瀏覽器變成編輯器

monitorEvents(document.body, "click"):第一個(gè)參數(shù)是要監(jiān)聽(tīng)的對(duì)象。如果未提供第二個(gè)參數(shù)，所有事件都會(huì)返回。要指定要監(jiān)聽(tīng)的事件，傳遞一個(gè)字符串或字符串?dāng)?shù)組作為第二個(gè)參數(shù);

unmonitorEvents(document.body):停止監(jiān)聽(tīng)body對(duì)象上的事件;

有開(kāi)發(fā)就有console，開(kāi)發(fā)調(diào)試必使用的一大命令console，看看都有些啥？

console.log 用于輸出普通信息

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

console.error用于輸出錯(cuò)誤信息

console.warn用于輸出警示信息

console.group&&console.groupEnd分組輸出，console.groupCollapsed創(chuàng)建新分組

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輸出添加樣式(通過(guò)背景屬性圖片也可以輸出哦)

["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詳細(xì)的輸出對(duì)象信息，經(jīng)常遇到的坑點(diǎn)是，使用console.log想打印出對(duì)象信息,發(fā)現(xiàn)只有[object Object],現(xiàn)在可以使用dir;dirxml如果可以會(huì)使用xml形式打印。

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

有時(shí)候?qū)ο蠡蛘邤?shù)組數(shù)據(jù)過(guò)多，要是能表格形式直觀展示就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()

計(jì)算某段程序運(yùn)行時(shí)間：

console.time("time") 計(jì)時(shí)開(kāi)始

console.timeEnd("time") 計(jì)時(shí)結(jié)束

計(jì)算某段程序運(yùn)行時(shí)CPU使用相關(guān)信息（統(tǒng)計(jì)結(jié)束后信息記錄在JavaScript Profiler面板）：

console.profile("profile") 監(jiān)聽(tīng)開(kāi)始

console.profileEnd("profile") 監(jiān)聽(tīng)結(jié)束

條件輸出（斷言輸出，如果計(jì)算表達(dá)式返回false時(shí),向控制臺(tái)寫入一個(gè)error）：

console.assert(false, "為false時(shí)才輸出")
console.assert(true, "為true時(shí)不輸出")

console.count("fn執(zhí)行次數(shù)：")統(tǒng)計(jì)代碼執(zhí)行次數(shù)的必備；

console.timeLine、console.timeLineEnd記錄一段時(shí)間軸

console.clear():清空控制臺(tái)

console.debug():使用方式和console.log一樣

console.timeStamp():在記錄會(huì)話期間向Timeline(時(shí)間軸)面板添加一個(gè)事件

console.trace(‘test’, obj):在調(diào)用該方法的地方打印堆棧跟蹤。

“積跬步、行千里”—— 越來(lái)越懶的自己，回來(lái)吧！態(tài)懶可不太好。喜歡的話留下個(gè)贊和關(guān)注哦！

往期經(jīng)典好文：

你不知道的CORS跨域資源共享

性能優(yōu)化篇---Webpack構(gòu)建速度優(yōu)化

性能優(yōu)化篇---Webpack構(gòu)建代碼質(zhì)量壓縮作