Angular 開發(fā)者工具

DevTools 概覽

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

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

安裝 Angular DevTools 后，在瀏覽器 DevTools 的 Angular 選項(xiàng)卡下找到擴(kuò)展。

打開擴(kuò)展程序時(shí)，你還會(huì)看到另外兩個(gè)選項(xiàng)卡：

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

錯(cuò)誤報(bào)告

在 GitHub 上報(bào)告問(wèn)題和特性請(qǐng)求。

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

請(qǐng)確保 Profiler 記錄中不包含任何機(jī)密信息。

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

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

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

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

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

查看屬性

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

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

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

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

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

導(dǎo)航到源碼

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

修改屬性值

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

在控制臺(tái)中訪問(wèn)選定的組件或指令

作為控制臺(tái)中的快捷方式，Angular DevTools 可以讓你訪問(wèn)最近選擇的組件或指令的實(shí)例。鍵入 ?$ng0? 以獲取對(duì)當(dāng)前所選組件或指令的實(shí)例的引用，鍵入 ?$ng1? 來(lái)獲取前一個(gè)選擇的實(shí)例。

選擇指令或組件

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

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

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

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

在剖析過(guò)程中，Angular DevTools 會(huì)捕獲執(zhí)行過(guò)的事件，比如變更檢測(cè)和生命周期鉤子。要完成錄制，請(qǐng)?jiān)俅螁螕裟莻€(gè)圓圈以 Stop recording。

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

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

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

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

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

Angular DevTools 還會(huì)指出觸發(fā)這次變更檢測(cè)的原因（即變更檢測(cè)的來(lái)源）。

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

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

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

分層視圖

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

比如，如果在組件樹中特定位置的一個(gè)變更檢測(cè)周期中，我們?cè)居幸粋€(gè) ?ComponentA?，然后該組件被刪除，而在它的位置上，Angular 再渲染出 ?ComponentB?，這樣你就會(huì)在同一圖塊上看到兩個(gè)組件。

每個(gè)圖塊的顏色取決于 Angular 在這里花費(fèi)了多少時(shí)間。DevTools 通過(guò)相對(duì)于我們花費(fèi)最多時(shí)間進(jìn)行變更檢測(cè)的圖塊所花費(fèi)的時(shí)間來(lái)確定顏色的深淺。

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

調(diào)試 OnPush

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

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

導(dǎo)入剖析記錄

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