JavaScriptのconsole.log, dir, tableの違い・デバッグ方法とログレベルの使い分け

console-log

SHARE

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのconsole.log, dir, tableの違い・デバッグ方法とログレベルの使い分けについてまとめて解説していきます。

JavaScriptのconsole.log, dir, tableの違い・デバッグ方法とログレベルの使い分け

まずは、今回のSampleCodeの全文とコンソールの出力結果を見てみましょう。

1つ1つの詳細は、それぞれ解説します。

<div>
<script>
const Robotama = {
    id: 1,
    robotama: 'ロボ玉試作1号機',
    like: 'ひまたね',
    from: '神聖グンマー帝国',
    purupur: true,
}

// 1. 通常の console.log(); で、変数をログ出力する
console.log(Robotama);

// 2. console.dir(); で、変数をログ出力する
console.dir(Robotama);

// 3. console.table(); で、変数をログ出力する => Table上で構造を確認することができる
console.table(Robotama);

// 4. console.log(JSON.stringify(データ)); 
// => JSON-文字列に変換したものを出力する => 構造が、1目でわかりやすい！
console.log(JSON.stringify(Robotama));
// {"id":1,"robotama":"ロボ玉試作1号機","like":"ひまたね","from":"神聖グンマー帝国","purupur":true}

// 5. console.log({変数})
// => { key: value } の省略形 => 変数名をkeyとして、valueは変数を展開する
console.log({Robotama});
// Robotama: {id: 1, robotama: 'ロボ玉試作1号機', like: 'ひまたね', from: '神聖グンマー帝国', purupur: true}

// 6. console.log(文字列で変数名, ログ出力したい変数);
console.log('Robotama', Robotama);
// Robotama {id: 1, robotama: 'ロボ玉試作1号機', like: 'ひまたね', from: '神聖グンマー帝国', purupur: true}

// 7. console.log(文字列で変数名, JSON.stringify(データ));
console.log('Robotama:', JSON.stringify(Robotama));
// Robotama: {"id":1,"robotama":"ロボ玉試作1号機","like":"ひまたね","from":"神聖グンマー帝国","purupur":true}


// 8. Log-Level の使い分け
// Log-Level ごとに、DevToolsのコンソール画面上でのLog表示が変わります。
console.log('Log-Level-1: ', 'Log');     // 黒文字
console.info('Log-Level-2: ', 'Info');   // 黒文字
console.warn('Log-Level-3: ', 'Warn');   // 黄色文字
console.error('Log-Level-4: ', 'Error'); // 赤色文字

console.log('Robotama');
</script>
</div>

通常の console.log() で変数をログ出力する

1番ベーシックなログ出力の方法が、console.log() を使ったログ出力です。

const Robotama = {
    id: 1,
    robotama: 'ロボ玉試作1号機',
    like: 'ひまたね',
    from: '神聖グンマー帝国',
    purupur: true,
}

// 1. 通常の console.log(); で、変数をログ出力する
console.log(Robotama);

出力結果は、次の画像のとおりです。

console.dir() で変数をログ出力する

console.dir() は、変数のすべてのプロパティをログで出力して確認することができる出力方法です。

console.dir() メソッドは、指定された JavaScript オブジェクトのプロパティの対話的なリストを表示します。

出力は折り畳み式の階層的なリストで表示され、子オブジェクトの中身を見ることができます。

言い換えれば console.dir() は指定された JavaScript オブジェクトのプロパティを

すべてコンソール上で見る方法であり、開発者は簡単にオブジェクトのプロパティを得ることができます。

引用元: MDN: console.dir()
const Robotama = {
    id: 1,
    robotama: 'ロボ玉試作1号機',
    like: 'ひまたね',
    from: '神聖グンマー帝国',
    purupur: true,
}

// 2. console.dir(); で、変数をログ出力する
console.dir(Robotama);

出力結果は、次の画像のとおりです。

console.table() で変数をTable構造でログ出力する

console.table()で、変数をログ出力すると Table上でデータの構造を確認することができます。

