Angular 開發(fā)者工具

DevTools 概覽

Angular DevTools 是一個瀏覽器擴展，為 Angular 應(yīng)用程序提供調(diào)試和剖析功能。Angular DevTools 支持 Angular v12 及更高版本。

你可以在 Chrome 網(wǎng)上應(yīng)用店和 Firefox Addons 中找到 Angular DevTools。

安裝 Angular DevTools 后，在瀏覽器 DevTools 的 Angular 選項卡下找到擴展。

打開擴展程序時，你還會看到另外兩個選項卡：

在 Angular DevTools 的右上角，你將找到頁面上正在運行哪個版本的 Angular 以及該擴展的最后一次提交的哈希串。

錯誤報告

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

要報告 Profiler 的問題，請通過單擊 Save Profile（保存配置文件） 按鈕導(dǎo)出 Profiler 記錄，然后將該導(dǎo)出內(nèi)容作為該問題的附件。

請確保 Profiler 記錄中不包含任何機密信息。

調(diào)試你的應(yīng)用程序

Components 選項卡使你可以瀏覽應(yīng)用程序的結(jié)構(gòu)。你可以可視化并檢查組件和指令實例，并預(yù)覽或修改它們的狀態(tài)。在接下來的兩節(jié)中，我們將研究如何有效使用此選項卡來調(diào)試應(yīng)用程序。

瀏覽應(yīng)用程序的結(jié)構(gòu)

在前面的屏幕截圖中，你可以看到應(yīng)用程序的組件樹。

組件樹顯示應(yīng)用程序中組件和指令之間的層次關(guān)系。選擇組件或指令實例時，Angular DevTools 會提供有關(guān)該實例的其他信息。

查看屬性

單擊組件瀏覽器中的各個組件或指令，以選擇它們并預(yù)覽其屬性。Angular DevTools 在組件樹的右側(cè)顯示其屬性和元數(shù)據(jù)。

可以使用鼠標或下列鍵盤快捷鍵在組件樹中導(dǎo)航：

要通過名稱查找組件或指令，請使用組件樹上方的搜索框。要導(dǎo)航至下一個搜索匹配項，請按 Enter。要導(dǎo)航至上一個搜索匹配項，請按 Shift + Enter。

導(dǎo)航到宿主節(jié)點

要轉(zhuǎn)到特定組件或指令的宿主元素，請在組件瀏覽器中找到它，然后雙擊它。瀏覽器的 DevTools 將在 Chrome 或 Firefox 的審查器中打開 “Elements” 選項卡，然后選擇關(guān)聯(lián)的 DOM 節(jié)點。

導(dǎo)航到源碼

對于組件，Angular DevTools 還允許你導(dǎo)航到源碼選項卡中的組件定義。選擇特定組件后，單擊屬性視圖右上角的圖標：

修改屬性值

與瀏覽器的 DevTools 一樣，屬性視圖可讓你編輯輸入屬性、輸出屬性或其他屬性的值。右鍵單擊屬性值。如果此值類型可使用編輯功能，則將看到一個文本輸入框。鍵入新值，然后按 Enter 鍵。

在控制臺中訪問選定的組件或指令

作為控制臺中的快捷方式，Angular DevTools 可以讓你訪問最近選擇的組件或指令的實例。鍵入 ?$ng0? 以獲取對當前所選組件或指令的實例的引用，鍵入 ?$ng1? 來獲取前一個選擇的實例。

選擇指令或組件

與瀏覽器的 DevTools 相似，你可以檢查頁面以選擇特定的組件或指令。單擊 DevTools 中左上角的 Inspect element（審查元素）圖標，然后將鼠標懸停在頁面上的 DOM 元素上。該擴展可以識別關(guān)聯(lián)的指令和/或組件，并允許你在組件樹中選擇相應(yīng)的元素。

剖析你的應(yīng)用程序

Profiler 選項卡使你可以預(yù)覽 Angular 變更檢測的執(zhí)行。

通過 Profiler，你可以開始進行剖析或?qū)氍F(xiàn)有的剖析記錄文件。要開始對應(yīng)用程序進行性能剖析，請將鼠標懸停在 Profiler 選項卡內(nèi)左上角的圓圈上，然后點擊 Start recording。

在剖析過程中，Angular DevTools 會捕獲執(zhí)行過的事件，比如變更檢測和生命周期鉤子。要完成錄制，請再次單擊那個圓圈以 Stop recording。

你也可以導(dǎo)入現(xiàn)有剖析記錄。

了解應(yīng)用程序的執(zhí)行過程

在下面的屏幕截圖中，可以在完成錄制后找到 Profiler 的默認視圖。

在此視圖的頂部附近，你可以看到一系列條形圖，每個條形圖表示應(yīng)用程序中的變更檢測周期。豎線越高，應(yīng)用程序在此周期中花費的時間越長。選擇條形圖時，DevTools 會渲染一個條形圖，其中包含在此循環(huán)中捕獲的所有組件和指令。

在變更檢測時間軸前面，你可以發(fā)現(xiàn) Angular 在此周期中花費了多少時間。Angular DevTools 會試圖估算出掉幀情況，以指示應(yīng)用程序的執(zhí)行何時可能會影響用戶體驗。

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

了解組件的執(zhí)行過程

單擊條形圖時，你會發(fā)現(xiàn)有關(guān)應(yīng)用程序在特定指令或組件上花費了多少時間的詳細視圖：

這張圖展示了 NgForOf 指令花費的總時間，以及其中調(diào)用了哪個方法。它還展示了所選指令的父級層次。

分層視圖

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

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

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

單擊某個圖塊時，你會在右側(cè)面板中看到關(guān)于該圖塊的詳細信息。雙擊圖塊將其放大，以便你可以預(yù)覽嵌套的子級圖塊。

調(diào)試 OnPush

要預(yù)覽 Angular 進行變更檢測的組件，請選擇火焰圖上方頂部的 Change detection 復(fù)選框。

此視圖將把所有在 Angular 中執(zhí)行過變更檢測的圖塊顯示為綠色，其余顯示為灰色：

導(dǎo)入剖析記錄

單擊已記錄的性能剖析會話左上角的 Save Profile 按鈕，以將其導(dǎo)出為 JSON 文件并將其保存到磁盤。然后，你可以通過單擊 Choose file 輸入框來將此文件導(dǎo)入到剖析器的初始視圖中：