web-dev-qa-db-ja.com

Chrome DevToolsはウェブサイト内のすべてのjavascriptファイルを検索します

私は、CDNからJavascriptを読み込む新しいクライアントのWebサイトで作業しているため、JavascriptはWebページのソースに埋め込まれていないか、インラインではありません。 getCurrentPosition()が実行されるたびに一時停止したい含まれる外部JSファイルを判別するため.

他のツールを使用してJSファイルの内容を文字列検索することはできますが、Chromeのデバッグツールを使い続けたいと思います。

ウォッチ式を作成しようとする必要がありますか、特定のJS関数がいつどこで起動されるかを特定する別の方法がありますか？

javascriptgoogle-chromedebugginggoogle-chrome-devtools
22
sparecycle

Chrome DevToolsを使用して、すべてのファイルを検索できます。関数を見つけてデバッグします。

  1. DevTools（F12）を開きます
  2. [ソース]タブに移動
  3. ctrl + shift + f（Win）またはcmd + option + f（Mac）を押して[すべてのファイルの検索]を開きます
  4. 検索getCurrentPosition
  5. ブレークポイントを置きます（行の左側の行番号をクリックして）

enter image description here

46
Jaqen H'ghar
  1. Google Devツールを開きます（F12）
  2. Ctrl + pを押す

開いたボックスで、すべてのファイル（JS、CSS、...）を検索します。

search all files in javascript

ボックスには5つのオプションがあります。

enter image description here

  1. 「ファイル名」と入力して選択します。
  2. 「：linenumber」と入力して特定の行番号に移動します（「：10」は行10に移動します）。

  3. 「@symbol」と入力して特定のシンボルに移動します（「@TestSymbol」はTestSymbolシンボルに移動します）。

    このオプションでは、@ JSFunctionNameまたは@CSSClassNameを記述すると、カーソルはJSFunctionNameまたはCSSClassNameに移動します。

  4. 「！snippet」と入力して、特定のスニペットに移動します（「！snippetTest」はsnippetTestスニペットに移動します）。

  5. 「> googleCommand」と入力して、特定のコマンドに移動します（「>コンソールのクリア」でコンソールをクリアします）。

オプション2〜5を使用するには、ファイルを選択します。

11
Iman Bahrampour

必要な情報はすべてウェブページで見つけることができます： https://developer.chrome.com/devtools/docs/javascript-debugging

enter image description here

置くだけで（Webページからコピー）

Google ClosureホバーカードのデモページやTodoMVCなどのサイトを開きます

  1. Google ClosureホバーカードデモページやTodoMVC Angularアプリなどのサイトを開きます

  2. DevToolsウィンドウを開きます。

  3. まだ選択されていない場合は、「ソース」を選択します。

ブレークポイントを使用したデバッグ

ブレークポイントは、スクリプト内の意図的な停止または一時停止の場所です。 DevToolsのブレークポイントを使用して、JavaScriptコード、DOM更新、およびネットワーク呼び出しをデバッグします。

ブレークポイントの追加と削除[ソース]パネルで、デバッグ用のJavaScriptファイルを開きます。以下の例では、AngularJSバージョンのTodoMVCからtodoCtrl.jsファイルをデバッグしています。

Gutter行をクリックして、そのコード行にブレークポイントを設定します。青いタグは、ブレークポイントが設定されているかどうかを示します。

enter image description here

上記の簡単な例では、関数getCurrentPosition()を実際に「停止」してデバッグできます。

0
John Skoumbourdis

1つの方法は、Geolocation.getCurrentPositionメソッドにラッパー関数を設定して、その中にブレークポイントを設定し、スタックを調べて誰が呼び出しているかを確認できるようにします。

0
Evan Wise

コードのどこでメソッドが呼び出されるかがわかっている場合は、 ブレークポイントの設定 を使用できます。これにより、実行時にjavascriptの実行が一時停止され、スタックトレースを取得できます。

0
Daniel Lizik