Google Chrome Developer ToolsでJavaScript関数が定義されているファイルの場所を探る


この記事の所要時間: 139

フルスクラッチでWebアプリケーションを開発している場合でしたら自分で作った関数が
どこにあるかすぐにわかると思いますが、前任者の書いたソースの引き継ぎや、
オープンソースソフトウェアのカスタマイズ作業を行うときに呼び出している関数が
一体どのJavaScriptファイルに記述されているか探したくなるときがあると思います。

読み込んでいるファイルが2,3個ならひとつひとつ手作業で検索していくこともできるかもしれませんが、いくつものJavaScriptを読み込んでいる場合は大変な作業です。

例えば以下の様なボタンにfoo()という関数が結び付けられている場合はどうするか。
本当はビューと切り離した形でイベントハンドラを設定するべきですが・・・。

Ctrl+Shift+IでGoogle Developer Toolsを起動します。
Scriptsタブを開きます。
右上の検索ボックスに入力したくなりますが、選択されている1つファイルの中しか検索できないので、あまり役に立ちません。
Ctrl+Shift+F(Macの場合はCmd+Option+Fらしいです)をタイプすると下からニョキッと検索するエリアが出てくるので、ここで検索したい単語を入力します。
この検索ウィンドウを使うとすべてのファイルを横断的に検索してくれるのでとっても便利です。
しかも、検索結果をクリックするとその場所にジャンプしてくれるのでさらに便利。
(ショートカットはわかるのですが、どのボタンからこの機能を起動したらいいのかわからないので、知っている人は教えてください)

参考

firebug – How to search all loaded scripts in Chrome Developer Tools? – Stack Overflow

投稿者紹介

株式会社ユニキャスト
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。

人気の記事

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP