오늘은 브라우저 콘솔상에서 보여지는 명령어들을 학습해보려고 한다. console object에 내장되어 있는 함수들로서 잘 알아두면 디버깅시에 매우 유용할 것이라고 생각된다.

초기 코드는 다음과 같다. 동적으로 렌더링하는 로직은 전혀 필요 없고 단지 브라우저 console상에서만 동작할 것이기 때문에 index.html파일 하나만 사용하는 것이 간단할 것이다.

js코드를 보면 dogs배열 하나와 makeGreen() function하나만 있다. 그리고 이 함수를 p태그에 걸어주었다.

1. Regular

console.log('hello');

와 같이 입력한다.

1.regular

개발자도구를 열어 콘솔화면을 확인하면 다음과 같이 ‘hello’문자열이 출력되는 것을 볼 수 있다.

2. Interpolated

console.log('Hello I am a %s string!', '💩');

‘%s’로 표현된 위치에 두 번째 파라미터로 넘겨준 string인 ‘💩’가 들어가게 된다. template literlal을 사용해 표현하는 것도 가능하다.

2. interpolated

number를 넘기고 싶다면 ‘%d’를 사용하면 된다. 첫 번째 문자열에 있는 정규식의 순서대로 뒤에 넣어준 파라미터들이 하나씩 들어가게 되고, 만약 파라미터 숫자가 부족하다면 ‘%s’라는 문자열이 그대로 출력된다.

3. Styled

스타일링하고 싶은 문자열 앞에 ‘%c’를 써주면 다음 ‘%c’가 있는 위치 또는 없다면 문자열의 끝까지 해당 스타일이 적용된다.

console.log('I am some  %c great %c text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue', '');

다음과 같이 입력했을 때 결과는 다음과 같다.

3. styled

4. warning, Error, Info

// warning!
console.warn('OH NOOO');

// Error :|
console.error('Shit!');

// Info
console.info('Crocodiles eat 3-4 people per year');
4. warning, error, info

console.log() function이 아닌 warn(), error(), info()를 사용하면 된다.

5. Testing

console.assert(1 === 2, 'That is wrong!');

다음은 테스팅 함수이다. 첫 번째 파라미터가 true일 경우 아무 메세지도 출력되지 않지만, false일 경우에는 두 번째로 넘겨준 문자열이 출력된다.

const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong!');

다음과 같이 특정 dom이 개발자가 기대하는 class를 포함하고 있는지 확인해보는 등의 테스트를 해보기에 유용하다. 위 상황에서는 p tag가 ‘ouch’클래스를 가지고 있지 않기 때문에

5. Testing

다음과 같이 실패 메세지가 출력된다.

6. Clearing

console.clear();

명령어를 사용한다.

6. clearing

7. Viewing DOM Elements

const p = document.querySelector('p');
console.log(p);

다음과 같이 명령어를 입력하였을 경우,

출력 결과는 위와 같지만,

console.dir(p);

을 사용하면 결과는 다음과 같다.

8. Group together

dogs.forEach(dog => {
console.groupCollapsed(`${dog.name}`);
console.log(`This is ${dog.name}`);
console.log(`${dog.name} is ${dog.age} years old`);
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
console.groupEnd(`${dog.name}`);
});

console.groupCollapsed() 안에 넣어주는 문자열이 key가 되어 같은 문자열로 console.groupEnd()를 실행하기 전까지의 메세지를 그룹지어준다.

8. Group together

9. Counting

console.count('Wes');    
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');

위와 같이 작성할 경우 결과는 다음과 같다.

9. Counting

10. Timing

console.time(‘fetching data’); fetch(‘https://api.github.com/users/wesbos') 
.then(data => data.json())
.then(data => {
console.timeEnd(‘fetching data’);
});
10. Timing

11. Table

console.table(dogs);

로 작성하면 결과는

이렇게 출력된다!

woohyun

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store