建站
咨詢
售后
建站咨詢
新聞中心
DevTools 概覽
Angular DevTools 是一個(gè)瀏覽器擴(kuò)展，為 Angular 應(yīng)用程序提供調(diào)試和剖析功能。Angular DevTools 支持 Angular v12 及更高版本。
創(chuàng)新互聯(lián)建站主要從事做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)敘永,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢建站服務(wù):13518219792
你可以在 Chrome 網(wǎng)上應(yīng)用店和 Firefox Addons 中找到 Angular DevTools。
安裝 Angular DevTools 后，在瀏覽器 DevTools 的 Angular 選項(xiàng)卡下找到擴(kuò)展。
打開(kāi)擴(kuò)展程序時(shí)，你還會(huì)看到另外兩個(gè)選項(xiàng)卡：
|
選項(xiàng)卡 |
詳細(xì)信息 |
|---|---|
組件 | 允許你瀏覽應(yīng)用程序中的組件和指令并預(yù)覽或編輯它們的狀態(tài)。 |
環(huán)境配置器 | 讓你分析你的應(yīng)用程序并了解變更檢測(cè)執(zhí)行期間的性能瓶頸是什么。 |
在 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)用程序的組件樹(shù)。
組件樹(shù)顯示應(yīng)用程序中組件和指令之間的層次關(guān)系。選擇組件或指令實(shí)例時(shí)，Angular DevTools 會(huì)提供有關(guān)該實(shí)例的其他信息。
查看屬性
單擊組件瀏覽器中的各個(gè)組件或指令，以選擇它們并預(yù)覽其屬性。Angular DevTools 在組件樹(shù)的右側(cè)顯示其屬性和元數(shù)據(jù)。
可以使用鼠標(biāo)或下列鍵盤(pán)快捷鍵在組件樹(shù)中導(dǎo)航：
|
鍵盤(pán)快捷方式 |
詳細(xì)信息 |
|---|---|
向上和向下箭頭 | 選擇上一個(gè)和下一個(gè)節(jié)點(diǎn) |
左右箭頭 | 折疊和展開(kāi)節(jié)點(diǎn) |
要通過(guò)名稱(chēng)查找組件或指令，請(qǐng)使用組件樹(shù)上方的搜索框。要導(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 的審查器中打開(kāi) “Elements” 選項(xiàng)卡，然后選擇關(guān)聯(lián)的 DOM 節(jié)點(diǎn)。
導(dǎo)航到源碼
對(duì)于組件，Angular DevTools 還允許你導(dǎo)航到源碼選項(xiàng)卡中的組件定義。選擇特定組件后，單擊屬性視圖右上角的圖標(biāo)：
修改屬性值
與瀏覽器的 DevTools 一樣，屬性視圖可讓你編輯輸入屬性、輸出屬性或其他屬性的值。右鍵單擊屬性值。如果此值類(lèi)型可使用編輯功能，則將看到一個(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)的指令和/或組件，并允許你在組件樹(shù)中選擇相應(yīng)的元素。
剖析你的應(yīng)用程序
Profiler 選項(xiàng)卡使你可以預(yù)覽 Angular 變更檢測(cè)的執(zhí)行。
通過(guò) Profiler，你可以開(kāi)始進(jìn)行剖析或?qū)氍F(xiàn)有的剖析記錄文件。要開(kāi)始對(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í)層次。
分層視圖
你也可以在類(lèi)似火焰圖的視圖中預(yù)覽變更檢測(cè)的執(zhí)行情況。該圖形中的每個(gè)圖塊代表屏幕上渲染樹(shù)中位于特定位置的元素。
比如，如果在組件樹(shù)中特定位置的一個(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 文件并將其保存到磁盤(pán)。然后，你可以通過(guò)單擊 Choose file 輸入框來(lái)將此文件導(dǎo)入到剖析器的初始視圖中：
新聞標(biāo)題：創(chuàng)新互聯(lián)Angular教程：Angular開(kāi)發(fā)者工具
分享路徑：http://m.fisionsoft.com.cn/article/dhiejjp.html
