1. $0

在Chrome的Elements面板中，$0關聯到當前我們選中的html節點。

理所當然，$1 是我們上一次選擇的節點，$2是在那之前選擇的節點，等等。一直到 $4

你可以用以上的補充參考來嘗試一些相關的操作(例子: $1.appendChild($0))

2. $ 和 $$

在你還沒有在app中定義 $變量的情況下(例如 jQuery)，$在console中是冗長的函數document.querySelector的一個別名。

但是$$ 能節省更多的時間，因為它不僅僅執行document.QuerySelectorAll並且返回的是一個節點的數組，而不是一個Node list

從本質上說:Array.from(document.querySelectorAll('div')) === $$('div'),但是$$('div')要簡短太多了！

3. $_

$_變量是關聯上次執行的結果。

4. $i

在Chrome插件:Console Importer的幫助之下，你可以快速的在console中引入和把玩一些npm庫。

直接運行例如 $i('lodash') 或者 $i('moment') 然後在幾秒鐘之後，你就可以獲取到lodash / momentjs了。

5. copy(...)

You can copy anything available in the console into your OS clipboard using the global copy function available in the Console. This includes variables that we’re discussed in the previous tips, e.g. copy(_$) or copy($0)

你可以通過全局的方法copy()在console裡copy任何你能拿到的資源，包括我們在上一篇中提及的那些變量。例如 copy(\_$) or copy($0)

6. Store as global

如果你在console中打印了一坨數據(例如 你在app中計算出來的一個數組),然後你想對這些數據做一些額外的工作， 例如使用我們剛剛提到的copy，你可以很容易的將它變成一個全局變量

只需要右擊它，並且選擇“Store as global variable” (保存為全局變量)這個選項.

第一次使用的話，它會創建一個名為 temp1 的變量，然後是 temp2 等等.所以你可以操作各樣的數據而不用擔心會複寫(譯註:修改他們原有的值)他們

7. 保存(Stack trace)堆棧跟蹤

對你來說，堆棧跟蹤會很有用，但是對於你的同事來說也是這樣。(例如 : 與其他的前端開發者合作，或者是QA (測試) 工程師).你可以直接把堆棧跟蹤保存為一個文件而不是截個圖。

8. Copy HTML (最快的方式)

你可能知道右擊或者點擊在html元素邊上的省略號(...)就可以將它copy到你的操作系統的剪貼板中

但是你同樣可以用非常古老的[ctrl] + [c]大法來實現同樣的效果！

9. console.assert

console/assert當我們傳入的第一個參數為假時，console.assert打印跟在這個參數後面的值。當你需要在特殊情況下打印一些信息的時候這很有用 - 現在你可以在不使用if表達式的情況下做到這件事情。另外，你還可以白白得到一個堆棧的跟蹤信息 ；-）

請注意，如果你使用的 NodeJS 版本 ≤ 10.0 ,那可能會中斷後面代碼的執行，但是在. 10的版本中被修復了(當然，在瀏覽器中使用是完全安全的)

10. console.table

令人驚訝的是，這一個小技巧在開發者中並沒有多少人知道.如果你有一個數組(或者是類數組的對象，或者就是一個對象)，你可以使用console.table方法將它以一個漂亮的表格的形式打印出來。它不僅僅會根據數組中包含的對象的所有屬性，去計算出表中的列名，而且這些列都是可以縮放甚至...可以排序！

當列太多的時候，使用第二個參數，傳入你想要展示的列對應的名字

如果你偶爾在後臺進行嘗試的話，只有node版本大於10以上,console.table才能起作用

11. console.dir

最受歡迎console.log方法將數據以格式化的形式打印出來，在大多數的情況下這確實很有用。但是有時候那可能不是你想看到的 - 最典型的例子就是你想要打印一個DOM節點.console.log會將這個交互式的元素渲染成像是從Elements中剪切出來的一樣.如果說你想要查看這個節點所關聯到的真實的js對象呢？並且想要查看他的屬性等等？

在那樣的情況下，如果你需要更加直接的表現形式來展示你的數據，就可以使用console.dir。

12. 通過'h'來隱藏

你可以通過簡單的按一下'h'來隱藏你在元素面板中選擇的元素。再次按下'h'可以使它出現。這在某些的時候是很有用的，例如你想截圖，但是你又不想裡面包含一些敏感信息的情況。

13. 拖動 & 放置 元素

當你想要看看你頁面的一部分在DOM樹的不同部分是如何顯示的時候，只需要拖動放置它(到指定的位置)，就像在你機器上任何其他地方一樣 :-)

14. 或者使用control!(按鈕)

