ChromeでJavaScriptの関数定義を見つける方法｜開発者ツールの検索機能を使いこなそう

Google ChromeでWebサイトのソースコードを解析していると、「このJavaScript関数はどこで定義されているのだろう？」と悩むことがあります。特に大規模なプロジェクトや、複数の外部スクリプトが読み込まれているページでは、目的の関数定義を手作業で探すのは非常に手間がかかります。

Chrome DevToolsの検索機能を使えば一瞬で見つかる

実は、Chromeに標準搭載されているデベロッパーツール（Developer Tools）には、読み込まれたすべてのファイルを横断的に検索できる強力な機能があります。以下の手順に従えば、JavaScriptの関数定義も簡単に見つけられます。

手順1：デベロッパーツールを開く

まず、Google Chromeで対象のWebページを開き、キーボードの F12 キーを押します。すると画面右側や下部に「デベロッパーツール」のパネルが表示されます。

※ Windowsの場合は「Ctrl + Shift + I」、Macの場合は「Cmd + Option + I」でも開けます。

手順2：全ファイル検索を呼び出す

次に、 Ctrl + Shift + F を押します。これにより、現在読み込まれているHTML・CSS・JavaScriptなど、すべてのリソースを対象とした検索窓が表示されます。

※ Macの場合は「Cmd + Option + F」です。

手順3：正規表現オプションを有効にする

検索ボックスの下にある「正規表現（Regular Expression）」のチェックボックスにチェックを入れます。これを有効にすると、「function」という単語だけでなく、より柔軟なパターンマッチングによる検索が可能になります。

手順4：「function」で検索する

最後に、検索ボックスに 「function」 と入力して実行します。該当する箇所が一覧表示され、各行をクリックすればそのコードの位置へ直接ジャンプできます。特定の関数名がわかっている場合は、「function 関数名」と入力すれば、よりピンポイントで定義場所を特定できます。

正規表現を使った検索例

正規表現を活用すると、さらに高度な検索も可能です。たとえば以下のようなパターンが便利です。

• function\s+getUserData … 「getUserData」という名前の関数宣言を検索
• const\s+[A-Za-z]+\s*=\s*\(.*\)\s*=> … アロー関数形式での定義を検索
• prototype\.[A-Za-z]+\s*= … プロトタイプへのメソッド追加を検索

まとめ

Chromeのデベロッパーツールを使えば、面倒なファイル間の手作業なしに、JavaScriptの関数定義を素早く見つけることができます。
手順はシンプルで、① F12でDevToolsを開く → ② Ctrl + Shift + Fで全ファイル検索 → ③ 正規表現を有効化 → ④ 「function」で検索 の4ステップだけです。
デバッグやコード解析の効率が大きく向上するので、ぜひ日常業務に取り入れてみてください。