2017-10-05 36 views
0

如果我有一個AngularJS應用程序,並且我在Chrome開發工具的Elements選項卡中看到這個<li ng-show="vm.CanUse('a-b-c')" ng-class..,有沒有一種方法可以快速方便地導航到CanUse函數的定義?如何輕鬆知道在Chrome開發工具中定義或實現函數的位置?函數在AngularJS屬性中使用

我知道我可以使用ctrl-shift-F在Source選項卡中進行搜索,但是如果我有大量使用該函數的文件或具有多個具有相同名稱的實現,則可能需要我花一些時間才能找到我想要的實現。

我試過這樣的:<li ng-show="debugger;vm.CanUse('a-b-c')" ng-class..希望打入調試器,但它沒有工作。

有什麼建議嗎?

+0

您可以直接添加「調試器」在源代碼中CanUse()的每個定義的頂部(可能你已經意識到了這一點)?但是,不,使用「調試器」嵌入表達式將無法正常工作,因爲這是有限的JavaScript。 –

+0

那麼..如果我知道這是什麼文件,我不會需要這個問題。我可以在CanUse定義的每個文件中放置一個斷點。 –

回答

2

對於這種類型的作用域級別調試,有一種稱爲Batarang的特殊AngularJS調試擴展。但是,它需要一個插件。

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk

一旦你在 「元素」 窗格中,單擊功能定義。接下來,點擊$ scope選項卡。然後「顯示功能定義」。見下圖。

從那裏你應該可以點擊一個「藍色斷點」(左邊界,靠近行號)進行調試。

執行該功能(單擊按鈕等),調試器應停止在該功能。

enter image description here

相關問題