フルスクラッチでWebアプリケーションを開発している場合でしたら自分で作った関数が
どこにあるかすぐにわかると思いますが、前任者の書いたソースの引き継ぎや、
オープンソースソフトウェアのカスタマイズ作業を行うときに呼び出している関数が
一体どのJavaScriptファイルに記述されているか探したくなるときがあると思います。
読み込んでいるファイルが2,3個ならひとつひとつ手作業で検索していくこともできるかもしれませんが、いくつものJavaScriptを読み込んでいる場合は大変な作業です。
例えば以下の様なボタンにfoo()という関数が結び付けられている場合はどうするか。
本当はビューと切り離した形でイベントハンドラを設定するべきですが・・・。
<input type="button" value="押してください" onclick="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
投稿者紹介
-
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。
最近のエントリ
レポート2019.10.28ユニキャストレストランを開催しました🍳
レポート2019.08.29社内研修ワークショップ～マシュマロ・チャレンジ～
レポート2019.08.06Computex/InnoVEX 出展者・通訳として参加してきました。
レポート2018.06.12Computex 2018 レポート