オブジェクトの中身を確認する

オブジェクトをコンソールで確認する。

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 で関数が何処から呼ばれたか調べる方法 | 風の吹く丘

スタックトレース | MDN

Console.trace() | MDN

Chrome Developer Tools で関数の戻り値を確認する

参考:

How to inspect JavaScript function return value in Chrome debugger? – Stack Overflow

util.inspect

参考:

Node.js でオブジェクトの中身を全て表示する | Wokashi

debugger ステートメント

ブレークポイントとしての機能を提供する。デバッグ機能が有効な場合に、debugger ステートメントに実行ポイントが来たら実行を停止する。

参考:

debugger | MDN

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

参考:

開発ツール | MDN

Firebug から移行する | MDN

Firefox Developer Edition [Official]

ソースマップ

参考:

ソースマップを使用する | MDN

An Introduction to Source Maps | Treehouse Blog

SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead – JavaScript | MDN

Coverage

参考:

Chrome バージョン59のデベロッパーツールに CSS、JS のカバレッジタブが追加されるらしい – Qiita

Chrome で計測可能になった CSS カバレッジについての調査検証を行ったお話 | GMO メディア エンジニアブログ

Google Chrome v59 の DevTools がすごい | すなばいじり

How to check Code Coverage in Chrome | DEV Community

Measuring Javascript and CSS coverage with Google Chrome Developer Tools | Vojtech Ruzicka’s Programming Blog

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

参考:

Chrome Devtools の知っていると便利な機能まとめ | noah.plus

Web 制作者は使わないと損!Chrome 59 でアップデートされたデベロッパーツールの便利な新機能 | コリス

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です