Dev tools documination

8 min readOct 18, 2018

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

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

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

1. Regular

먼저 콘솔에 가장 평범하게 문자열을 출력해볼 것이다. 명령어는

console.log('hello');

와 같이 입력한다.

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

2. Interpolated

개발자가 지정해 놓은 일정한 문자열을 출력할 경우에는 다음과 같이 하면 되지만, 상황에따라 동적으로 변하는 변수를 문자열로 출력하고 싶을 수도 있다. 이럴 경우 콘솔 로그 함수에 두 개 이상의 파라미터를 넘겨주면 된다.

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

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

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

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

4. warning, Error, Info

다음은 단순 로그가 아닌 warning, error, info message를 출력하는 것이다.

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

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

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

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’클래스를 가지고 있지 않기 때문에

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

6. Clearing

너무 많은 메세지들이 console에 출력되어 전부 깨끗하게 지우고 싶다면

console.clear();

명령어를 사용한다.

7. Viewing DOM Elements

console.log()가 단순 문자열로 출력된다면 해당 객체의 정보를 모두 출력해주는 console.dir()함수도 있다.

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()를 실행하기 전까지의 메세지를 그룹지어준다.

9. Counting

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

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

10. Timing

타이밍은 time()명령어를 호출한 이후 timeEnd()가 호출 될 때까지의 시간을 측정해준다.

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