JavaScriptのデバッグ方法

JavaScriptでの開発で、デバッグ方法について、調べたので、まとめてみました。

１、alert
alertは、printfデバッグのJavaScript版。　どのWebブラウザでも利用可能となっている。
alert(hoge);　でhoge変数の中身を確認する

 ２、console.log
chrome、Safari、IE(8以上)、FireFox(Firebug使用)　のコンソール出力する。
もともとのFirefoxのアドオンであるFirebugで実装されていた機能で、Safari、Chromeなどで標準搭載するようになっった。

同じようなものに、console.log()、console.debug()、console.error()、console.warn()、console.info()等がある

※JavaScriptのデバッグ使える関数で以下のものがあります
1) console.dir()　　オブジェクトの内容を確認する
2) console.trace()　関数がどこから呼ばれたか調べる
3) console.time()　レスポンス（パフォーマンス）速度を計測する
4) console.assert()　アサーションを使う

３、デバッグツールを使用
1) IE
以下のツールがあります。
JavaScriptのエラーが発生した際にVisual StudioのデバッガでJavaScriptのデバッグを行うことが可能です。
・IETester
・開発者ツール（F１２を押すと画面がでてくる）
・Internet Explorer Collection

（Internet Explorer Collection）
ダウンロードサイト：
http://finalbuilds.com/iecollection.htm

詳細は、
「Internet Explorer 8 の開発者ツールの概要」や「開発者ツール : スクリプト デバッグの概要」，「開発者ツールを使用したスクリプトのプロファイリング」
を参照してください。

2) Firefox
FirebugはHTML／CSSの解析・リアルタイム編集，コンソールでのJavaScriptの実行やステップ実行，変数やオブジェクトの中身の解 析，ネットワークのログ取得にヘッダの解析，JavaScriptの実行をプロファイリング，といったことが可能な非常に高機能なデバッグ専用拡張です。
 http://gihyo.jp/dev/feature/01/firebug

3) Chrome(Safari)
「Web Inspector」という開発ツールがあります。

http://gihyo.jp/dev/serial/01/chrome-extensions/0006

4) Opera
「Dragonfly」という開発ツールがあります。

４、その他
consoleイベントの実装は以下の通りとなっているので、ツールごとに、デバッグ情報の出し方を考える必要があります。
// 共通
console.log
console.warn
console.error
console.info
// Dragonfly以外
console.assert
// Web InspectorとDragonfly以外
console.clear
// FirebugとWeb Inspector
console.count
console.debug
console.dir
console.dirxml
console.group
console.groupEnd
console.markTimeline
console.profile
console.profileEnd
console.time
console.timeEnd
console.trace
// Firebugのみ
console.exception
console.groupCollapsed

動的に追加するスクリプトなどではブレークポイントの設置が難しいケースがあります。
そんなときは，debugger;という行を追加しておくとその場所でブレークすることができます。

なお，debuggerはECMAScript第3版（JavaScriptのベースとなる仕様）では予約語であり，ECMAScript第5版ではキー ワードとなっているので，非対応ブラウザでもシンタックスエラーになることはなく，実行時に例外を投げることになります。

デバッガ（IEのスクリプトエ ディタやVisual Studioなど）によっては，debuggerステートメントには対応していないが，例外が起こることによってブレークさせることもできます。

■プロファイリング
OperaのDragonfly以外のブラウザはJavaScriptのプロファイリング機能を搭載しています。
プロファイリングでは細かい単位でパフォーマンスをチェックすることができるので，是非試行錯誤してエンジンの傾向を探ってみてください。
一見些細なことに思えるような部分でも調整してみると驚くほどにパフォーマンスが上がることもあります。

開発ツールは一つ覚えればいいと思うので、Firebugを使いこなせるようにしようと思っています。



【参考URL】
http://kazefuku.net/archives/1244
http://gihyo.jp/dev/feature/01/devtools/0001
http://www.atmarkit.co.jp/ait/articles/1407/11/news031_2.html
http://www.atmarkit.co.jp/ait/articles/1304/01/news016.html
https://app.codegrid.net/entry/breakpoint-1
https://msdn.microsoft.com/ja-jp/library/gg699336(v=vs.85).aspx 
https://developer.mozilla.org/ja/docs/Tools/Debugger
http://shim0mura.hatenadiary.jp/entry/20111231/1325357395
https://netbeans.org/kb/docs/webclient/html5-js-support_ja.html
http://so-zou.jp/web-app/tech/browser/firefox/developer-tools/javascript-debugger/
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0002