オブジェクトの中身を確認する
オブジェクトをコンソールで確認する。
console.log(obj)
JSON 形式の文字列として出力する。
console.log(JSON.stringify(obj))
参考:
JavaScript でオブジェクトの内容が知りたい時 – Qiita
javascript のデバッグで object の中身を文字列として展開する方法 | infoScoop 開発者ブログ
jQuery や JavaScript で var_dump() したいときは、console.log(hoge) して Chrome のコンソールでみればいいらしい | なかちょんブログ
object – What is the JavaScript equivalent of var_dump or print_r in PHP? – Stack Overflow
Console API
参考:
console.log だけじゃない!Console API のメソッドまとめ | あるいてっく
console.error
参考:
Javascript で簡単にスタックトレースを出力する (Chrome 限定) – Qiita
console.trace
参考:
JavaScript で関数が何処から呼ばれたか調べる方法 | 風の吹く丘
Chrome Developer Tools で関数の戻り値を確認する
参考:
How to inspect JavaScript function return value in Chrome debugger? – Stack Overflow
util.inspect
参考:
Node.js でオブジェクトの中身を全て表示する | Wokashi
debugger ステートメント
ブレークポイントとしての機能を提供する。デバッグ機能が有効な場合に、debugger
ステートメントに実行ポイントが来たら実行を停止する。
参考:
Disable the debugger statement through the browser – Stack Overflow
Safari Web インスペクタ
参考:
JavaScript 周りのデバッグで使うブレークポイントは Safari のが便利だと思っていた – Qiita
Mac での Safari の開発者ツール (Web インスペクタ) の使い方 | 好きなときに好きなことをしたいブログ
Safari ブラウザを開発モードで開く方法 | ALPHACAST アルファキャスト
Mac の Safari で「開発」メニューのデベロッパツールを使用する | Apple サポート [公式]
Safari Developer Help | Apple サポート [公式]
About Safari Web Inspector | Apple Developer [Official]
Debugger | Apple Developer [Official]
Are there keyboard shortcuts for the Safari debugger? – Stack Overflow
iOS で Web インスペクタを使う
参考:
実機の Mobile Safari のページデバッグについて – Qiita
iOS の Safari の Web インスペクタを使ってみる | Tips Note by TAM
iOS Safari で表示した Web サイトを MacOS Safari の Web インスペクタでデバッグする方法 | DevelopersIO
Safari のウェブインスペクター機能でページをデバッグする方法 | 楽しく iPhone ライフ!SBAPP
Debug JavaScript in Mobile Safari (iOS) in 7 Easy Steps | DZone Mobile
Chrome Developer Tools
参考:
JavaScript, jQuery の爆速コーディング、デバッグ方法論の勧め 実践向け逆引き – Qiita
Chrome で javascript デバッグ!まず半歩 – SlideShare
Firefox Developer Edition
参考:
Firefox Developer Edition [Official]
ソースマップ
参考:
An Introduction to Source Maps | Treehouse Blog
Coverage
参考:
Chrome バージョン59のデベロッパーツールに CSS、JS のカバレッジタブが追加されるらしい – Qiita
Chrome で計測可能になった CSS カバレッジについての調査検証を行ったお話 | GMO メディア エンジニアブログ
Google Chrome v59 の DevTools がすごい | すなばいじり
How to check Code Coverage in Chrome | DEV Community
The CSS Tracker Panel | Umar Hansa
Eruda
参考:
Eruda – Console for Mobile Browsers [Official]
liriliri/eruda: Console for mobile browsers – GitHub
まとめ
参考:
Debugging Tips and Tricks | CSS-Tricks
Logging Errors in Client-Side Applications | SitePoint
Tips
参考: