Day 09 - Dev tools console tricks

Day 09에서는 크롬 개발자 도구의 기능 중에서도
중단점으로 변화 과정을 알아보는 것, 다양한 console trick을 알아본다.

참고 자료

크롬 개발자 도구 열기

• 마우스 우클릭 > 검사
• 윈도우 단축키 F12 / Ctrl+Shift+I
• 맥 단축키 Cmd+Opt+I

중단점으로 변화 과정 알아보기

Element 패널에서 html 요소를 우클릭하면 Break On이 있다. 이것으로 변화마다 중단점을 발생시켜 그 과정을 추적 확인할 수 있다. 이 중에서 attribute modifications는 특정 요소의 attributes에 변화가 발생하면, 변화 하나하나마다 중단점이 발생하고 Sources 패널에서 어느 줄에서 변화가 발생했는지 표시해준다. 해제는 다시 우클릭 해서 체크를 풀어주면 됨

Console Tricks

Console 패널 : 로그 확인, 에러 메세지 확인, 스크립트 명령어 입력이 가능한 패널.

• 기본
  console.log
  콘솔 패널에 메세지를 출력한다
  객체와 같이 내용물이 변할 수 있는 것들은 (ex. 요소 추가), 변화가 일어나기 전에 찍은 콘솔로그까지 내용이 바뀜에 주의한다.

• 테이블(표) 조회
  console.table(data)
  배열, 객체 등의 데이터를 표 형태로 보여준다

• 콘솔 메세지 스타일 주기
  console.log('%c text', 'font-size:20px; background:red;')
  콘솔 패널에 출력되는 메세지의 스타일을 설정할 수 있다.
  첫번째 인수에서 %c를 앞에 두고 메세지를 적고
  두번째 인수에서 style값을 설정한다.

• 경고 메세지
  console.warn()
  노란 세모 안에 !가 들어간 아이콘⚠과 함께 콘솔에 경고 메세지를 출력한다.

• 에러 메세지
  console.error()
  빨간색 동그라미 안에 X가 들어간 아이콘과 함께 콘솔에 에러 메세지를 출력한다.

• 정보 메세지
  console.info()
  동그라미 안에 i가 들어간 아이콘으로 정보 메세지를 출력한다.

• 테스트 & 거짓일 경우의 메세지
  console.assert(가정, 메세지)
  가정이 거짓인 경우 메세지를 출력한다. 참인 경우 아무것도 하지 않음.

  • 예제

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

• 지우기
  console.clear();
  콘솔에 기록된 메세지 전부를 지운다

• DOM 요소 확인 (참고 자료)
  console.log(p)
  요소를 HTML과 같은 트리 구조로 출력한다.
  
  console.dir(p)
  요소를 JSON과 같은 트리 구조로 출력한다.
  HTML에 적힌 것보다 더 많은 정보를 알 수 있다.

• 그룹 만들기
  console.group(그룹명)과 console.groupEnd(그룹명)로 그룹을 만들 수 있는데 기본적으로 펼쳐진 형태로 출력된다. console.groupCollapsed(그룹명)로 접어둘 수 있다.

• counting
  console.count(label)
  이 레이블을 몇 번째 호출한 것인지 그 수를 출력한다.

• 작업 시간 확인 (추적)
  console.time으로 타이머를 시작하고, console.timeEnd으로 타이머를 중단하고 콘솔에 작업 시간이 얼마나 걸렸는지 출력한다. fetch 등의 작업 시간을 확인할 수 있다.