자바스크립트 콘솔객체를 활용한 디버깅

자바스크립트 콘솔객체를 활용한 디버깅

반응형

자바스크립트 콘솔객체를 활용한 디버깅

이번 포스팅에서는 자바스크립트 코드를 디버깅하는 다양한 방법에 대해서 알아봅니다.

console.log()

가장 기본적인 자바스크립트 디버깅 방법이다. 아래 코드를 살펴보자.

const foo = { name: "Kim", age: 30 }; const bar = { name: "Tom", age: 40 }; const baz = { name: "harry", age: 50 };

우리는 3개의 객체를 가지고 있고 콘솔 로그를 통해서 디버깅하려고 한다. 가장 먼저 떠오르는 방법은 아래 코드와 같이 객체를 각각 콘솔 로그 실행해보는 것이다.

console.log(foo); console.log(bar); console.log(baz);

콘솔 로그 메시지

조금 다른 방법으로 디버깅을 해보자. ECMAScript 2015에 도입된 표기법(Shorthand property names)을 사용할 것이다.

console.log({ foo, bar, baz });

콘솔 로그 메시지

코드 라인이 몇 줄 감소해서 유용하다기보다는 특정 객체를 참조하고 있는 변수명(bar, baz, foo)까지 출력되기 때문에 디버깅 시 사용을 고려해볼 만하다.

CSS 스타일링

CSS 스타일링을 통해 로그 메시지가 눈에 띄게 만들 수 있다. 어떤 이유에 의해서 특정 데이터가 다른 메시지에 비에 강조되어야 할 때 사용하는 방법이다. console.log 메서드의 첫 번째 인자로 %c를 포함한 로그 출력 메시지를 입력하고 두 번째 인자로 CSS 코드를 전달한다.

console.log(`%cMy Friends`, 'color: orange'); // css 코드 console.log({ foo, bar, baz });

콘솔 로그 메시지

테이블 레이아웃 메시지

변수 foo, bar, baz가 각각 참조하고 있는 객체들은 모두 동일한 속성명 (name, age, some)을 공유하고 있다. 이런 경우 테이블 레이아웃으로 메시지를 출력해보자.

const foo = { name: "Kim", age: 30, some: "other" }; const bar = { name: "Tom", age: 40, some: "other" }; const baz = { name: "harry", age: 50, some: "other" }; // Console.table(...) console.table([foo, bar, baz]); console.table({foo, bar, baz})

콘솔 로그 메시지

console.table 메서드 인자로 배열을 전달한 경우 index 칼럼의 값이 0, 1, 2로 출력되고 있고 객체를 전달한 경우 변수명이 출력되는걸 눈여겨보자.

반응형

from http://tamagotch.tistory.com/49 by ccl(A) rewrite - 2022-01-01 10:02:13