20

ポップアップ ウィンドウで実行される JavaScript コードをデバッグする最も効果的な方法は何ですか? 具体的には、ページの読み込み時に何が起こっているかを追跡する必要があります。

これは、親ウィンドウ内の他の JavaScript オブジェクトに依存する LMS で実行されている SCORM 1.2 コース用であるため、ポップアップ自体のデバッグは機能しません。

私の時間のほとんどはこれらのコースのデバッグですが、他のコンテキストにテクニックを使用することもできます。

ブラウザー内デバッガーのオプションのようなものを使用して、ポップアップ ページで実行する JavaScript の最初の行で一時停止することができます。(ページが開始されるまでブレークポイントを設定することはできません、または少なくともその方法がわかりません)

編集：

ステートメントはdebugger;機能しますが、私が制御するコードに対してのみです。ポップアップ ウィンドウが開いたときに実行される JavaScript をトレースする必要があり、コードが既に実行されているためにブレークポイントを追加できないことがあります。

4

7 に答える 7

16

魔法をかけることができます

debugger;

ステートメントを JavaScript コードの任意の場所に追加します (私が知っているすべてのデバッガーは、その行にブレークポイントを自動的に設定してそこで停止します)。

それでも解決しない場合は、「そのページを新しいウィンドウ/タブで開き」、自分でブレークポイントを設定するか、debugger;

于 2012-10-02T18:24:00.633 に答える
6

@jAndy の回答を拡張すると、Fiddler の AutoResponder が、debugger;制御できないコードにステートメントやその他の便利な呼び出しを挿入する効果的な方法であることがわかりました。

何かのようなもの：

  1. 始める前にキャッシュをクリアしてください。
  2. サイトを実行し、作業するすべてのファイルをロードできるようにします。
  3. 改ざんしたいリクエスト (デバッグしたい JavaScript ファイルなど) を特定します。
  4. そのセッションを Fiddler からローカル ファイルにエクスポートします。
  5. ローカル ファイルを編集して、debugger;ステートメントなどを追加します。
  6. フィドラーに戻り、もう一度リクエストを選択してから、AutoResponder タブを選択します。
  7. [ルールの追加] を選択すると、デフォルトでその正確な URL の新しいルールが作成されます。
  8. 下部のコンボ ボックスで、[ファイルを検索] を選択し、改ざんしたファイルを参照します。
  9. 一番上の「自動応答を有効にする」と「一致しないリクエストのパススルー」がチェックされていることを確認してください。
  10. ブラウザでキャッシュをもう一度クリアしてから、デバッグしようとしているサイトまたはページを再起動します。

これで、ブラウザはサイトからではなくローカル バージョンのファイルをロードします。ブラウザのリモート URL をローカル ファイルに置き換える方法は他にもあるかもしれません (Charles には AutoResponder や Proxomitron のようなものがあります。それを行うためのブラウザ アドオンなどがあるかどうかはわかりませんが、Greasemonkey のようなものもあるかもしれません)。仕事）。

于 2014-08-15T00:17:37.890 に答える
2

Chrome の場合: ポップアップがまだ読み込まれている間にポップアップを読み込み、フォーカスを合わせ、すばやく F12 (開発者ツールを開く) を押してから F8 を押します。

于 2013-10-31T03:11:08.887 に答える
1

Chrome では、スクリプトの最後に追加すると、ポップアップが開いたときに Chrome の Inspect のタブに// @sourceURL=myScriptName.js読み込まれます。Sources

JavaScript のデバッグを参照してください。

また、ASP.NET MVC を使用している場合は、ファイル@{Write("//@ sourceURL=myScriptName.js");}内にあるスクリプトを追加でき*.cshtmlます。

クロム検査

于 2016-01-21T10:09:05.793 に答える
0

関数を介してコンソールに情報を出力することをお勧めしconsoleます。この情報は、Firefox の Firebug や Chrome に組み込まれているデバッグ ツールで確認できます。alertまたは、いつでもデバッグに使用できます。

それとも、あなたの質問について私は何かを理解していないかもしれません....

于 2012-10-02T18:22:58.823 に答える
0

これが私にとってうまくいくと思われる唯一の方法でした：

  --- CONTEXT: CODE EDITOR ------
  1.) Put this line at the top of the .js file to be debugged (will cause breakpoint as soon as the file is opened by the browser):
      debugger;
  2.) Push the new code to the server.   
  
  --- CONTEXT: CHROME Browser ------
  1.) Close all the Chrome browser windows except 1 window, 1 tab
  2.) Close Chrome browser (Chrome / Quit)
  3.) From the COMMAND LINE in MAC... 
      /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
      (this will open Chrome and every window / tab that opens will open the debugger)
  4.) Open Chrome browser (1 window, 1 tab appears)
  5.) Enter link where the debugger line of code was added in step 1 
        (Debugger should stop on first line of Javascript content)
于 2022-03-01T21:24:40.940 に答える