開發人員工具時間軸 - 提供完整報導

Heather Mahan

開發人員工具「時間軸」面板一直是效能最佳化過程中的最佳起點。應用程式活動會集中瀏覽,幫助您分析在載入、編寫指令碼、轉譯和繪製上花費的時間。我們最近升級了時間軸,納入更多檢測結果,讓您可以更深入瞭解應用程式的成效。

我們新增了下列功能:

請注意,使用本文所述的「繪製」擷取選項會產生一些效能負擔,因此只有在需要時才開啟這些選項。

整合式 JavaScript 分析器

如果您曾經在「設定檔」面板中瀏覽,應該已經熟悉 JavaScript CPU 分析器。這項工具會測量 JavaScript 函式所花費的執行時間。使用「火焰圖」檢視 JavaScript 設定檔,您就可以透過視覺化的方式呈現隨著時間的 JavaScript 處理過程。

現在,你可以在「Timeline」面板中查看 JavaScript 執行作業的精細詳細資料。選取「JS Profiler」擷取選項後,您就可以在時間軸中查看 JavaScript 呼叫堆疊,以及其他瀏覽器事件。在時間軸中加入這項功能,可簡化偵錯工作流程。不僅如此,您還可以在運作時查看 JavaScript,找出程式碼中影響網頁載入時間和轉譯的部分。

除了 JavaScript 分析器外,我們也將「火焰圖」檢視整合至「Timeline」面板。您現在可以查看應用程式的傳統事件瀑布或火焰圖。您可以透過「火焰圖」圖示在這兩種檢視之間切換。

火焰圖示。
使用 JS Profiler 擷取選項和「Flame Chart」檢視畫面調查時間軸中的呼叫堆疊。
使用 JS Profiler 擷取選項和「Flame Chart」檢視畫面調查時間軸中的呼叫堆疊。

影格檢視器

圖層合成的藝術是瀏覽器的另一個層面,也是開發人員最不為人知的功能。請謹慎使用並謹慎使用,避免成本高昂的重建工作,進而大幅提升效能。但預測瀏覽器如何製作內容,通常並不容易。您可以使用時間軸全新的「繪製」擷取選項,以視覺化方式呈現錄製每個影格中的合成圖層。

選取「Main Thread」上方的灰色頁框列時,「Layers」面板會顯示組成應用程式圖層的視覺模型。

您可以縮放、旋轉及拖曳圖層模型,以探索其中的內容。將滑鼠遊標懸停在圖層上,即可查看圖層在頁面中的目前位置。在圖層上按一下滑鼠右鍵,即可跳至「元素」面板中的對應節點。這些地圖項目會顯示已升級為圖層的內容。如果您選取圖層,您還可在「Compositing Reasons」列中查看升級的原因。

從 Codrops 的散佈圓點圓點圖片庫檢查圖層,瞭解瀏覽器使用合成的原因。
檢查 Codrops 的散佈 Polaroids Gallery 中的圖層,就能瞭解瀏覽器使用合成工具的原因。

繪製分析器

最後,我們加入了繪圖分析器,協助辨識因昂貴顏料造成的卡頓。這項功能可進一步提供 Chrome 在油漆活動期間工作的詳細資料,豐富時間軸的內容。

一開始,現在可以更輕鬆地辨別與個別顏料事件對應的影像內容。當您在時間軸中選取綠色繪製事件時,「Details」窗格會顯示實際繪製像素的預覽畫面。

預覽瀏覽器使用「塗料擷取」選項繪製的像素。
使用「Paint」擷取選項預覽瀏覽器繪製的像素。

如要瞭解詳情,請切換至「Paint Profiler」窗格。這個分析器會顯示瀏覽器針對所選顏料執行的確切繪圖指令。為協助您將這些原生指令與應用程式中的實際內容連結,您可以在「繪製*」呼叫上按一下滑鼠右鍵,然後直接跳到「Elements」面板中的對應節點。

使用 Paint Profiler 連結原生瀏覽器繪製呼叫對 DOM 元素的影響。
使用繪製分析器,將原生瀏覽器「繪製」呼叫的 DOM 元素相關。

窗格頂端的簡短時間軸可讓您播放繪畫過程,讓您瞭解瀏覽器執行哪些作業的成本較高。繪圖作業會以不同顏色標示如下:粉紅色 (形狀)、藍色 (點陣圖)、綠色 (文字) 和紫色 (其他)。長條高度代表通話時間長度,因此查看長長條有助於釐清特定顏料成本的高成本。

個人資料和獲利!

在效能最佳化方面,瀏覽器的知識往往相當強大。這些時間軸更新可讓你清楚瞭解程式碼,進而釐清程式碼與 Chrome 轉譯程序之間的關係。在時間軸中試用這些新選項,看看 Chrome 開發人員工具如何改善卡頓搜尋工作流程!