Chrome Devツールで関数が定義されているか実装されているかを簡単に知る方法は？関数がAngularJS属性で使用されている

Question

AngularJSアプリを持っていて、Chrome開発ツールのElementsタブにこの<li ng-show="vm.CanUse('a-b-c')" ng-class..が表示されている場合、CanUse関数が定義されている場所にすばやく簡単に移動する方法はありますか？

[ソース]タブでctrl-shift-Fを使用して検索できますが、関数を使用するファイルがたくさんある場合や、同じ名前の実装が複数ある場合は、検索に時間がかかることがあります私が望む実装。

私はこのようなものを試しました：<li ng-show="debugger;vm.CanUse('a-b-c')" ng-class..デバッガに侵入すると予想されますが、動作しませんでした。

提案がありますか？

Answer 1

このタイプのスコープレベルのデバッグには、Batarangという特殊なAngularJSデバッグ拡張機能があります。ただし、プラグインが必要です。

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

あなたは "要素" ペインになったら、関数定義をクリックします。次に、$ scopeタブをクリックします。次に、 "関数定義を表示"します。下の画像を参照してください。

そこから、デバッグのために「青いブレークポイント」（左余白、行番号に近い）をクリックすることができます。

関数（実行ボタンなど）を実行すると、デバッガはその関数で停止する必要があります。