著作一覧 |
めんどうくさい(からみが複雑怪奇な)Webアプリケーションのデバッグをalertベースでやっていたら、F12を叩くんだという声が聴こえて来た。
で、叩いてみたら、えらくうまくできたデバッガが起動して結構、感動した。
・パーシャルHTMLを山ほど食ってDOMのお化けを作るタイプのWebアプリケーション
→デバッガ無しだとソースを表示しても何もわからないが、IE9のデバッガのHTMLビューはDOMの要素単位にきれいにノードが整理されて見える
・同じくパーシャルHTML(JS)単位に山ほどJavaScriptが振ってくる
→個々のJavaScriptは、ドロップダウンリストから定義元のファイル名を選択するとすぐ見える。
上記から、デバッグをうまく実行するには次のような手順となる。
・とりあえず、デバッグしたい箇所までアプリケーションを走らせる。
その時点でF12でデバッガを開く。
そこで、JavaScriptにブレークポイントをしかけたりしておく。
IEをとにかくバックキーを叩くなり、リフレッシュしまくるなりして最初のHTMLまで戻す(URIを叩けば済むのならそれでもOK)。そこまでのDOMやJavaScriptが消えてもデバッガはファイルと位置を覚えているのでブレークポイントは有効なまま。
・デバッガの「デバッグ開始」をクリック。
・必要なら、^Rでキャッシュリフレッシュを呼び出して「Y」を叩く(JavaScriptやCSSを修正した場合はやるべき。場合によってはブレークポイントがずれるがしょうがない)。
IEでアプリケーションを操作する。
ブレークポイントで止まる。
ジェズイットを見習え |