開發人員工具「時間軸」面板一直是效能最佳化過程中的最佳起點。應用程式活動會集中瀏覽，幫助您分析在載入、編寫指令碼、轉譯和繪製上花費的時間。我們最近升級了時間軸，納入更多檢測結果，讓您可以更深入瞭解應用程式的成效。
我們新增了下列功能：
- 整合式 JavaScript 分析器。(包括火焰圖！)
- Frameviewer (頁框檢視器) 協助您視覺化合成圖層。
- 油漆分析器，提供詳細分析瀏覽器繪畫活動。
請注意，使用本文所述的「繪製」擷取選項會產生一些效能負擔，因此只有在需要時才開啟這些選項。
整合式 JavaScript 分析器
如果您曾經在「設定檔」面板中瀏覽，應該已經熟悉 JavaScript CPU 分析器。這項工具會測量 JavaScript 函式所花費的執行時間。使用「火焰圖」檢視 JavaScript 設定檔，您就可以透過視覺化的方式呈現隨著時間的 JavaScript 處理過程。
現在，你可以在「Timeline」面板中查看 JavaScript 執行作業的精細詳細資料。選取「JS Profiler」擷取選項後，您就可以在時間軸中查看 JavaScript 呼叫堆疊，以及其他瀏覽器事件。在時間軸中加入這項功能，可簡化偵錯工作流程。不僅如此，您還可以在運作時查看 JavaScript，找出程式碼中影響網頁載入時間和轉譯的部分。
除了 JavaScript 分析器外，我們也將「火焰圖」檢視整合至「Timeline」面板。您現在可以查看應用程式的傳統事件瀑布或火焰圖。您可以透過「火焰圖」圖示在這兩種檢視之間切換。
影格檢視器
圖層合成的藝術是瀏覽器的另一個層面，也是開發人員最不為人知的功能。請謹慎使用並謹慎使用，避免成本高昂的重建工作，進而大幅提升效能。但預測瀏覽器如何製作內容，通常並不容易。您可以使用時間軸全新的「繪製」擷取選項，以視覺化方式呈現錄製每個影格中的合成圖層。
選取「Main Thread」上方的灰色頁框列時，「Layers」面板會顯示組成應用程式圖層的視覺模型。
您可以縮放、旋轉及拖曳圖層模型，以探索其中的內容。將滑鼠遊標懸停在圖層上，即可查看圖層在頁面中的目前位置。在圖層上按一下滑鼠右鍵，即可跳至「元素」面板中的對應節點。這些地圖項目會顯示已升級為圖層的內容。如果您選取圖層，您還可在「Compositing Reasons」列中查看升級的原因。
繪製分析器
最後，我們加入了繪圖分析器，協助辨識因昂貴顏料造成的卡頓。這項功能可進一步提供 Chrome 在油漆活動期間工作的詳細資料，豐富時間軸的內容。
一開始，現在可以更輕鬆地辨別與個別顏料事件對應的影像內容。當您在時間軸中選取綠色繪製事件時，「Details」窗格會顯示實際繪製像素的預覽畫面。
如要瞭解詳情，請切換至「Paint Profiler」窗格。這個分析器會顯示瀏覽器針對所選顏料執行的確切繪圖指令。為協助您將這些原生指令與應用程式中的實際內容連結，您可以在「繪製*」呼叫上按一下滑鼠右鍵，然後直接跳到「Elements」面板中的對應節點。
窗格頂端的簡短時間軸可讓您播放繪畫過程，讓您瞭解瀏覽器執行哪些作業的成本較高。繪圖作業會以不同顏色標示如下：粉紅色 (形狀)、藍色 (點陣圖)、綠色 (文字) 和紫色 (其他)。長條高度代表通話時間長度，因此查看長長條有助於釐清特定顏料成本的高成本。
個人資料和獲利！
在效能最佳化方面，瀏覽器的知識往往相當強大。這些時間軸更新可讓你清楚瞭解程式碼，進而釐清程式碼與 Chrome 轉譯程序之間的關係。在時間軸中試用這些新選項，看看 Chrome 開發人員工具如何改善卡頓搜尋工作流程！