如何在 chrome 開發工具中使用監視表達式來監視角度組件中的變量（“this”對象的屬性）？

Question

我正在嘗試調試 Angular 6 組件中的屬性。 自然地，它在代碼中通過this變量 -> this.model被調用。 我目前正在調試它，並希望將它添加為 Chrome 開發工具中的監視表達式，以便我可以通過代碼的執行看到它是如何變化的。 我嘗試僅將this.model添加為監視表達式，但它返回未定義，因為this指的是沒有model屬性的window對象，因此我的監視表達式undefined 。

觀看this.model的正確方法是this.model ？

Answer 1

由於代碼在執行時被轉譯為 js，因此this的引用發生了變化。 您可以改為觀看_this 。 它將為您提供要調試的組件/服務的實例。

Answer 2

使用占卜

它記錄所有控制器變量。

Answer 3

通過使用生命周期鈎子DoCheck還有一種替代方法，但有點復雜。 它不斷調用自定義更改檢測函數ngDoCheck() 。

因此，在您的組件類中創建此函數並在其中添加console.log 。 例如：

ngDoCheck() {
    console.log(this.numberGiven);
  }

最后，只要您想查看此圖像中顯示的任何變量，只需在此函數中添加一個斷點即可。