天天看點

一個用于 Angular 開發的 Chrome 擴充 - Angular Dev Tools

該擴充安裝到 Chrome 浏覽器之後,Chrome 開發者工具會多出一個标簽頁:

一個用于 Angular 開發的 Chrome 擴充 - Angular Dev Tools

可以在 Component 面闆裡檢視 Component 的屬性,或者直接對其修改:

一個用于 Angular 開發的 Chrome 擴充 - Angular Dev Tools

在 Component 面闆裡輕按兩下某個節點,就能自動在 Angular UI 上将其對應的 DOM 節點高亮出來:

一個用于 Angular 開發的 Chrome 擴充 - Angular Dev Tools

效果如下圖所示:

一個用于 Angular 開發的 Chrome 擴充 - Angular Dev Tools

能檢視 Angular 目前版本:

一個用于 Angular 開發的 Chrome 擴充 - Angular Dev Tools

點選該圖示,能直接檢視 Component 的實作源代碼:

一個用于 Angular 開發的 Chrome 擴充 - Angular Dev Tools

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

看一個例子:

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

一個用于 Angular 開發的 Chrome 擴充 - Angular Dev Tools

這個按鈕顯示與否,通過 Directive 實作的 cxPopoverOptions 這個 input 屬性的 displayCloseButton 字段指定:

一個用于 Angular 開發的 Chrome 擴充 - Angular Dev Tools

我在 Angular Dev tools 裡将其修改成 false,這樣對話框裡就沒有 close 按鈕了:

一個用于 Angular 開發的 Chrome 擴充 - Angular Dev Tools

繼續閱讀