개발자 도구 - console

개발자 도구 보는 법

1. Chrome : 브라우저 뷰포트에서 마우스 우클릭 > '검사'선택
2. Safari : 브라우저 뷰포트에서 마우스 우클릭 > '요소점검' 선택
   (좌측상단 safari 메뉴 > 환경설정 > 하단에 “메뉴막대에서 개발자용 메뉴 보기” 체크를 해야만 개발자도구를 열 수 있다.)
   

단축키

Mac : Cmd + option + i 또는 F12 (사파리 브라우저 에서는 f12로 개발자도구를 열 수 없다.)
Window : control + shift + I 또는 F12

chrome브라우저에서 cmd(control) + opt(shitf) + j 를 누르면 console창이 바로 나타난다.

Console 패널의 기능

• 현재 페이지에서 실행중인 javascript의 console을 확인, 테스트 할 수 있다.
• console 패널에 코드를 작성하면 브라우저에서 바로확인 가능하게 해준다.
• 오류가 발생 했을 시 어떤 부분에서 문제가 생겼는지 디버깅을 통하여 찾기 쉬워 진다.
• 예시코드

  a =123;
  console.log(a);

  

  	const bodyEl = document.querySelector('body');
  	bodyEl.style.backgroundColor = "black";

새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법

• console 옆 설정에서 (⚙️버튼)을 누른뒤, "Preserve log" 체크

• 화면을 새로 고침해도 기록이 남아 있다. (시연)

• 데이터가 유효한 것은 아니다.
  

• 데이터는 유효하지 않기때문에 위처럼 배경 화면 색이 원래 지정된 색으로 변경되고 작성한 코드의 기록만 남게된다.

🤔그렇다면 Preserve log 기능을 사용하는 이유는 뭘까?

console.log 값과 바뀐 코드의 console.log 값을 비교할때 유용하다.

콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드

• Console.clear()
• "Preserve log" 체크 상태에서는 로그기록을 보호하고 있기 때문에 지워지지 않음
• 즉, 해당기능을 체크해지하고 사용해야 한다.

콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법

• Default levels 에서 Warnings와 Errors 체크 해제
• 현재 페이지에서 실행되고 있는 Warnings 와 Errors는 실행되지만, console 패널에서 작성된 코드에 대한 warnings와 errors에는 적용 되지 않음

다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법

-ESC 키를 누르면 console 패널이 사용 가능

• ❗️아래에 위치해서 끌어올려서 봐야함