JavaScript의 디버그 노트

개요

제이콥 영상을 봤는데 편한 것 같아서 개인적으로 필기를 했어요.
비디오여기.

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);

로그 출력을 쉽게 볼 수 있습니다.

공유 태그

Elements 태그에서 선택한 DOM 요소 내보내기
지금 선택한 물건은\$0으로 표시할 수 있습니다.
역사 기록을 볼 수 있다.

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