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

Heather Mahan
Twitter 首頁

開發人員工具時間軸面板一直是效能最佳化的最佳起點。這種集中式的應用程式活動總覽可協助您分析在載入、編寫指令碼、轉譯和繪圖方面花費的時間。我們最近為時間軸提供了更詳盡的評估功能，方便您更深入地瞭解應用程式的成效。

我們新增了下列功能：

請注意，本文所述的 Paint 擷取選項會產生一些效能負擔，因此請在需要「em」時再翻轉這些選項。

整合式 JavaScript 分析器

如果您曾經在「Profiles」面板中介紹過興趣，那麼您應該熟悉 JavaScript CPU 分析器。這項工具會測量執行時間在 JavaScript 函式中花費的時間。藉由使用火焰圖檢視 JavaScript 設定檔，您可以視覺化呈現 JavaScript 的長期處理時間。

現在，您可以在「時間軸」面板中查看 JavaScript 執行作業的精細細目。選取「JS Profiler」擷取選項，即可在時間軸中與其他瀏覽器事件一併顯示 JavaScript 呼叫堆疊。在時間軸中新增這項功能有助於簡化偵錯工作流程。此外，這個工具還能用來查看 JavaScript 內容，並找出影響網頁載入時間和轉譯的部分程式碼部分。

除了 JavaScript 分析器外，我們也將「火焰圖」檢視整合至「時間軸」面板。您現在可以查看應用程式的活動，可以是傳統的事件瀑布，也可以轉換成火焰圖。您可以透過「火焰圖」圖示切換這兩種檢視模式。

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

影格檢視器

圖層合成的藝術是瀏覽器的另一項面向，開發人員並不會看見這項元素。請謹慎使用圖層並謹慎使用，這樣可避免高昂的重新繪製，大幅提升效能。但要預測瀏覽器將如何產生內容，通常並不容易。只要使用時間軸新推出的「Paint」擷取選項，就能以視覺化方式呈現錄製內容的每個影格的複合圖層。

當您在「Main Thread」上方選取灰色的頁框列時，「Layers」面板會提供構成應用程式的圖層視覺模型。

您可以縮放、旋轉及拖曳圖層模型，探索圖層內容。將滑鼠遊標懸停在圖層上，即可顯示目前在頁面中的位置。在圖層上按一下滑鼠右鍵，即可跳到「元素」面板中對應的節點。這些功能可向您顯示已升級為圖層的內容。選取圖層後，您也可以在「Compositing Reasons」列中查看宣傳原因。

正在檢查 Codrops 的散佈圖圖庫中的圖層，瞭解瀏覽器的合成原因。
檢查船隻的散佈圖集中的圖層，瞭解瀏覽器中合成的原因。

繪製分析器

最後，我們加入了顏料分析器，協助你找出因昂貴的畫作而造成的卡頓。這項功能可提供更多細節，說明 Chrome 在繪製事件期間所做的工作。

首先，我們現在能更輕鬆地識別與各種繪畫事件對應的視覺內容。在時間軸中選取綠色繪製事件時，「Details」窗格會顯示實際繪製的像素預覽畫面。

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

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

使用 Paint Profiler 避免原生瀏覽器繪製對 DOM 元素的呼叫。
使用 Paint 分析器，避免原生瀏覽器對 DOM 元素繪製呼叫。

窗格頂端的迷你時間軸可讓您播放繪製過程，並瞭解瀏覽器執行哪些作業費用。繪圖作業會以不同顏色標示：粉紅色 (形狀)、藍色 (點陣圖)、綠色 (文字) 和紫色 (其他)。長條高度代表通話時間長度，因此你可以觀察高長條，瞭解某幅彩繪的昂貴之處。

商家檔案和利潤！

就效能最佳化而言，瀏覽器的相關知識可大幅提升。透過這些時間軸更新，你可以搶先瞭解程式碼和 Chrome 轉譯程序之間的關係。歡迎在時間軸中試用這些新選項，瞭解 Chrome 開發人員工具如何改善除卡頓的工作流程！