jQueryでデバッグでオブジェクトの中身を見る方法!

デバッグとはプログラムの誤りやバグを発見して修正を行うもので、プログラミングを行う上では非常に重要な工程となってきます。この記事ではjQueryでデバッグでオブジェクト(object)の中身を見る方法をサンプルコード付きで解説しています。

コンテンツ [表示]

  1. 1jQueryでデバッグでオブジェクトの中身を見たい
  2. 2jQueryでデバッグでオブジェクトの中身を見る方法
  3. 2.1console.log
  4. 2.2console.debug
  5. 2.3console.dir

jQueryでデバッグでオブジェクトの中身を見たい

PHPではvar_dump関数で変数や配列の中身などを表示することができます。

なぜ変数などの中身を表示する必要があるかというと、それはデバッグを行うためです。

デバッグとはプログラムの誤り(バグ)を発見して、修正を行っていくことです。デバッグを行うには、処理のとある段階で期待通りの値を返しているのかを確認することが必要になってきます。

そのための関数をデバッグ関数と呼んだりします。

今回はjQueryでオブジェクトの中身を見るためのデバッグ方法を紹介していきたいと思います。

あわせて読みたい
JavaScriptのconsole.logの使い方を初心者向けに解説!のイメージ
JavaScriptのconsole.logの使い方を初心者向けに解説!
デバッグとは変数などの値を表示して意図した値が返ってきているかやエラーが起きていないかなどを発見していく作業です。JavaScriptではデバッグを行うのに便利なconsole.log関数が提供しています。ここではconsole.logの使い方を解説します。

jQueryでデバッグでオブジェクトの中身を見る方法

jQueryでデバッグを行うには、Consoleオブジェクトのメソッドを使います。

Consoleオブジェクトのメソッドを用いることで、ブラウザのコンソールにオブジェクトの中身を表示することができます。

console.log

jQueryでデバッグする際に最もよく使われるデバッグ関数がconsole.logです。

let object = {
  "name": "Bob",
  "age": 24,
  "body": {
    "weight": 62,
    "height": 175
  }
}

console.log(object);
console.logの画像

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

 

let object = {
  "name": "Bob",
  "age": 24,
  "body": {
    "weight": 62,
    "height": 175
  }
}

console.log(JSON.stringify(object));
JSON.stringifyの画像

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.debugの画像

表示はconsole.logの時と同じです。console.logconsole.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の画像

console.dirobjectを表示することで、プロパティの構造が分かりやすく表示されています。

GeekHive採用サイト

関連記事