JavaScript:関数が定義されているファイルと行数を調べる-Chromeデベロッパーツールで快適生活

イントロダクション

Web ページ内で使用している JavaScript の関数が、どのファイルの何行目に書かれているのか、知りたい場合がありますよね。


ソースコード全てが手元にあり、開発ツールもインストールされていれば、すぐにそれらを調べることが出来ます。

しかし、ソースコードが全て他者のWebサーバ上にあり、手元にChromeしかない場合にはどうしたらよいのでしょうか？


その場合、Chrome のデベロッパーツールを使えば、簡単にこの問題を解決できます。

JavaScriptの関数が定義されているファイルと行数をChrome のデベロッパーツールを使って調べる

調べ方は簡単です！

どこに定義されているのか知りたい関数の名前を、Chrome のデベロッパーツールのコンソールに打ち込むだけです！

Chrome のデベロッパーツールの Console に、
定義されているファイル名と行数を知りたい関数名を打ち込む

すると、定義されているファイル名と行数、関数内のコードが
コンソールに表示される

この例では、pre_openNewWindow_fromPreArray という名前の関数の定義されているファイル名と行数を調べています。

pre_openNewWindow_fromPreArray　とコンソールに打ち込み、エンターを押すと、次のように表示されます。

pre_openNewWindow_fromPreArray[エンター]

blogger-popular-post-change-advance.html:3538 
function pre_openNewWindow_fromPreArray(a){pre_openNewWindow(preArray[a])}

これで、pre_openNewWindow_fromPreArray が 、「blogger-popular-post-change-advance.html」の3538 行目に定義されているということがわかりました。

更に、関数が定義されている場所に簡単ジャンプ！

なお、そのファイル名と行数の部分をクリックすると、デベロッパーツールの「Source」タブで実際にその定義されている部分を表示させることができます。

Console に表示されたファイル名と行数をクリックすると、
その関数が定義されているファイルの箇所を表示することができる

まとめ

このように、Chrome のデベロッパーツールを使用すると、Web サーバ上にあるファイルに対しても、関数の定義されているファイル名と行数を簡単に探し出すことができます。

是非、この機能を活用して、JavaScript による開発を快適に行えるようにしていきましょう！