如何使用Chrome Timeline 工具（譯）

【原文地址】https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool
該文章介紹了 Timeline 工具的基本組成以及如何使用該工具對頁面事件進行記錄，具體的調試細節還得更具讀者的具體使用場景和調試目的對數據進行分析獲得解決方案，該文章算是對 Chrome Timeline 工具的一個使用說明書。

 

使用 Chrome DevTools 的 Timeline 面板記錄程序運行時的全部行爲，並用於加以分析是解決程序性能問題的最好方案。

目錄結構

• Timeline面板歸納（Timeline panel overview）
• 開始一次記錄（Make a recording）
• 查看記錄詳細信息（View recording details）
• 在記錄期間獲取頁面截圖信息（Capture screenshots during recording）
• 分析 JavaScript（Profile JavaScript）
• 分析 painting（Profile painting）
• 在記錄中查找（Search records）
• Zoom in on a Timeline section
• 保持和載入記錄（Save and load recordings）

經過 Timeline 記錄頁面加載後所發生的各類事件和交互。
在 Overview 區域查看 FPS，CPU 和 網絡請求信息
點擊 Flame Chart 上的一個事件記錄查看其詳細信息
放大某一段記錄，更利於分析

Timeline panel overview

Timeline 面板由一下 4 個子面板構成：

1. 控制面板（Controls）
   開啓記錄，中止記錄，配置記錄期間須要記錄那些內容。

2. 歸納（Overview）
   對頁面表現（行爲）的一個概述。

3. Flame Chart
   可視化 CPU 堆棧(stack)信息記錄
   在 Flame Chart 面板上你可能看到三根垂直的線，藍線表明 DOMContentLoaded 事件，綠線表明渲染開始的時間( time to first paint)，紅線表明 load 事件。

4. 詳細信息（Detail）
   當有具體事件被選擇時，該面板展現這個事件的更多詳細信息。若是沒有事件被選擇，該面板展現當前所選時間段的一些信息。

Overview pane

歸納區域由一下三個圖形記錄組成:

1. FPS. Frames Per Second.
   綠色的柱越高， FPS 值也越高。FPS 圖表上方的紅色小塊指明瞭長幀(long frame，較慢渲染？)，這些 long frame 多是卡頓(jank)

2. CPU. CPU Resources.
   這個面積圖(area chart)代表了哪一種事件在消耗 CPU 資源。

3. NET.
   每種不一樣顏色的條表明一種資源。這個條越長代表獲取( retrieve )該資源所花的時間越長。

   每一個條中的淺色部分表明等待時間（資源請求被髮送到收到第一個響應字節的時間），深色部分表明文件傳輸時間（從收到第一個字節到這個資源徹底被下載好）

   藍色 表明 HTML 文件，黃色 表明 Script 文件，紫色 表明 Stylesheets 文件， 綠色 表明 Media 文件，灰色 表明其餘資源。

Make a recording

• 記錄一個頁面的loading過程
  打開 Timeline 面板，在當前 Tab 打開你想要記錄的頁面，而後刷新該頁面，Timeline 面板會自動的記錄一個頁面的 reload。

• 記錄頁面上的交互
  打開 Timeline 面板，點擊該面板左上的 Record 按鈕( ● ) 或者經過快捷鍵(Cmd + E/Ctrl + E) 開始記錄。
  當 Timeline 正在記錄頁面事件時，Record 按鈕會變成紅色的。
  在記錄期間進行一些想要分析的頁面交互，當再次發送 Record 命令（●按鈕，或鍵盤快捷方式）時會中止此次記錄。

當記錄中止事後，DevTools 會自動去分析那塊內容是你最關心的，而且會自動的放大（選擇）那塊區域。

Recording Tips：

• Keep recordings as short as possible.
  保持記錄內容儘量的少，一般越短的記錄越利於分析。
• Avoid unnecessary actions.
  避免一些你並不關心的無用的事件（好比：鼠標點擊，網絡加載）。好比，你但願分析的是點擊 Login button 後的處理事件，就不要去滾動當前頁面，加載更多的圖片，或其餘一些無關事件。
