該擴展安裝到 Chrome 瀏覽器之后，Chrome 開發者工具會多出一個標簽頁：

可以在 Component 面板里查看 Component 的屬性，或者直接對其修改：

在 Component 面板里雙擊某個節點，就能自動在 Angular UI 上將其對應的 DOM 節點高亮出來：

效果如下圖所示：

能查看 Angular 當前版本：

點擊該圖標，能直接查看 Component 的實現源代碼：

可以直接對 @Input 屬性做編輯，并立即得到結果。

看一個例子：

下圖 Popover 對話框，右上角具有一個 close 按鈕。

這個按鈕顯示與否，通過 Directive 實現的 cxPopoverOptions 這個 input 屬性的 displayCloseButton 字段指定：

我在 Angular Dev tools 里將其修改成 false，這樣對話框里就沒有 close 按鈕了：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。