목표
개발자 도구의 다양한 활용법을 배워보자.
중단점
특정 노드에서 중단점을 설정할 수 있다. 보기와 같이 속성 수정에 중단점을 설정하게 되면 해당 노드의 속성이 바뀔 때 디버거에서 중단점이 표시된다.
콘솔 명령어
디버깅을 위해 자주 사용하는 console.log() 외에도 다양한 메소드가 존재한다. console의 내장 메소드를 기능에 따라 정리해보았다.
콘솔에 메시지 표시
콘솔창에 메시지를 표시하는 5가지 메소드로 log, info, warn, error, debug가 있다. log는 워낙 자주 사용해서 이미 익숙할 것이고, warn이나 error는 직접 사용하지 않더라도 출력되는 건 많이 봤을 것이다.
info는 브라우저에 따라 표시되는 모습이 다른데, 크로미움 기반의 크롬, 웨일 등에서는 log와 동일하게 표시된다. 파이어폭스에서는 warn이나 error처럼 🛈 모양의 기호가 붙어 나온다. 그런데 debug는 어디 갔지?
콘솔 창에 표시되는 메시지는 수준(Log Level)에 따라 구분되어 있다. debug는 상세(Verbose) 수준에서 표시되는 메시지이기 때문에 기본 수준에서는 보이지 않는다. 상세 수준까지 보도록 체크하면 debug 메시지를 볼 수 있다.
추가로 함수나 객체, DOM 요소 등을 log로 출력하면 문자열 형태로 나온다. 속성이나 프로토타입을 확인하고 싶을 때는 console.dir()을 이용할 수 있다.
예시로 함수를 출력해봤는데, log는 함수를 문자 그대로 출력해 주는 반면 dir는 속성이나 프로토타입 등을 계층 구조로 보여주는 것을 알 수 있다. 노드를 log와 dir로 출력할 경우 log는 HTML식 구조로, dir은 JSON식 구조로 보여준다. dirxml이라는 것도 있는데, 크롬에서는 log와 차이가 없는 것 같다.
코드 추적
- 횟수 추적 : count, countReset
count는 인자로 label을 전달할 수 있고, 해당 label을 가진 count가 몇 번 호출되었는지 세어서 보여준다.
countReset은 해당 label을 가진 counter를 초기화한다.
- 시간 추적 : time, timeLog, timeEnd
코드의 성능을 평가할 때 실행에 얼마나 걸리는지 확인하고 싶을 수 있다. 이때 time을 마치 스톱워치처럼 사용할 수 있다. time으로 측정을 시작, timeLog로 중간에 확인할 수 있고, timeEnd로 측정을 종료한다.
예시에서는 fetch에 걸리는 시간을 재기 위해 console.time("fetch")로 측정을 시작하고 json()을 호출하는 데서 한 번 시간을 확인한 다음 최종 출력까지 걸린 시간을 다시 확인했다.
응답을 받기까지 811ms가 걸렸고, json으로 변환하는 데 1ms 정도가 더 걸려서 총 812ms만에 작업이 완료되었다고 알려준다. fetch는 비동기 함수이기 때문에 then을 이용하여 Promise가 완료되었을 때 측정을 종료해야 하는 것에 주의해야 한다.
- 흐름 추적 : trace
코드가 실행되는 과정을 눈으로 볼 수 없기에 오류가 발생했을 때 어디서 발생했는지 확인할 수 있으면 좋을 것이다. trace를 이용하면 해당 로그가 찍히는 시점의 call stack을 보여준다.
makeGreen 함수의 호출을 추적하기 위해 함수 안에서 trace를 호출하도록 했다.
이렇게 하면 makeGreen 함수가 어디서 호출되었는지, 코드의 어느 부분에서 찾을 수 있는지 등을 한눈에 볼 수 있다.
보기 좋게
- 그룹 : group, groupCollapsed, groupEnd
여러 줄의 출력을 보기 좋게 출력하기 위해 계층 구조로 표시할 수 있다.
group에 label을 지정해서 group을 시작할 수 있으며 groupEnd로 닫을 수 있다. groupCollapsed를 사용하면 접힌 상태로 출력한다. 역시 groupEnd로 닫을 수 있다. (들여쓰기는 출력 모습과 비슷하게 임의로 설정한 것이다.)
계층 구조로 표시되어 가독성이 훨씬 좋아졌다. 단 괄호의 짝을 맞춰야 하듯 groupEnd로 계층을 빠져나가는 걸 잊으면 안 된다.
- 표 : table
배열이나 객체를 log로 표시하면 문자열 또는 JSON 구조로 보여준다. 크기가 작을 때는 보기 나쁘지 않지만 크기가 크고 속성이 많아지면 표로 나타내는 것이 더 깔끔하다.
위에 사용했던 dogs 배열을 table로 출력한 모습이다. 잘 구조화된 배열이나 객체에만 쓸 수 있다는 제약이 있기는 하나 보기 훨씬 편하다.
- 삽입 : %s, %d, %f, %o `${}`
문자열에 변수를 동적으로 삽입하고 싶다면 포맷 문자를 사용하거나 ES6에서 지원하는 문법으로 백틱(`, '와는 다름)을 이용한 템플릿 리터럴을 이용할 수 있다.
%s, %d, %f, %o로 각각 문자열, 정수, 실수, 객체를 대입할 수 있으며 %.2f와 같이 포맷팅 할 수도 있다.
백틱 문자열은 그냥 ` ` 사이에 원하는 문자열을 넣고, ${ } 안에 표현식을 넣으면 된다.
백틱을 쓸 경우 안에서 따옴표를 자유롭게 쓸 수 있으며 줄바꿈도 그대로 인식해 준다는 장점이 있다.
- 스타일 : %c
CSS 스타일을 적용할 수 있다.
%c부터 다음 %c까지 CSS 서식을 적용한다고 생각하면 되고, 여러 속성을 지정하려면 세미콜론으로 구분하면 된다.
assert(assertion, message)
assertion으로 전달된 boolean 표현식이 거짓일 경우 message를 출력한다. 참일 경우 지나간다. 조건문으로 간단하게 구현할 수도 있을 텐데 굳이 왜 존재하는 건지 잘 모르겠다. 심지어 log와는 다르게 일부 브라우저에서 지원하지 않을 수도 있다고 한다.
clear
콘솔 기록을 삭제한다.
새로 알게 된 점
console.log나 console.dir는 자주 사용했는데, console에 다른 기능이 이렇게 많은지는 몰랐다. 그런데 모를 만도 했던 게, console.log만으로도 구현 가능한 기능들이 대부분이라 굳이 이런 기능들을 쓸 이유가 없는 거 같다. 어차피 콘솔 기능 자체가 개발할 때 디버깅 용도로만 쓰이지 배포 단계에서는 다 제거하는 게 일반적이니...