• Disable the browser cache.
  當記錄分析一些網絡相關事件時，禁用瀏覽器的緩存是個不錯的主意。你能夠在 DevTools Settings 面板或者 Network conditions 面板禁用緩存。
• Disable extensions.
  Chrome 瀏覽器擴展會在記錄中添加一些不相關的 noise 到 Timeline 記錄中。能夠經過打開 隱身模式 或者建立一個新的瀏覽器用戶來確保你的Chrome環境下沒有擴展插件。

View recording details

當你在 Flame Chart 中選擇一個具體的事件，Detail 區域會展現一些關於該事件的額外信息。

上圖中的一些 tab，好比 Summay 對全部的事件都會有對應的展現信息，其餘的一些 tab 只有對於某些特定的事件類型纔有展現內容。能夠經過查看 Timeline event reference 查看 tab 和事件類型的關係。

Capture screenshots during recording

TImeline 面板還能夠在記錄期間對頁面進行截屏重現，這個特性就像幻燈片查看同樣。

若是要對一個頁面的進行截屏重現，如今 控制區域(Controls pane) 中勾選 Screenshots，而後開始記錄，完成記錄後，頁面的截屏會展示在 概述面板(Overview pane)下方。

將鼠標移動到 概述區域 或 截屏 上能夠查看到當前點上頁面截屏放大的圖像，左右移動鼠標來模擬記錄期間頁面的動態效果。

Profile JavaScript

在開始記錄以前，在控制區域(Control pane)勾選 JS Profile，這樣記錄的時候就會去記錄 JavaScript stacks 相關信息。這時你的 Flame Chart 中將會記錄任何一個被調用過的方法。

Profile painting

和 Profile JavaScript 同樣，你須要先在控制區域勾選 Paint 來在後面的記錄中記錄 Paint 事件，此時，當你在記錄結果中選擇一個 Paint 事件後，Paint Priflter 這個 tab 將會出如今 Details 區域，該 tab 將會展現更多當前關於當前事件的信息。

Rendering settings

打開 DevTools 的主菜單，選擇 More tools > Rendering settings來配置一些 rendering settings，這些可能會對調試渲染問題頗有幫助。開啓 rendering settings 後，會在 Console drawer 旁邊添加一個 Rendering tab。若是 Console drawer 沒有展示在頁面上，可經過 ESC 使其展現出來。

Search records

查看記錄的事件時，你可能只但願關注於某一類型的事件，好比你只是但願查看每一個 Parse HTML 事件的詳細信息。

經過使用 Cmd + F/Ctrl + F快捷鍵，在 Timeline 區域中打開 搜索工具欄，在搜索工具欄中輸入你想分析的事件類型，好比 Event.

工具欄只會將搜索條件做用在當前選擇的時間表內的事件，在時間表外的事件都不會顯示在結果中。

搜索工具欄中的上下箭頭能夠幫助你按事件發生的前後順序查看過濾後的事件的詳細信息。第一條記錄表明當前選區最早發生的事件，最後一條記錄表明當前選區最後發生的事件。每次點擊上下箭頭，就會選擇一個新的事件，因此你能夠在 Details 面板查看這個事件的具體信息。（點擊上下箭頭和在 Flame Chart 選擇一個事件是等效的）

Zoom in on a Timeline section

指定某一個 Recording 結果區域，將會更有利於對記錄數據的分析。能夠經過在 Overview 區域選擇某一塊內容，來定位到某一塊 recording 數據。當在 Overview 區域選擇某一塊內容後，Flame Chart 會自動定位到匹配的區域，並更清楚的展現對應內容。

能夠經過下面的方式來指定選擇一塊區域：

• 在 Overview 面板，經過鼠標拖選出關注的內容
• 經過調整 ruler 區域的灰色滑塊來選出關注的內容

一旦你選擇了某一塊內容，你可使用 W, A, S, D 鍵來調整選區，W 和 S 用來放大放小選取，A 和 D 分別向左向右移動選區。（測試中沒發現具體怎麼使用，經過手動選區來實現這些功能）

Save and load recordings

你能夠經過在 概述面板 或 Flame Chart 區域點擊鼠標左鍵，在彈出的菜單中選擇相關選項，實現Save 和 Load recordings。

 

 

轉自：http://codecloud.net/18559.html