Chrome DevTools之Timeline Tool簡介續

01-31

上一篇文章里我大概對Chrome DevTools的Timeline做了一個簡單的介紹，今天主要是對錄製功能做一些補充說明。

Capture screenshots during recording

首先介紹一下截屏功能。在控制區裡面，把Screenshots打對勾，那麼你在重新載入的時候就會截取屏幕，顯示在總覽區域裡面。如圖

有沒有看到下面一排截屏？哈哈，感覺太小？當然可以放大看了！把你的滑鼠移到下面的截屏上或者移到總覽區里都可以看到放大的截屏。

Timeline也可以讓你對JavaScript做定向的分析。在錄製前對JS Profile打??,就可以追蹤到詳細的JavaScript的行為狀態。此時這個區域會顯示出來你調用的每一個JavaScript的函數。

同樣，在錄製前對Paint選項打對勾，那麼你就會看到更詳細的paint事件的信息。此時，你點擊一個paint事件，那麼在細節區的導航欄里就會多出一個Paint Profiler的選項卡。這裡會顯示出這個paint事件的詳細信息

打開DevTools的導航欄選擇 More tools > Rendering settings可以設置Rendering屬性，這個工具可以幫你調試paint的問題。

點開Rendering後在Console（按esc鍵打開）的右邊就會多出一個Rendering選項卡。

當你想集中於某類事件的分析時，這個功能就派上用場啦，舉個列子，比方說你分析每一個Parse HTML事件的詳細信息，那麼就在選中的timeline情況下按command/control+F就會彈出一個搜索框。輸入你想分析的事件類型名稱，比如HTML。

可以看到上圖在選中的幀區域里搜索到了11個HTML事件，當前選中的是第三個，按右邊的上和下可以選擇之前或者之後的HTML事件，當然你也可以直接在幀區域里選中當前事件。可以在細節區看到當前的HTML的詳細信息。

你也可以保存和打開你的錄製記錄，在總覽區或者幀區域右擊一下就會彈出來

介紹到這裡就差不多啦，大概介紹了一下Timleline的錄製功能一些用法，更加詳細的信息就要自己去研究啦。

最後再說一下涉及到的幾個單詞發音。今天涉及的單詞都是比較簡單的，我這裡就強調一個音吧，就是Console，音標[k?nso?l]，注意重音在後面，很多人重音在前面讀是不對的。