web-dev-qa-db-ja.com

特定のイベントで実行されているJavascriptを見つけるにはどうすればよいですか？

この例では、Chromeを選択しますが、どのブラウザーからでも解決策を受け入れます。

ユースケース：ショッピングカート内の商品の数量を更新するために使用する更新ボタンがWebサイトにあります。ユーザーが0を入力して[更新]をクリックしてアイテムを削除できるようにします。問題は、0を入力して更新をクリックする機能を拒否しているjs関数のリスナーが存在することです（更新をクリックすると、古い数量が残ります）。

私の質問は、そのイベント中に実行されているjs関数を見つけるためにどの開発ツールを使用できますか？ Chromeのインスペクターがこれを行うとは思わず、Firebugにはあまり詳しくありませんが、その機能もそこに見つかりませんでした。

CSSのスタイリングと同じように、JSの発火を検査できるはずです。誰かが私が使用するツールを知っていますか？

javascriptgoogle-chromefirefoxfirebugweb-inspector
25
jesuis

私の仕事では、特に厄介な目に見えないJavascriptの問題をデバッグする必要がありました。 Chromeのようなデベロッパーツールの詳細を知ることは間違いなく役立ちます。問題を引き起こしている可能性のある場所を見つけるには、ある程度の創造性が必要ですが、いくつかのヒントがあります。

イベントリスナーの追跡

Chromeの要素ビューで、要素の検査（右クリック、検査）を試してください。次に、開発者ビューの右側で、イベントリスナーまでスクロールします。ここでは、イベントをフックしたコードファイルを表示できます。多くの場合、これはあなたが探している本当に不正なコードの中間フレームワークを指し示しますが、時には正しい方向を指し示します。

DOM変更のトラップ

私が見る望ましくない効果の多くは、私が欲しくないページ上の値や属性を変更する何かが原因です。このような場合はいつでも、エレメント（エレメントビューの下）を右クリックして、「Break on ...」と探している特定のシナリオを言うことができます。 Chromeがブレークポイントに達すると、呼び出してはならない認識可能なものが見つかるまで、スタックトレースを下に向けることができます。

10票に達した後に編集します！

JSオブジェクト変更のトラップ

興味のある変更がUIではなくコード内部である場合、事態は複雑になります。このシナリオの意味するところは、コードのどこかを知っているということです。次のような非常に厄介なことが起こっています。

company.data.myObject.parameter = undefined;

この状況では、myObjectはまだ同じオブジェクトであることがわかりますが、おそらく意図せずに変更されています。そのために、私はしばしば次のコードを挿入します。時には、変更が行われる前のある時点で開発者コンソールを介して挿入します。

Object.defineProperty(company.data.myObject, 'parameter', {
  set: (val) => {
    debugger;
  }
});

これには矢印関数が含まれます-デバッグにのみこれを使用しており、Chrome=はそれをサポートしているため、キーストロークも節約できます。 myObjectの "parameter"プロパティを変更しようとします。特定の値を持つ前のブレークポイントからこのコード行を実行できる場合は、必ずしも変数へのグローバル参照を持つ必要はありません。ローカルのオブジェクト。

それ以外の場合、最初にHTMLコードのみを使用し、それをJavascriptコードに結び付けたい場合、「id」要素などの識別機能を探し、開発ディレクトリ内のすべてのJSファイルを検索します。それ。通常、私はそれにかなり速く到達できます。

37
Katana314
  1. Firebugを有効にしてFirefoxでページを開きます。
  2. Firebugのコンソールタブに移動し、プロファイリングをクリックします
  3. テキストボックスに0を入力して、ボタンをクリックします。
  4. プロファイリングを停止します。
  5. あなたのアクションのために実行されたすべてのjavascript関数を見ることができます。それらを1つずつ表示して、どのメソッドがいたずらを引き起こしたかを把握できます。
6
Devendra Bhatte

あなたのコードに行きます。 jqueryを使用している場合、その特定の更新ボタンのクラスまたはIDで呼び出される関数があります。 OR javascriptを使用している場合は、

これは、呼び出されている関数を探す2つの方法です。私が知っているソフトウェアはありません

1
Ideal Bakija

Mozilla FirefoxのFirebugをダウンロードして開き、NetをクリックしてWebサイトを更新します。より、ページにロードされているファイルを確認できます。

エラーと説明の問題を確認する場合は、consoleをクリックしてページをもう一度更新してください。エラーが表示され、どの行でエラーが発生します。

注：consoleでholdまたはstopと言うと、jsファイルの読み込みが停止します。また、Firebugでscriptをクリックしてスクリプトを編集できます。公式ページにあるように、デバッグは簡単です https://getfirebug.com/javascript

0
Johan