JavaScriptのデバッグメモ

概要

JSConfの動画を見て、便利そうだと思ったので個人的メモします。
動画はこちら

Chrome DevTools

console.log

変数をログで吐き出す時に、オブジェクトにするとキー・バリューで見れる。

const name = 'Hiroshi';
const age = 40;

console.log({ name, age });

色付け

console.log(`%c${name}`, 'background-color: red; color: white;');

※残念ながらオブジェクトは[object Object]になります。

console.table

const people = [
    { id: 1, name: 'Hiroshi', age: 40 },
    { id: 2, name: 'Tomozo', age: 76 },
    { id: 3, name: 'Momoko', age: 9 }
];

console.table(people);

テーブル形式で出力

console.group

function personData(person) {
    console.group('person');
    console.log(`name: ${person.name}`);
    console.log(`age: ${person.age}`);
    console.groupEnd();
}

const person = {name: 'Hiroshi', age: 40};
personData(person);

ログ出力を見やすく出来る。

Consoleタブ

Elementsタブで選択しているDOMエレメントを出力
現在選択しているものは$0で表示出来る。
$1〜$4まで履歴が見れる。

Consoleタブでのエレメントの取得

$('selector') = document.querySelector('selector')
$$('selector') = document.querySelectorAll('selector')

console.trace

関数がどこから呼ばれているかをトレース出来る。

function first() {
    console.log('first');
    console.trace();
}

function second() {
    console.log('second');
    first();
}

function third() {
    console.log('third');
    second();
}

third();

console.dir

const el = document.querySelector('div');
console.log(el)
console.dir(el);

エレメントのプロパティが全部表示される。
プロパティの書き換え可能

Node.js環境だとネストしたオブジェクトが内部まで表示可能。

const obj = {
    a: {
        b: {
            c: {
                d: {
                    e: {
                        f: { 
                            value: 1,
                            msg: 'Hello, world!'
                        }
                    }
                }
            }
        }
    }
}

console.log(obj);
console.dir(obj, { depth: null });

参考

Essential JavaScript debugging tools for the modern detective by Rebecca Hill | JSConf Budapest 2019