作為一名前端開發者，Chrome內置的控制臺是必須了解的，它擁有非常豐富的特性功能，對我們的開發幫助灰常大！

[[206342]]

1、元素選擇器($)

如果你接觸過JQuery，那么對$()肯定不陌生，這是元素選擇器，用來選擇HTML元素，但現在，我們要了解的是控制臺中的$()。

打開百度，按F12打開控制臺

$() 相當于JavaScript中的 document.querySelectorAll()，返回一個數組（后者返回的是類數組對象）。

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

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

其實還有不少快捷鍵：

$ // 相當于 document.querySelector 。

$$ // 相當于 document.querySelectorAll 。

$_ // 返回上一個表達式的值

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

dir // console.dir

keys // 取對象的鍵名, 返回鍵名組成的數組

values // 去對象的值, 返回值組成的數組

方向鍵盤的上下鍵

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

2、console

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

3. 讓Chrome變成編輯器

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

document.body.contentEditable=true

4. clear()

如果你想清空控制臺和內存，只需這樣：

clear()

接著點回車鍵即可。

下面再介紹一些有趣實用的功能：

1、截圖

其實chrome提供了一個截圖功能，但貌似只能在移動模式。

2. 代碼格式化

有些時候，我們在控制臺的Sources中查看CSS或JavaScript文件時，會看到一堆壓縮的代碼，但只需點擊一下這里：

3. 打開命令菜單

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

4、隱藏部分console日志

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

這里還發現了一個不錯的關于Chrome開發工具的文檔：Chrome開發工具文檔