jQueryでデバッグでオブジェクトの中身を見る方法！
デバッグとはプログラムの誤りやバグを発見して修正を行うもので、プログラミングを行う上では非常に重要な工程となってきます。この記事ではjQueryでデバッグでオブジェクト(object)の中身を見る方法をサンプルコード付きで解説しています。
jQueryでデバッグでオブジェクトの中身を見たい
PHPではvar_dump関数で変数や配列の中身などを表示することができます。
なぜ変数などの中身を表示する必要があるかというと、それはデバッグを行うためです。
デバッグとはプログラムの誤り(バグ)を発見して、修正を行っていくことです。デバッグを行うには、処理のとある段階で期待通りの値を返しているのかを確認することが必要になってきます。
そのための関数をデバッグ関数と呼んだりします。
今回はjQueryでオブジェクトの中身を見るためのデバッグ方法を紹介していきたいと思います。
jQueryでデバッグでオブジェクトの中身を見る方法
jQueryでデバッグを行うには、Consoleオブジェクトのメソッドを使います。
Consoleオブジェクトのメソッドを用いることで、ブラウザのコンソールにオブジェクトの中身を表示することができます。
console.log
jQueryでデバッグする際に最もよく使われるデバッグ関数がconsole.logです。
let object = {
"name": "Bob",
"age": 24,
"body": {
"weight": 62,
"height": 175
}
}
console.log(object);
let object = {
"name": "Bob",
"age": 24,
"body": {
"weight": 62,
"height": 175
}
}
console.log(JSON.stringify(object));
JSON.stringifyメソッドは引数にobjectを渡すことで、objectの中身をJSON文字列に変換しています。
JSON文字列をコンソールに表示しています。そうすることで、テキストをコピーしてobjectの中身を扱うことができます。
console.debug
次に、console.debugでデバッグ表示を行います。
let object = {
"name": "Bob",
"age": 24,
"body": {
"weight": 62,
"height": 175
}
}
console.debug(object);
表示はconsole.logの時と同じです。console.logとconsole.debugの違いはログレベルです。
ログレベルとは、情報の基準を定義するための設定です。
- エラー
- 警告
- ログ
- 情報
- デバッグ
console.logのログレベルは「ログ」なのに対して、console.debugのログレベルは「デバッグ」となります。console.dir
console.dirはオブジェクトが持つプロパティの一覧を階層的にリスト形式で表示することができます。
let object = {
"name": "Bob",
"age": 24,
"body": {
"weight": 62,
"height": 175
}
}
console.dir(object);
console.dirでobjectを表示することで、プロパティの構造が分かりやすく表示されています。
console.logの引数にobjectを渡すことで、objectの中身をコンソールに表示することができました。