TIL - 개발자도구

quokka·2021년 10월 9일
0

TIL - Frontend

목록 보기
3/6
post-thumbnail

#Console 패널

  • Console 패널의 기능은?

    → 현재 페이지에서 실행중인 javascript 코드가 개발자가 의도한 코드가 맞는지를 확인할 수 있고, console 패널에 입력하면서 바로바로 확인 할 수 있다.

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

    👉 개발자 도구에서 console 패널에서 Issues옆에 있는 톱니바퀴⚙︎를 클릭✔️해서 'preserve log'를 누르면 지워지지 않는다.

스크린샷 2021-10-08 오후 1.24.11.png

스크린샷 2021-10-08 오후 1.26.07.png

📌 단 기록이 남아있다고 해서 데이터가 유효 하지는 않다.

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

    👉 console.clear 메소드를 사용할 경우에는 콘솔창에 기록된 로그를 모두 지울 수 있다.

📌 단 'preserve log' 키가 눌러져 있을 경우에는 console.log 메소드를 사용하여도 지워지지 않는다.

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

    👉 filter 옆에 Default levels ▼ 버튼을 누르면 warnings , Errors를 체크, 해제 할 수 있다.

스크린샷 2021-10-08 오후 1.28.25.png

스크린샷 2021-10-08 오후 1.29.55.png

📌 단 console패널에 가상으로 작성된 코드의 Warnings / Error은 적용되지 않는다.

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

👉 예를 들어서 element 패널 창을 보고 있는 상태에서 console창을 보고 싶다면 esc키를 누르면 element창 밑에 console창이 생기게 된다.

👉 Issues 버튼 옆에 Error가 뜨게되면 버튼이 생기고 버튼을 눌러도 확인 할 수 있다.

스크린샷 2021-10-08 오후 1.32.04.png

profile
👩🏻‍💻 매일매일이 기대되는 개발자 ^^

0개의 댓글