크롬 - 개발자도구 팁

나는 웹 프로그래머다. 경력이 짧다.

자바스크립트를 다시 공부할 겸 이것저것 둘러보다 좋은 꿀 팁이 있어서 공유해 본다.

맨날 console 창에 테스트와 코드만 넣을 줄 알았지 생각도 못 했는데 완전 나한테는 꿀팁 이당!

 

 

개발자도구에서

• 컨트롤 + 쉬프트 + P 를 누르면 인텔리J나 타 IDE처럼 plugin검색?이 나온다.
  • screenshot을 검색하면 해당 원하는 기능을제공한다
    • 전체, inner, 또는 원하는 node만
  • coverage - show coverage 기능을 사용하면 이 페이지 렌더링에 사용중인 css, js 파일을 알려주는데 쓰는부분과 안쓰는 퍼센테이지까지 제공 및 쓰는 코드 색상까지로 구분해줌
    • 메인페이지 최적화 등 이용에도 적용할 수 있다. 파란색 - 쓰는 코드, 빨간색 - 사용하지 않는코드
  • snippets
    • console 라인의 여러줄을 치고싶을때 사용해 보자.
    • Sources 탭에서 사용하고 실행은 ctrl + Enter
  • ads - Block asd on this site - adblock 테스트

 

 

- 출처 : 코딩애플님 유튜브 채널 : 남들 모르는 크롬 개발자도구 소소한 기능8개

p.s 이분 말이 너무 재밌고 시원하고..초보 개발자가 보기에는 개념을 잘 잡아주시는거 같다 ㅎㅎ