最終更新日: 2021年2月5日
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));
console.debug
次に、console.debug
でデバッグ表示を行います。
let object = {
"name": "Bob",
"age": 24,
"body": {
"weight": 62,
"height": 175
}
}
console.debug(object);
console.dir
console.dir
はオブジェクトが持つプロパティの一覧を階層的にリスト形式で表示することができます。
let object = {
"name": "Bob",
"age": 24,
"body": {
"weight": 62,
"height": 175
}
}
console.dir(object);

console.log
の引数にobject
を渡すことで、object
の中身をコンソールに表示することができました。