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