既存のコードの理解が捗るChrome DevToolsの使い方
jQuery系ライブラリによるDOM操作が中心のプロジェクトにがっつり機能を追加する機会があった。
そのJavaScriptのコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計、実装方針について共有を受けたが、それでもいざ手を入れようとすると自分自身のコードの理解が進んでおらず「えーっと...」となってしまった。
上記以外にも、長年、多くの人が触れてきたJavaScriptのコードに機能を追加する、修正するのはなかなか難しいのではないか、と思う。最初は、ちょっとしたユーザビリティの向上のために書かれたスクリプトが、気がつけば多数のDOM操作、至る所で宣言される変数、どこから実行されるか分からない関数群で無秩序に膨れ上がり、頭を抱えることになる(そうならないようにするのがウェブフロントエンジニアがいるひとつの理由ですが…)。
これらのケースでは、まずは修正、あるいは追加する機能に関連するコードを見つけて橋頭保とすることが肝要ではないだろうか。自分の場合は、Chrome DevToolsのいくつかの機能を利用し、ページに触れる、コードを動かすことで、コードの理解が捗ったので紹介したい。
ボタンが押されたら実行されるコードを特定する
「ボタンが押されたら、どの関数が実行されるんだろう」と思った時に使える方法。(「ボタンが押されたら」はあくまで例えで、あらゆる要素・イベントで汎用的に使える方法)
言い換えるとボタンの要素に登録されているイベントリスナーを知りたい。
DevToolsを開いて、Elementsタブでボタンの要素を選択する。サイドバーのEvent Listenersタブで選択した要素に関連するイベントリスナーを確認することができる。各イベントリスナーの項目には、イベントリスナーが登録されたJavaScriptのコード位置へのアンカーがある。これをクリックすることで、ボタンが押されたら実行されるコードを調べることができる。
また、ConsoleタブからコマンドラインAPI、getEventListenersを使って調べることもできる。選択している要素は$0で参照できるのでgetEventListeners($0)を自分はよく使う。
DOM操作をおこなっている箇所を特定する
「この要素、どこで変更されているんだろう」と思った時に使える方法。
DevToolsでは、DOMの変更をトリガーにBreakpointを設定することができる。Elementsタブで対象の要素を選択する。右クリックすると、Break on...というメニューがあり、さらにそこから設定したい変更内容(サブツリーの変更、属性値の変更、ノードの削除)を選ぶことができる。
Breakpointを設定して、画面に触れると、DOM操作が起きたタイミングで処理が一時停止する。これでDOM操作がJavaScriptのどの箇所で行われているか把握することができる。
XMLHttpRequestをおこなっている箇所を特定する
Networkタブを見ていて「このXHRの通信、どこでやってるんだろう」と思った時に使える方法。
DevToolsでは、XHRをトリガーにBreakpointを設定することができる。Sourcesタブを選択して、サイドバーのXHR BreakpointsでURLの部分マッチで指定する。DOM操作同様に後は通信が発生するような操作を行えば、JavaScriptのどの箇所でXHRがおこなわれているか把握することができる。
コードがminifyされていたら
コードを特定して、Sourcesタブで表示したら、minifyされていて結局わからん、ということもある。{}ボタンを押すとminifyされているコードをprettyprintしてくれる。あるいは、自身でコントロールしているスクリプトであれば、CharlesなどのLocal Debugging ProxyでminifyされていないものをLocal Proxyするとよいだろう。あるいは、sourcemapを利用する。
まとめ
Chrome DevToolsのコマンドラインAPIやBreakpointを中心に、既存のコードの理解を助けるTipsを紹介した。意外と様々なイベントをトリガーにBreakpointを設定できる。後はそのBreakpointで特定したコードを橋頭保にJavaScriptコード自体にBreakpointを設定したり、周辺のコードを読み進めていくと良い気がする。
追記
Angular.js、React.js、Vue.jsのようなフレームワーク/ライブラリを利用している場合は、DOM操作やDOM要素へのイベントリスナーの登録がフレームワーク/ライブラリに隠蔽されているので、公式が提供している開発を補助するChrome extension( Reactだったら React Developer Tools - Chrome Web Store、Vueだったら Vue.js devtools - Chrome Web Store )を導入したほうがよいでしょう。
