JavaScriptのデバッグに役立つ！console.log()とdebuggerを使いこなす

JavaScriptにおける var_dump 相当機能

console.log()

最もよく使われる方法は、console.log() 関数です。console.log() は、任意の式やオブジェクトを渡すと、コンソールにその値を出力します。

const name = "John Doe";
const age = 30;

console.log(name); // "John Doe"
console.log(age); // 30

console.log(typeof name); // "string"
console.log(typeof age); // "number"

console.log() は、オブジェクトや配列の中身も展開して表示することができます。

const person = {
  name: "John Doe",
  age: 30,
  address: {
    city: "Morrow County",
    state: "Oregon",
  },
};

console.log(person);

// {
//   name: "John Doe",
//   age: 30,
//   address: {
//     city: "Morrow County",
//     state: "Oregon",
//   },
// }

debugger

ブラウザの開発者ツールにある debugger を使うと、コードの実行を一時停止して変数の値を確認することができます。

1. ブラウザの開発者ツールを開きます。
2. "Sources" タブを選択します。
3. デバッグしたいファイルを開きます。
4. ブレークポイントを設定したい行を選択します。
5. "Resume" ボタンをクリックしてコードを実行します。
6. コードがブレークポイントに達すると、実行が一時停止します。
7. "Call Stack" パネルで、現在のスコープ内の変数を確認できます。

いくつかのライブラリは、var_dump に似た機能を提供しています。

これらのライブラリは、より詳細な情報を表示したり、出力形式をカスタマイズしたりすることができます。

const name = "John Doe";
const age = 30;

// console.log() を使って変数の型と値を表示
console.log(name); // "John Doe"
console.log(age); // 30

console.log(typeof name); // "string"
console.log(typeof age); // "number"


// オブジェクトの中身を表示
const person = {
  name: "John Doe",
  age: 30,
  address: {
    city: "Morrow County",
    state: "Oregon",
  },
};

console.log(person);

// debugger を使って変数の値を確認
debugger;

このコードを実行すると、以下の出力がコンソールに表示されます。

John Doe
30
string
number
{
  name: "John Doe",
  age: 30,
  address: {
    city: "Morrow County",
    state: "Oregon",
  },
}

debugger に達すると、コードの実行が一時停止します。 "Call Stack" パネルで、name、age、person などの変数の値を確認できます。

• js-yaml ライブラリを使ってオブジェクトを YAML 形式でダンプする例:

const yaml = require("js-yaml");

const person = {
  name: "John Doe",
  age: 30,
  address: {
    city: "Morrow County",
    state: "Oregon",
  },
};

const yamlString = yaml.dump(person);

console.log(yamlString);

• json-stringify-pretty ライブラリを使ってオブジェクトを JSON 形式でダンプする例:

const prettyPrint = require("json-stringify-pretty");

const person = {
  name: "John Doe",
  age: 30,
  address: {
    city: "Morrow County",
    state: "Oregon",
  },
};

const jsonString = prettyPrint(person);

console.log(jsonString);

alert()

alert() 関数は、メッセージダイアログボックスを表示します。変数の値をダイアログボックスに表示したい場合は、alert() を使用できます。

const name = "John Doe";

alert(name); // "John Doe" を表示するダイアログボックスを表示

ただし、alert() はユーザー体験を妨げる可能性があるため、デバッグ目的でのみ使用することをおすすめします。

DOM 要素への出力

変数の値を HTML 要素に書き出すこともできます。

const name = "John Doe";

const element = document.getElementById("name");
element.textContent = name;

このコードは、name 変数の値を id が "name" の HTML 要素に書き込みます。

拡張機能

ブラウザの拡張機能を使って、変数の内容をより詳細に表示したり、さまざまな形式で出力したりすることができます。