該擴(kuò)展安裝到 Chrome 瀏覽器之后，Chrome 開發(fā)者工具會(huì)多出一個(gè)標(biāo)簽頁：

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

在 Component 面板里雙擊某個(gè)節(jié)點(diǎn)，就能自動(dòng)在 Angular UI 上將其對(duì)應(yīng)的 DOM 節(jié)點(diǎn)高亮出來：

效果如下圖所示：

能查看 Angular 當(dāng)前版本：

點(diǎn)擊該圖標(biāo)，能直接查看 Component 的實(shí)現(xiàn)源代碼：

可以直接對(duì) @Input 屬性做編輯，并立即得到結(jié)果。

看一個(gè)例子：

下圖 Popover 對(duì)話框，右上角具有一個(gè) close 按鈕。

這個(gè)按鈕顯示與否，通過 Directive 實(shí)現(xiàn)的 cxPopoverOptions 這個(gè) input 屬性的 displayCloseButton 字段指定：

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

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。