如果你只是想移動你當前選中的元素，在DOM結構中往上一點或者往下一點，而不是拖動和放置，你同樣可以使用[ctrl] + [⬆] / [ctrl] + [⬇] ([⌘] + [⬆] /[⌘] + [⬇] on Mac).

15. 它是一個基礎編輯器

從某一點來看，我們可以拖動，放置，編輯，複製(當然，以及使用 [ctrl]+[v] 來粘貼), 所以當我們發現我們可以在元素面板裡把我們的HTML結構搞得一團糟，這並不奇怪。在任意一個編輯器中都有一個標準：

使用[ctrl] + [z] ([⌘] + [z] on Mac)撤銷我們的任何改動。 使用 [ctrl] + [shift] + [z]重新編輯我們的任何修改。

16. 打印出來的對象，並不是我們所期待的樣子

好傢伙，這個(打印出來的對象，並不是我們所期待的樣子)會讓你摔個跟頭，並且使基於console.log的調試過程變得撲朔迷離，或者調試失敗。

你在console中打印出的對象，在你打印出他內容之前，都是以引用的方式保存的。

這是什麼意思呢？例如:你(在代碼中)打印了一個對象，然後(在代碼中)修改了它，然後再將他打印出來 - 然後在console中查看，你就會看到第一條打印的記錄(在進行修改前的記錄) 和第二條打印的記錄的值是一樣的！

如果這樣描述你仍然不好理解，別擔心，在下面的視頻中看下這個流程，然後你就會變得清晰。

現在想象一下，如果在你想要弄清楚一個對象是在何時被修改的時候，發生了這樣的情況。

怎麼處理這樣的情況呢？你可以打印一個從這個對象複製出來的對象，或者...在正式的調試中使用可以讓我們放心的斷點或者資源面板來替代。

17. 開始使用 Command (命令) 菜單 (如果你還沒有用過的話)

有一些 Chrome 調試工具的功能被深深的隱藏在特別的面板中，菜單中等等。並且有一些甚至隱藏在這些地方之下。這也是為什麼 Command 菜單 是一個在工具盒中必不可少的工具。

如果你在 WebStorm 中使用過 Find Action (查找動作) 或者 Visual Studio Code 中的 Command Palette 那麼 (Command 菜單) 也是類似的功能。可以這樣讓它顯示出來：

• 在 Chrome 的調試打開的情況下 按下 [ Ctrl]+[Shift]+[P] (or [⌘]+[Shift]+[P] on Mac)
• 或者使用DevTools 的 dropdown 按鈕的這個選項:

你可以看到命令的輸入和一系列的可供你選擇的命令，按照我在下圖所選擇的類型被分組排列。

順便說一句. 我個人認為上面這張圖，是對於 DevTools 有多麼強力的最好的象徵

讓我們一起來看看隱藏在這裡的精華吧，一起？

18.截屏，大小通吃

如果你想對一個特別的 DOM 節點進行截圖，選中那個節點，打開 Command 菜單並且尋找節點截圖的命令。

更有用的是什麼呢，你同樣可以用這種方式全屏截圖 - 使用 Capture full size screenshot。請注意，我們說的是全屏，並不是嵌入頁面的一部分。我記得這可是得使用瀏覽器插件才能做到的！

19.快速切換面板

DevTools 的部分使用雙面板佈局（例如：元素或者資源面板）經常將它們以適合閱讀的方式展示出來，根據屏幕可用的部分，將它們橫向或者縱向的排列。有時候這個佈局卻並不是你喜歡的。

（你是否重置過DevTools呢？將樣式面板將其從html預覽的底部移動到右邊或者其他的周圍位置呢？是的，這就是我所說的）

Open Commands Menu and type in “layout”, you will see 2 of the 3 possible options (The option you have currently active is the one that won’t be shown):

打開 Commands 菜單並且輸入layout,你會看到 2 到3個可供選擇的項(當前你已經激活的選項不會在這裡顯示)：

• 使用橫向面板佈局
• 使用縱向面板佈局
• 使用自動面板佈局

選擇你需要的

20.快速切換主題

你是否突然開始討厭強光，並且不能忍受一直看著白光閃閃的屏幕呢？或者你一直都在黑暗的模式下工作，突然太陽出來了，照在你的 DevTools 上所以你什麼都看不到？

在 Commands菜單中尋找與 theme 相關的選項，以實現在明亮&暗黑兩種主題之間的切換。

作者：Tomek Sułkowski 地址：https://twitter.com/sulco
翻譯：dendoink 地址：http://www.dendoink.com
著作權歸原作者所有