[[440889]]

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

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

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

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

flex 調試面板

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

勾選后就會通過 overlay 展示出如何做的布局，其中網(wǎng)格的部分就是彈性的部分，比較直觀。

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

font 調試面板

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

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

node 截圖

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

請求定位到源碼

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

元素定位到創(chuàng)建的源碼

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

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

console 的動態(tài)表達式

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

ruler

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

請求導出，用 charles 查看

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

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

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

總結

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

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

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

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