填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

DevTools 概述

DevTools Overview

Angular DevTools 是一個 Chrome 擴充套件程式,可為 Angular 應用程式提供除錯和剖析功能。 Angular DevTools 支援 Angular v9 及更高版本,並支援 Ivy。

Angular DevTools is a Chrome extension that provides debugging and profiling capabilities for Angular applications. Angular DevTools supports Angular v9 and above, with Ivy enabled.

你可以在 Chrome 網上應用店中找到 Angular DevTools。

You can find Angular DevTools in the Chrome Web Store.

安裝 Angular DevTools 後,你可以在 Chrome DevTools 的 Angular 標籤下找到本擴充套件程式。

After installing Angular DevTools, you can find the extension under the Angular tab in Chrome DevTools.

開啟擴充套件程式時,你還會看到另外兩個選項卡:

When you open the extension, you'll see two additional tabs:

  • Components - 使你可以瀏覽應用程式中的元件和指令,並預覽或編輯它們的狀態。

    Components - lets you explore the components and directives in your application and preview or edit their state.

  • Profiler - 使你可以剖析應用程式並瞭解變更檢測執行期間的效能瓶頸。

    Profiler - lets you profile your application and understand what the performance bottleneck is during change detection execution.

在 Angular DevTools 的右上角,你將找到頁面上正在執行哪個版本的 Angular 以及該擴充套件的最後一次提交的雜湊串。

In the top-right corner of Angular DevTools you'll find which version of Angular is running on the page as well as the latest commit hash for the extension.

錯誤報告

Bug reports

你可以在 GitHub 上報告問題和特性請求。

You can report issues and feature requests on GitHub.

要報告 Profiler 的問題,請透過單擊 Save Profile(儲存配置檔案) 按鈕匯出 Profiler 記錄,然後將該匯出內容作為該問題的附件。

To report an issue with the Profiler, export the Profiler recording by clicking the Save Profile button, and then attaching that export as a file in the issue.

請確保 Profiler 記錄中不包含任何機密資訊。

Make sure that the Profiler recording does not contain any confidential information.

除錯你的應用程式

Debug your application

Components 選項卡使你可以瀏覽應用程式的結構。你可以視覺化並檢查元件和指令實例,並預覽或修改它們的狀態。在接下來的兩節中,我們將研究如何有效使用此選項卡來除錯應用程式。

The Components tab lets you explore the structure of your application. You can visualize and inspect the component and directive instances and preview or modify their state. In the next couple of sections we'll look into how you can use this tab effectively to debug your application.

瀏覽應用程式的結構

Explore the application structure

在前面的螢幕截圖中,你可以看到應用程式的元件樹。

In the preceding screenshot, you can see the component tree of an application.

元件樹顯示應用程式中元件和指令之間的層次關係。選擇元件或指令實例時,Angular DevTools 會提供有關該實例的其他資訊。

The component tree displays a hierarchical relationship of the components and directives within your application. When you select a component or a directive instance, Angular DevTools presents additional information about that instance.

檢視屬性

View properties

單擊元件瀏覽器中的各個元件或指令,以選擇它們並預覽其屬性。 Angular DevTools 在元件樹的右側顯示其屬性和元資料。

Click the individual components or directives in the component explorer to select them and preview their properties. Angular DevTools displays their properties and metadata on the right-hand side of the component tree.

你可以使用滑鼠或下列鍵盤快捷鍵在元件樹中導航:

You can navigate in the component tree using the mouse or the following keyboard shortcuts:

  • 用上下箭頭鍵選擇上一個或下一個節點。

    Up and down arrows select the previous and next nodes.

  • 用左右箭頭鍵摺疊或展開一個節點。

    Left and right arrows collapse and expand a node.

要透過名稱查詢元件或指令,請使用元件樹上方的搜尋框。要導航至下一個搜尋匹配項,請按 Enter。要導航至上一個搜尋匹配項,請按 Shift + Enter

To look up a component or directive by name use the search box above the component tree. To navigate to the next search match, press Enter. To navigate to the previous search match, press Shift + Enter.

要轉到特定元件或指令的宿主元素,請在元件瀏覽器中找到它,然後雙擊它。 Chrome DevTools 將開啟 “Elements” 選項卡,然後選擇關聯的 DOM 節點。

To go to the host element of a particular component or directive, find it in the component explorer and double-click it. Chrome DevTools opens the Elements tab and selects the associated DOM node.

對於元件,Angular DevTools 還允許你導航到原始碼選項卡中的元件定義。選擇特定元件後,單擊屬性檢視右上角的圖示:

For components, Angular DevTools also lets you navigate to the component definition in the source tab. After you select a particular component, click the icon at the top-right of the properties view:

修改屬性值

Update property value

與 Chrome DevTools 一樣,屬性檢視可讓你編輯輸入屬性、輸出屬性或其他屬性的值。右鍵單擊屬性值。如果此值型別可使用編輯功能,則將看到一個文字輸入框。鍵入新值,然後按 Enter 鍵。

Like Chrome DevTools, the properties view allows you to edit the value of an input, output, or another property. Right-click on the property value. If edit functionality is available for this value type, you'll see a text input. Type the new value and press Enter.

在控制檯中訪問選定的元件或指令

Access selected component or directive in console

作為控制檯中的快捷方式,Angular DevTools 可以讓你訪問最近選擇的元件或指令的實例。鍵入 $ng0 以獲取對當前所選元件或指令的實例的參考,鍵入 $ng1 來獲取前一個選擇的實例。

As a shortcut in the console, Angular DevTools provides you access to instances of the recently selected components or directives. Type $ng0 to get a reference to the instance of the currently selected component or directive, and type $ng1 for the previously selected instance.

選擇指令或元件

Select a directive or component

