WEBアプリケーションのデバッグ

[programming]

とりあえず、思いつくことを並べておきます。(随時加筆予定)

サーバ側

  • デバッガを使える環境を用意しておくこと。
    • printデバッグは使わない。ブレイクはって、ステップ実行、変数参照など、デバッガを使うこと。

クライアント側(ブラウザのデフォルト機能で)

  • ブラウザのソース表示でHTMLの内容を確認。
    • 右クリック→「ソースの表示」みたいなので。
    • フレームの場合、表示したいフレームを指定しないとダメなので、注意。
      • IEだと、クリックした位置。Firefoxだとクリックした位置で「このフレーム」→「フレームのソース表示」で。
  • JavaScriptのエラーを確認
  • IE8からは、開発ツールが組み込まれており、JavaScriptのデバッグや、HTMLの構造の確認などといったことが出来る(Firebugにかなり近づいている)

Firefoxのアドオン

  • Firebug(http://getfirebug.com/)
    • 定番。
    • インストールするとconsoleオブジェクトが組み込まれる。各ページでも使用できる。
    • コンソールタブ
      • JavaScriptが実行できる。
      • TABキーで補完してくれる。
      • 他にも組み込みの関数が実行できる。
      • コンソール上に表示されたオブジェクトをクリックすると、HTML要素の場合は、HTMLタブに移動し、該当要素がハイライト表示される。その他オブジェクトの場合には、DOMタブに移動し、内容が表示される。
      • 「プロファイル」で、プロファイルの開始/終了。各メソッドの呼び出し回数や時間がわかる。
    • HTMLタブ
      • HTML構造を表示。現在のHTML構造が整形されて表示される
        • JavaScriptで書き換えたものも反映されるので、ソース表示とは異なる場合あり。
      • クリックした箇所が、ブラウザ上でもハイライト。「調査」を押下し、ブラウザ上でクリックすると、該当箇所がFirebug上でもハイライト。
      • 動的に変わった箇所は、色が変わって強調表示される。
      • 選択した要素の情報を、「スタイル」、「レイアウト」、「DOM」で表示。
        • 「スタイル」
          • どのCSSで記載されたスタイルが効いているかわかる。
          • オプションの「算出されたスタイルを表示」を選択すると、ブラウザのデフォルトスタイルを含めたものが表示。
        • 右クリックで、スタイルを追加できる。
          • スタイル追加時にも補完が効く。
        • 「レイアウト」
          • 選択している要素のレイアウト(offset/margin/border/paddingと要素自体の高さと幅)が確認できる。
          • 選択した部分が、ブラウザ上でも表示。
          • オプションで「定規と罫線を表示」としておくと、ブラウザ上の対応箇所に定規と罫線が表示され、細かいサイズが確認しやすくなる。
        • 「DOM」
          • 選択している要素情報(プロパティ、関数など)が表示される。
          • プロパティの内容を編集可能。
          • オプションで、表示する情報の範囲を変えられる。
      • 要素を右クリックで、いろんなことが出来る。
        • 要素の内容(XPath、innerHTMLなど)のコピー
        • 要素の削除
        • 属性の追加
        • HTMLとして編集(メニューの編集をクリックした場合と同じ)
        • などなど、、
      • 要素のテキストや属性は、そのままダブルクリックで編集可能となる
    • CSSタブ
      • CSSが表示。
      • CSSファイルの切り替えは、メニューの一番右の部分で切り替えられる。
      • プロパティの追加、削除、変更も可能。
    • スクリプトタブ
      • JavaScriptのデバッグが行える。
      • 行番号の左をクリックでブレイクポイントを設定。
      • 「監視」にて、各変数の情報が参照できる。そこで各変数の内容を書き換え可能。
      • 「スタック」にて、スタックトレースが確認できる。
    • DOMタブ
      • HTMLの「DOM」と同じなので割愛。
    • 接続タブ
      • HTTP(S)の内容(リクエストヘッダとレスポンスのヘッダ/ボディ)とかかった時間を参照できる。
      • Ajaxなどのバックバックグラウンドによる通信内容も参照可能。

IEのプラグイン

  • DebugBar(http://www.debugbar.com/)
    • IEでFirebugみたいなのを。
      • DOM Inspector、HTTPモニタ、JavaScriptコンソールとか
      • といっても、肝心なJavaScriptデバッガは無い
  • Companion.JS(http://www.my-debugbar.com/wiki/CompanionJS/HomePage)
    • スクリプトエラー時にエラーメッセージと、エラー箇所のハイライト
    • スタックトレースも見やすく表示
    • console.logを提供(というか、これ以外はScript Editorなどでも参照できるものなので、あまり使わないか)
  • IE8からは、組み込みの開発ツールが上記を全てまかなっているので、プラグインを入れる必要はなさげ。

その他アプリ

まとめ

  • Firefox
  • IE(7以前)
    • JavaScriptのデバッガとして、Microsoft Script Editor(もしくはVisualStudioなど)
    • DOM、HTML構造の確認としてDebugBar
  • IE(8)
    • 組み込みの開発ツールで
  • リクエスト/レスポンスをモニタしたり、書き換えたい場合には、Fiddler