Webアプリ開発に利用するデバッグ機能等まとめ(仮) - ndruger @ ウィキ

Webアプリ開発に利用するデバッグ機能等まとめ(仮)。まずFirefoxとChromeのみ記述。後で他の奴も書く。
分類が適当なので後で開発環境という形でまとめなおす。

ブレークポイントの設定

ソースコードの特定の行

Firefox, Chrome共に条件付きのブレークポイントが指定可能

FX

• Firebug

Chrome

• Chrome Developer Tools

ソースコード

debuggerステートメントを書くと開発ツールを開いているときはそこで止まる

function a() {
  debugger;  // ここで止まる
}
a();

DOMツリーの変更

Firebug, Chrome共にツリーの操作、属性の変更に対してBPの指定が可能。

FX

• Firebug
  • https://getfirebug.com/doc/breakpoints/demo.html#html

Chrome

• Chrome Developer Tools
  • https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#dom

JavaScriptオブジェクトプロパティアクセス

値の変更時のBPはFirefox, Chromeともに指定可能。取得時のBPに関してはソースコードを修正する必要がある。

Firefox

• Firebug
  • 値の変更時に可能

Chrome

• Chrome Developer Tools
  • 値の変更時に可能

ソースコード

• 対象のプロパティの___defineGetter__, __defineSetter__を定義して、それらの関数にdebuggerステートメントを記述する

XHR

Firefox, Chromeともに可能。

Firefox

• Firebug
  • https://getfirebug.com/doc/breakpoints/demo.html#net

Chrome

• Chrome Developer Tools
  • https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints?hl=ja#xhr

ソースコード(todo)

例外(todo: Firebug)

Firefoxだとリロードしても有効な例外でのブレークポイントが張れない？もう少し調査。

Chrome

• Chrome Developer Tools
  • https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints?hl=ja#js_uncaught

DOMイベント

Chrome

• Chrome Developer Tools
  • https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints?hl=ja#listeners

再描画の範囲・回数の確認

パフォーマンスに影響するリフローやリドローが、期待の範囲・回数になっているかどうか確認するために利用する。

Firefox

拡張機能のFirebug Paint Eventsを入れて、about:configでdom.send_after_paint_to_contentを有効にするとFirebugのPaintsタブで確認することが出来る。

Chrome

• Chrome Developer Tools
  • TimelineタブでRecordをして記憶した後で、Eventsのラインをクリックするとイベントが一覧で表示される。Paintイベントにマウスをホバーすると描画領域が視覚的に表示される。

ページ読み込み時間のチューニング(todo: タイムラインの説明を追記)

Firefox, Chrome共にPage Speed Insights(Google), YSlowが拡張機能にある。

ソースコード(todo: w3cのNavigation Timingの動作確認)

圧縮されたJavaScriptの整形(Pretty Print)

Firefox

• 拡張機能のJavascript Deminifierを入れて、ステータスバーの"JSD OFF"をクリックして"JSD ON"にしてリロードすると、Firebugのスクリプトタブで表示するJavaScriptが整形される

Chrome

• Chrome Developer Tools
  • Sourcesタブの{}をクリック。リロードしても有効

CPUプロファイラ

Firebug, Chrom Developer Tools共に開発ツールでプロファイルが可能。

ソースコード

• console.profile()とconsole.profileEnd()を使って、ソースコードから特定の間のプロファイルを取ることが出来る。

  function some(a) {
  	return a + a^2 - a*2;
  }
  console.profile();	// プロファイル開始
  var sum = 0;
  for (var i = 0; i < 100000; i++) {
    sum = some(sum);
  }
  console.profileEnd();	// プロファイル終了
  

DOMツリーの特定の要素を見つける

Firefox

• Firebug
  • マウスのクリックで要素を見つける
    • 省略
  • CSSセレクタで要素を見つける
    • コンソールから$$('セレクタ')

      $$('#a')
      

• 拡張機能のTiltを利用すると3Dで要素を見つけられる

Chrome

• Chrome Developer Tools
  • マウスのクリックで要素を見つける
    • 省略
  • CSSセレクタで要素を見つける
    • コンソールからinspect($('セレクタ'))

      inspect($('セレクタ'))
      

ページのメモリ利用量やリークのチェック

Firefox

簡単にはできないっぽい。 about:memoryではタブごとではなく全体のメモリ利用量が表示される。Firebugのメモリプロファイラも1.10.3の時点で動かない。

Chrome

• about:memoryでタブごとの利用量の確認が可能
• Developer ToolsのTimelineタブでメモリ利用量・リスナーの数・要素の数の時系列のグラフを取得可能
• Developer ToolsのProfileタブのTake Heap Snapshotにてより詳細な情報を取得可能
  • 要素をDOMツリーからremoveしたが、意図せずにJavaScriptの変数が参照を持ってしまう場合のリークなどは、メインのDOM Treeに繋がってない要素の一覧が"Detached DOM tree / 2 entries"に現れるので、そこから発見できる。

    (function() {
      var ele = document.createElement('div');
      document.body.appendChild(ele);
      document.body.removeChild(ele);
      window.globalLeakMaker = ele;	// 意図せぬ要素の参照保持による要素のリーク
    })();
    

• –enable-memory-infoのオプション(todo: 記述)

ソースコード(todo: オブジェクトリークチェッカーの実装を記述)

スタックトーレスの確認

ソースコード

• console.trace()
• 例外.stack
• arguments.callee.callerからcallerで辿る(todo: コードを記述)

ブラウザのキャッシュの無効化

ちなみにリロードボタンをクリックする時はShiftキーを押しながらクリックするとスーパーリロードになり、HTTPリクエストヘッダーから"If-Modified-Since"などが外されるため304が返らなくなり、ページを確実に更新ができる可能性が高くなる。

Firefox

拡張機能のWeb Developer Toolbarで無効化できる。

Chrome

Developer Toolsの設定の"Disable cache"で無効化できる。

ToDo(書く予定)

ASSRET(), DP(), リモートデバッガ + dyndns, Proxy(cocproxy等), IDE + jslint, scrict mode, テスト用smtpサーバー, クエリでの動作変更, FPSカウンタ, アニメーション動作のスケールベース化、クラス名の取得、watchの活用