作為一名前端開發(fā)者，Chrome內(nèi)置的控制臺(tái)是必須了解的，它擁有非常豐富的特性功能，對(duì)我們的開發(fā)幫助灰常大！

[[206342]]

1、元素選擇器($)

如果你接觸過(guò)JQuery，那么對(duì)$()肯定不陌生，這是元素選擇器，用來(lái)選擇HTML元素，但現(xiàn)在，我們要了解的是控制臺(tái)中的$()。

打開百度，按F12打開控制臺(tái)

$() 相當(dāng)于JavaScript中的 document.querySelectorAll()，返回一個(gè)數(shù)組（后者返回的是類數(shù)組對(duì)象）。

注：本身 $() 應(yīng)該是 document.querySelector()，但今天測(cè)試卻是返回一組值，待考究。

就像上圖所示，可以 $()[index] 返回某一個(gè)元素。

其實(shí)還有不少快捷鍵：

$ // 相當(dāng)于 document.querySelector 。

$$ // 相當(dāng)于 document.querySelectorAll 。

$_ // 返回上一個(gè)表達(dá)式的值

$0-$4 // 返回最近5個(gè)Elements面板選中的DOM元素。

dir // console.dir

keys // 取對(duì)象的鍵名, 返回鍵名組成的數(shù)組

values // 去對(duì)象的值, 返回值組成的數(shù)組

方向鍵盤的上下鍵

copy(content) // 將content（也可以說(shuō)是content）復(fù)制到剪貼板

2、console

console相信大家用的最多，這里就不多介紹了，可以看這篇文章：《JavaScript在瀏覽器上的調(diào)試技巧》

3. 讓Chrome變成編輯器

在Chrome中，我們只需一行命令即可讓其變成編輯器：

document.body.contentEditable=true

4. clear()

如果你想清空控制臺(tái)和內(nèi)存，只需這樣：

clear()

接著點(diǎn)回車鍵即可。

下面再介紹一些有趣實(shí)用的功能：

1、截圖

其實(shí)chrome提供了一個(gè)截圖功能，但貌似只能在移動(dòng)模式。

2. 代碼格式化

有些時(shí)候，我們?cè)诳刂婆_(tái)的Sources中查看CSS或JavaScript文件時(shí)，會(huì)看到一堆壓縮的代碼，但只需點(diǎn)擊一下這里：

3. 打開命令菜單

按Cmd + Shift + P（Mac）或Ctrl + Shift + P（Windows，Linux）打開命令菜單。

4、隱藏部分console日志

如果日志太多，我們可以隱藏掉部分 Console 日志（在輸出日志的腳本上單擊右鍵，filter -> hide）

這里還發(fā)現(xiàn)了一個(gè)不錯(cuò)的關(guān)于Chrome開發(fā)工具的文檔：Chrome開發(fā)工具文檔