與 Chrome DevTools 相似,你可以檢查頁面以選擇特定的元件或指令。單擊Devtools 中左上角的 Inspect element(審查元素)圖示,然後將滑鼠懸停在頁面上的 DOM 元素上。 Angular DevTools 可以識別關聯的指令和/或元件,並允許你在元件樹中選擇相應的元素。

Similar to Chrome DevTools, you can inspect the page to select a particular component or directive. Click the Inspect element icon at the top left corner within Devtools and hover over a DOM element on the page. Angular DevTools recognizes the associated directives and/or components and lets you select the corresponding element in the Component tree.

剖析你的應用程式

Profile your application

Profiler 選項卡使你可以預覽 Angular 變更檢測的執行。

The Profiler tab lets you preview the execution of Angular's change detection.

透過 Profiler,你可以開始進行剖析或匯入現有的剖析記錄檔案。要開始對應用程式進行效能剖析,請將滑鼠懸停在 Profiler 選項卡內左上角的圓圈上,然後點選 Start recording

The Profiler lets you start profiling or import an existing profile. To start profiling your application, hover over the circle at the top-left corner within the Profiler tab and click Start recording.

在剖析過程中,Angular DevTools 會捕獲執行過的事件,例如變更檢測和生命週期掛鉤。要完成錄製,請再次單擊那個圓圈以 Stop recording

During profiling, Angular DevTools captures execution events, such as change detection and lifecycle hook execution. To finish recording, click the circle again to Stop recording.

你也可以匯入現有剖析記錄。在匯入記錄部分了解有關此功能的更多資訊。

You can also import an existing recording. Read more about this feature in the Import recording section.

瞭解應用程式的執行過程

Understand your application's execution

在下面的螢幕截圖中,你可以在完成錄製後找到 Profiler 的預設檢視。

In the following screenshot, you can find the default view of the Profiler after you complete recording.

在此檢視的頂部附近,你可以看到一系列條形圖,每個條形圖表示應用程式中的變更檢測週期。豎線越高,應用程式在此週期中花費的時間越長。選擇條形圖時,DevTools 會渲染一個條形圖,其中包含在此迴圈中捕獲的所有元件和指令。

Near the top of the view you can see a sequence of bars, each one of them symbolizing change detection cycles in your app. The taller a bar is, the longer your application has spent in this cycle. When you select a bar, DevTools renders a bar chart with all the components and directives that it captured during this cycle.

在變更檢測時間軸上方,你可以發現 Angular 在此週期中花費了多少時間。 Angular DevTools 會試圖估算出掉幀情況,以指示應用程式的執行何時可能會影響使用者體驗。

Above the change detection timeline, you can find how much time Angular spent in this cycle. Angular DevTools attempts to estimate the frame drop at this point to indicate when the execution of your application might impact the user experience.

Angular DevTools 還會指出觸發這次變更檢測的原因(即變更檢測的來源)。

Angular DevTools also indicates what triggered the change detection (that is, the change detection's source).

瞭解元件的執行過程

Understand component execution

單擊條形圖時,你會發現有關應用程式在特定指令或元件上花費了多少時間的詳細檢視:

When you click on a bar, you'll find a detailed view about how much time your application spent in the particular directive or component:

這張圖展示了 NgForOf 指令花費的總時間,以及其中呼叫了哪個方法。它還展示了所選指令的父級層次。

Figure shows the total time spent by NgforOf directive and which method was called in it. It also shows the parent hierarchy of the directive selected.

分層檢視

Hierarchical views

你也可以在類似火焰圖的檢視中預覽變更檢測的執行情況。該圖形中的每個圖塊代表螢幕上渲染樹中位於特定位置的元素。

You can also preview the change detection execution in a flame graph-like view. Each tile in the graph represents an element on the screen at a specific position in the render tree.

例如,如果在元件樹中特定位置的一個變更檢測週期中,我們原本有一個 ComponentA,然後該元件被刪除,而在它的位置上,Angular 再渲染出 ComponentB,這樣你就會在同一圖塊上看到兩個元件。

For example, if during one change detection cycle at a specific position in the component tree we had ComponentA, this component was removed and in its place Angular rendered ComponentB, you'll see both components at the same tile.

每個圖塊的顏色取決於 Angular 在這裡花費了多少時間。 DevTools 透過相對於我們花費最多時間進行變更檢測的圖塊所花費的時間來確定顏色的深淺。

Each tile is colored depending on how much time Angular has spent there. DevTools determines the intensity of the color by the time spent relative to the tile where we've spent the most time in change detection.

單擊某個圖塊時,你會在右側面板中看到關於該圖塊的詳細資訊。雙擊圖塊將其放大,以便你可以預覽巢狀的子級圖塊。

When you click on a certain tile, you'll see details about it in the panel on the right. Double-clicking the tile zooms it in so you can preview the nested children.

除錯 OnPush

Debug OnPush

要預覽 Angular 進行變更檢測的元件,請選擇火焰圖上方頂部的 Change detection 複選框。

To preview the components in which Angular did change detection, select the Change detection checkbox at the top, above the flame graph.

此檢視將把所有在 Angular 中執行過變更檢測的圖塊顯示為綠色,其餘顯示為灰色:

This view will color all the tiles in which Angular performed change detection in green, and the rest in gray:

匯入剖析記錄

Import recording

單擊已記錄的效能剖析會話左上角的 Save Profile 按鈕,以將其匯出為 JSON 檔案並將其儲存到磁碟。然後,你可以透過單擊 Choose file 輸入框來將此檔案匯入到剖析器的初始檢視中:

Click the Save Profile button at the top-left of a recorded profiling session to export it as a JSON file and save it to the disk. Then, you can import the file in the initial view of the profiler by clicking the Choose file input: