你不知道的 Chrome DevTools 玩法

筆者在前段時間的開發時，須要經過 Chrome DevTools來分析一個接口，調試中發現了控制檯中的 copy 函數，很是的好用，進而發現了新世界，學習到了 Chrome 一些奇怪的調試技巧，這裏總結分享給你們，但願能對各位的開發起到幫助！數組

多圖預警，建議在Wifi環境下閱讀本文章。markdown

開發者工具函數

copy

copy 函數可讓你在 console 裏拿到任意的資源，甚至包括一些變量，在複製一些特別冗長的數據時特別有用，當複製完成後，直接使用 ctrl + v 便可。dom

copy 接受一個變量做爲參數，若是有多個參數，則忽略第一個後面的全部參數，當須要複製不存在變量名的數據時，能夠配合 Store As Global 來使用。ide

Store As Global

當咱們從控制檯獲取一些數據卻沒有變量名時（在開發時特別常見），能夠經過右鍵點擊數據旁的小三角形，經過其來儲存爲全局變量，變量名爲 temp1 一直延續下去，就能夠配合 copy 獲取變量名打印了，該功能對 HTML 元素一樣適用。函數

$

這個 $ 和 jQuery 中的 $ 有部分類似之處，都可以做爲選擇器來使用，這裏依次介紹其用法。工具

首先是 $0 ~ $4 能夠獲取點擊的 HTML 元素，其中 $0 對應着最後一次點擊的元素，$1 次之，依序排列直到$4 。oop

根據這個操做能夠很輕易的複製一個元素，並對其執行一些 DOM 操做。佈局

還能夠做爲選擇器使用，其中有兩種用法，分別是單 $ 和雙 $，須要注意的是，雙 $ 返回的並不是 NodeList而是一個純正的數組，直接方便了咱們在控制檯調用API😉。學習

有時僅僅須要獲取上一次輸出沒有變量名的數據該怎麼辦？這時你心中應該有一個答案，就是經過 Store As Global 把其變爲一個變量，可是這樣太麻煩了，$_ 能夠幫你解決這個煩惱，其返回結果就是上次執行結果的引用。flex

這裏能夠看到並不會從新計算一遍結果，而是直接引用。

最後關於$ 命令操做是重磅戲，能夠經過 $i 安裝 NPM 庫，這是一條不曾設想過的道路，筆者查閱發現時，屬實被震撼到了。在Console Importer 插件的幫助之下，就能夠幫助咱們實現這一操做！首先在谷歌應用商店安裝好該插件後，在命令臺輸入 $i('lodash') 後，神奇的事情就會出現。

此時就能夠在 Console 中使用 Lodash 了！

getEventListeners

能夠方便的獲取元素綁定的事件，特別是配合 $ 使用，不過獲取事件功能也能夠在 Element 中查看，主要是當元素嵌套層級深且複雜時，能夠不用點擊而經過選擇器來查看元素。

monitor

這是 DevTools 自帶的監聽器，簡單的說明就是監聽函數的函數，使用起來很簡單，直接套娃就行。目前沒發現有什麼特別方便的地方和使用它的需求，瞭解便可。

Preserve Log

在咱們調試頁面時，常常遇到頁面跳轉或刷新的狀況，此時打印的輸出會被刷新掉😭，看不到想要的數據。在調試面板最右邊的齒輪圖標處，有 Preserve Log選項，能夠保存上一次打印的輸出，這裏用 Math.random 做演示。

inspect

inspect 提供了一個能夠快速跳轉到 DOM 元素對應位置的方法，對於一些嵌套層級複雜或者未知的元素，能夠經過 inspect 配合調試，將元素的選擇器至傳入函數中，則會自動跳轉到其對應位置。

元素面板

元素面板即爲 Elements 面板的內容，咱們通常用其獲取對應元素的信息，好比 Styles && Computed && Layout 等，其中咱們會對元素作一些操做，好比操做一個元素的顯隱要怎麼辦？其中一個答案就是右鍵該元素，而後選擇 Hide Element，但這樣作有點麻煩，能不能有更好更快的辦法呢？答案是有的，直接選擇該元素，在鍵盤上按下 "h" 便可切換元素的顯隱狀態，Amazing！

