Tools | Chrome 개발자 도구 - console 기능

happy tiger·2022년 7월 3일
post-thumbnail

구글 크롬 개발자 도구

개발자 도구 보는 법

1. [마우스 우클릭] - [검사]
2. 단축키
Mac: Alt(Option) + Command + i 또는 [Fn] + [F12]
Window: [F12] 또는 [Ctrl + Shift + J]

Console 패널

Console 패널의 기능

  • 현재 페이지에서 실행중인 javascript의 console을 확인, 테스트 할 수 있다.
  • console 패널에 코드를 입력하면 입력하면 브라우저에서 바로확인 가능하게 해준다.

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


Console의 설정창에 들어가, Preserve log 선택!
말 그대로, log가 보존된다.

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

console.clear()또는 clear()

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

onsole 탭 우상단 Default levels를 클릭해 Warnings와 Errors를 해제

단, cosole창에 입력한 코드로 인한 Warning과 Error는 사라지지 않는다.
해당 인터넷 창에 관한 Warning과 Error가 사라진다.

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

다른 패널에서 ESC 누르기

  • ESC 누르기 전

  • ESC 누른 후: 하단에 console창이 켜진 것을 알 수 있다.

profile
호기심·끈기·성장·발전·행복·협력 ٩(๑•̀ㅂ•́)و

0개의 댓글