크롬 개발자도구 알아보기

코치님과 얘기를 나누다가 개발자 도구에 대한 얘기가 나왔다.

개발자 도구에는 어떤 기능들이 있을까? 고민해보다가 찾아본 내용들

 

탭

Element : HTML과 CSS를 분석

Console : 자바스크립트를 실행하고 그 결과를 분석

Sources : 자바스크립트 디버깅

Network : 통신상황을 모니터링

Performance : 성능을 튜닝할 때 사용

Application : 웹을 앱으로 만들어주는 기능

Network 탭

• 웹브라우저와 서버 사이의 상황을 모니터링 하고 싶을 때 Network 탭을 사용
• 녹화버튼으로 모니터링 시작 → 리로딩 및 통신내역 볼 수 있음
• 각 항목별 속성이 컬럼에 나타나고, 오른쪽 클릭하여 메소드 편집 가능
• 항목별
  • Headers : 헤더정보가 나옴
  • Response : 응답한 데이터가 표시됨
  • Preview : 응답결과를 보기좋게 보여줌
  • Payload : 서버로 데이터를 전송한 경우 활성화됨, 여기서 서버로 전송한 데이터를 볼 수 있음

Console 탭

• 콘솔탭 클릭하거나 다른 탭에 있을 때 esc 키를 누르면 됨
• 첫번째 활용 : 디버깅
• 두번째 활용 : 자바스크립트를 실행하는 것

Elements 탭

• styles : 태그가 왜 이 모양인지 보여줌
  • 아래로 갈수록 우선순위가 떨어짐
  • Inline으로 바로 편집도 가능

Sources 탭

• 웹페이지의 소스코드를 보고 싶을 때 sources의 page를 클릭하면 됨
  • 현재 파일에 로드된 모든 도메인을 볼 수 있음

Performance 탭

• 웹어플리케이션이 느려졌을 경우 performance에 들어가 성능을 체크
• 레코드를 버튼 클릭 후 stop하면 분석정보가 뜸
• 최상단에 붉은 색 막대기가 보이면 심각하게 느린 구간이 있다는 뜻
  • 드래그하여 선택하면 하단에 선택된 구간에 대한 상세정보가 보임
    • 예를들어 scripting, rendering, painting 등
  • 메인을 선택하면 성능 저하에 대한 원인을 알 수 있음
  • summary에서 파일명을 클릭하면 소스탭에서 코드를 보여줌 + 행별로 소요된 시간도 보여줌

 

https://www.youtube.com/@coohde

생활코딩

생활코딩 개발자도구 알아보기 shorts 01 ~ 05

 

---

One more step 

[NHN FORWARD 2020] 천천히 읽어 보는 Chrome 개발자 도구 설명서

https://youtu.be/cAIo4dEEPuc