const Robotama = {
    id: 1,
    robotama: 'ロボ玉試作1号機',
    like: 'ひまたね',
    from: '神聖グンマー帝国',
    purupur: true,
}

// 3. console.table(); で、変数をログ出力する => Table上で構造を確認することができる
console.table(Robotama);

出力結果は、次の画像のとおりです。

console.log(JSON.stringify(データ)) で、JSON-文字列に変換したものをログ出力する

console.log(JSON.stringify(データ))で、JSON-文字列に変換したものをログ出力すると構造がわかりやすいです。

const Robotama = {
    id: 1,
    robotama: 'ロボ玉試作1号機',
    like: 'ひまたね',
    from: '神聖グンマー帝国',
    purupur: true,
}

// 4. console.log(JSON.stringify(データ)); 
// => JSON-文字列に変換したものを出力する => 構造が、1目でわかりやすい！

console.log(JSON.stringify(Robotama));

出力結果は、次の画像のとおりです。

console.log({変数}) で、変数名をkeyとvalue両方に使用してログ出力する

console.log({変数})で、変数名をkeyとvalue両方に使用してログ出力すると、変数名と、その中身の構造が1目でわかります。

const Robotama = {
    id: 1,
    robotama: 'ロボ玉試作1号機',
    like: 'ひまたね',
    from: '神聖グンマー帝国',
    purupur: true,
}

// 5. console.log({変数})
// => { key: value } の省略形 => 変数名をkeyとして、valueは変数を展開する

console.log({Robotama});

出力結果は、次の画像のとおりです。

console.log(文字列で変数名, ログ出力したい変数) でログ出力する

console.log(文字列で変数名, ログ出力したい変数) でログ出力するのも、変数名と、その中身の構造が1目でわかります。

const Robotama = {
    id: 1,
    robotama: 'ロボ玉試作1号機',
    like: 'ひまたね',
    from: '神聖グンマー帝国',
    purupur: true,
}

// 6. console.log(文字列で変数名, ログ出力したい変数);
console.log('Robotama', Robotama);

出力結果は、次の画像のとおりです。

console.log(文字列で変数名, JSON.stringify(データ)) でログ出力する

console.log(文字列で変数名, JSON.stringify(データ)) でログ出力するのも、変数名と、その中身の構造が1目でわかります。

const Robotama = {
    id: 1,
    robotama: 'ロボ玉試作1号機',
    like: 'ひまたね',
    from: '神聖グンマー帝国',
    purupur: true,
}

// 7. console.log(文字列で変数名, JSON.stringify(データ));
console.log('Robotama:', JSON.stringify(Robotama));

出力結果は、次の画像のとおりです。

Log-Level の使い分け

JavaScriptのログレベルは log, info, warn, error の4つがあります。

Log-Level ごとに、DevToolsのコンソール画面上でのLog表示が変わります。

次の画像のように、log, info レベルは黒文字で、 warnレベルは黄色文字、errorレベルになると赤色文字になります。

// 8. Log-Level の使い分け
// Log-Level ごとに、DevToolsのコンソール画面上でのLog表示が変わります。
console.log('Log-Level-1: ', 'Log');     // 黒文字
console.info('Log-Level-2: ', 'Info');   // 黒文字
console.warn('Log-Level-3: ', 'Warn');   // 黄色文字
console.error('Log-Level-4: ', 'Error'); // 赤色文字

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース（無料）

【IT道場】入校時0円！ 就職目的プログラミングスクール

エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

Twitterやってます！Follow Me！

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！

最近の投稿

【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 JS_uuid JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) py_csv_to_json PythonでCSVをJSONに変換する方法 py_csv_cut PythonでCSV・Dataframeを指定の行数まで切り取る方法 js_for_of JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 Python_VSCode VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法

前の記事

setTimeout-setInterval
JavaScriptのsetTimeoutとsetInterv…

次の記事

JavaScriptの例外処理 try-catch-final…
try-catch-finally