不只如此，還能夠直接拖動元素達到調整元素位置的功能。

Layout

Layout 是歸屬於元素面板的子面板，在其中能夠查看元素的佈局，特別是對於 flex && grid 來講，簡直是好用的不得了，接下來咱們先看 grid 佈局的操做:

當用戶點擊一個使用 grid 佈局的元素時，則會顯示出其全部的小方格。

固然這還不夠，咱們還想要知道更詳細的信息，好比每一個格子所佔的容量，寬度是多少，能夠點擊 Overlay display settings 下的選項來操做。

其中第一個下拉框能夠選擇展現 line names 和 line numbers，也就是線段的別名和線段對應的序號。

後續三個選項分別爲

顯示軌道大小：切換以顯示或隱藏軌道大小。
顯示區域名稱：在具備命名網格區域的網格的狀況下，切換以顯示或隱藏區域名稱。
擴展網格線：默認狀況下，網格線僅顯示在帶有display: grid或display: inline-grid設置在其上的元素內部；當打開此選項時，網格線沿每一個軸延伸到視口的邊緣。

文字描述可能看起來很差理解，下面有動圖挨個解釋😊。

第一選項能夠很清楚的看到每行每列的寬度，第二個選項能夠看到每個「塊」的別名，第三個選項可能看的不是很清楚，其延伸 grid 的線段至視口邊緣，能夠仔細觀察最下方和最右方，發現會多了幾條虛線。

在 Grid overlays 有一個顏色塊和一個帶有鼠標的虛線塊，其功能也頗有用，分別是自定義每一個 grid 的網格覆蓋顏色和突出顯示網格。

都說到 grid 了，怎麼能不提 flex ？目前在 Chrome 91 版原本看，調試 flex 的功能是要更多一些的，喜歡 grid 的不要擔憂，在92版本會同步二者的功能！

這裏介紹其最新的特性，經過元素面板的 Styles 子面板，在對應元素的樣式裏多了一個小按鈕，點擊該按鈕可以很方便的切換 flex 的各類佈局。

Animations動畫組

還記得剛來組裏時，第一個需求須要用到動畫展現。當時調試動畫全靠一點一點的數值修改，浪費了不少時間。最近發現調試工具中有動畫組的概念，可以很方便的調試和觀察動畫。不過該功能隱藏的很深，藏在 More Tools 裏。

裏面的功能異常強大，可以捕捉全部當前在運做的動畫組，而且修改其速度和耗時，在須要多個動畫配合的時候很是好用。這裏是Codepen的官網可經過它來感覺 Animations 的強大，其由上至下分爲4個區域:

最上方的區域能夠清除全部捕捉的動畫組，或者更改當前選定動畫組的速度。
第二行能夠選擇不一樣的動畫組，此時下方面板將會更新爲當前動畫組的動畫時間線。
在中間擁有時間線的區域，能夠理解爲動畫的進度條，能夠經過拖動來跳轉到動畫對應的時間點。
在最下方的區域裏，能夠修改選定的動畫。

在使用動畫組捕捉動畫後，咱們能夠進行慢速播放，重播動畫。把鼠標放在動畫上面則能夠看動畫預覽，這裏最棒的就是能夠體驗不一樣動畫組合事後的效果，並修改動畫組的時間與延遲，甚至是關鍵幀偏移。

能夠拖動動畫的實心圓，也就是其關鍵幀，來控制動畫的持續時間（最左和最右的兩個實心圓）。也能夠拖動中間的實心圓來控制運動曲線，能夠經過調試來得到最想要的效果。

中間有一條紅色的線，能夠拖動它來控制當前動畫執行的過程在哪裏，這裏注意左側的拖動和右側動畫的轉變。

有了動畫組，排列組合不再是夢！

完結撒花

本次介紹的功能可能是一些筆者認爲實用的功能，好比各類命令行函數，又或者是 Chrome 的新特性，好比 flex && grid 的調試功能，這些功能在開發中如果處置得當，可以很好的提高開發效率，固然還有不少不少調試功能沒有介紹，畢竟如何利用好 DevTools 也是一門很深的學問，這些特性就留在往後開發中挖掘再來補坑吧。