你可能不知道的 Chrome Devtools 的功能

Chrome Devtools 是我們每天都在用的工具，它提供了很多調試功能，可以幫助我們更好的開發網頁。而我們平時使用的功能只是它全部功能的子集，很多功能並沒用到過。

作爲高頻使用的工具，還是有必要好好掌握的。所以今天就分享幾個你可能沒注意到的但還挺有用的 Chrome Devtools 的功能。

在那之前，我們要更新下 chrome，因爲一些調試功能是在新版加的：

打開 “關於 Google Chrome” 的頁面，chrome 就會自動檢查更新。

flex 調試面板

Elements 面板點擊某個元素，右邊選擇 layout，會看到頁面上所有使用了 flex 佈局的元素。

勾選後就會通過 overlay 展示出如何做的佈局，其中網格的部分就是彈性的部分，比較直觀。

點擊箭頭可以跳到對應的元素，點擊 display: flex 右側的按鈕，就會出現 flex 調試面板，可以直觀的修改 flex 相關樣式。

類似的，font 也支持了單獨的調試面板，點擊字體符號就會出現：

這個功能是實驗中的特性，需要手動開啓下：點擊設置，選擇 Experiments，選中 “Enable new Font Editor tool within the Styles Panes”。

Elements 中右擊某個節點，選擇 “Capture node screenshot”，就會下載該 node 的截圖：

當你想知道某個請求是在哪裏發的，可以打開 Network 面板，在每個網絡請求的 initiator 部分可以看到發請求代碼的調用棧，點擊可以快速定位到對應代碼。

當你想知道某個元素的創建流程，可以通過 Elements 面板選中某個元素，點擊 Stack Trace，就會展示出元素創建流程的調用棧。這可以幫你理清前端框架的運行流程。

當然，這個功能也是實驗性的，需要手動開啓下：在 settings 的 expriments 功能裏，勾選 “Capture node creation stacks”。

當你想觀察某個變化的值的時候，是不是每次都要 console.log？其實不用，添加一個 live expression 就可以實時拿到最新的值。

在 Preferences 裏開啓 ruler，然後在 Elements 面板選中某個元素，就可以看到尺子、方便定位元素位置或者測量尺寸。

覺得 network 面板展示的請求信息看起來不方便？那可以把它導出到 charles 裏看。

點擊 network 的 “export har” 按鈕，下載 har 文件，點擊文件就可以直接用 charles 打開。

charles 裏可以結構化的展示請求的 url，而且請求和響應的各種信息展示的也更直觀，而且也能持久化。

Chrome Devtools 作爲我們每天都在用的調試工具，還是有必要好好掌握的，所以我分享了一些大家可能沒用過的功能：

flex 調試面板：高效直觀的調試 flex 樣式
font 調試面板：高效直觀的調試 font 樣式
ruler：方便測量元素定位和尺寸
請求定位源碼：可以快速找到發請求的代碼
元素定位到創建的源碼：可以快速理清元素是怎麼創建出來的，這對於理清前端框架的運行流程很有幫助。
console 的動態表達式：監聽某個變化的值不用一直 console.log 了，可以實時看到最新的值，相當於 watch
node 截圖：可以方便的直接拿到某個區域的截圖
請求導出到 charles 查看：charles 顯示請求信息時，url 按照層級結構展示的，請求和相應的信息也更豐富直觀，可以更好的分析，也能持久化。

此外，可以經常打開 “關於 Google Chrome” 頁面檢查下更新，更早的體驗最新的 Chrome Devtools 的功能。

這幾個 Chrome Devtools 的功能還是挺有用的，可以幫助我們更好的調試。後面我會繼續分享一些 Chrome Devtools 的小功能，一起來把它掌握的更好吧。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/cxYYvVaf5_5u9d1uPrPM3g