[Frontend] JavaScript 디버깅을 위한 크롬 개발자 도구에 대해 알아보자

JavaScript 디버깅뿐만 아니라 많은 기능을 제공해 주는 크롬 개발자 도구가 무엇이고 왜 필요한지에 대해 설명드리도록 하겠습니다. 중점은 디버깅("Console", "Source" 탭에서 활용)이지만, 디버깅뿐만 아니라 크롬 브라우저에서 제공해 주는 다양한 기능에 대해서도 설명드리겠습니다. 

 

크롬 개발자 도구 화면

 

html, css, javascript는 서버의 어떤 요청을 받았을 때 내려받게 되는 자원들입니다. 이 언어들은 컴파일이 된 상태에서 불러오지 않고, 런타임 시점에 언어가 브라우저에서 해석됩니다. 이들이 잘 동작하지 않을 때 크롬 개발자 도구를 띄워놓고 쉽게 찾을 수 있게 됩니다. 

 

또한 HTTP 통신과정, HTML 구조, CSS 스타일, Javascript 디버깅, 프로파일링, 성능 진단 등을 할 수 있습니다.

 

크롬 개발자 도구를 설명하기 전에 브라우저 동작 절차에 대해 간략하게 설명드리겠습니다.

 

Browser Main flow

 

1. HTML은 HTML Parser에 의해 DOM Tree라는 구조로 변환되고, CSS도 CSS Parser에 의해 해석됩니다.
2. HTML, CSS에 대한 정보를 기반으로 Render Tree를 만들고, Layout가 Painting을 통해 어떤 위치에 어느 정도 크기의 어떤 스타일로 표현할지를 결정
3. 이 과정이 마무리 되면 Display 과정에 의해 웹 브라우저에 HTML 문서나 파일 등을 화면에 표시합니다.

이제 브라우저의 flow에 대해 알아봤으니 크롬 개발자 도구의 기능을 하나씩 살펴보겠습니다.

 

크롬 개발자 도구 탭

 

Element, Network, Source, Console, Memory, Application, Security 등 다양한 탭이 존재합니다. 저는 Element, Network, Source, Console 탭에 대해서 자세히 설명드리려고 합니다.

 

Element

• html, css rendering  및 painting이 잘 되었는지 확인 및 속성 변경 기능을 제공합니다.
• 결과뿐만 아니라 HTML 구조나 CSS 속성을 다양한 방법으로 추가/삭제/변경할 수 있어 빠르게 디버깅을 할 수 있습니다.
• DOM Inspection, CSS Style 변경

 

Console

• JavaScript 개발에서 필수적이고, 크롬 개발자 도구에서 가장 많이 쓰이는 기능입니다.
• 간단하게 Javascript 코딩이 가능합니다.
• 현재 화면에서 로딩된 결과들을 불러서 이곳에서 확인을 해볼 수 있기 때문에 breakpoint를 잡아두고 그 시점에서 테스트가 가능합니다.
• “ESC” 키로 모든 탭에서 언제든지 쉽게 열어서 사용이 가능합니다.

 

Source

• Javascript 개발자들 입장에서 가장 중요한 탭, breakpoint를 잡아서 debugging이 가능
• Javascript는 런타임 시에 → 뭔가 실행되는 시점에서 해석이 됩니다. (인터프리터 언어)
• ajax 통신시에도 breakpoint를 지정해서 디버깅이 가능(xhr 설정)

 

Network

• Server, Client간 데이터 전달이 잘 되었는지 확인 (HTTP 통신 과정)
• 응답 코드, 프로토콜, 상태 정보, Style, time에 대한 정보도 확인이 가능합니다.
• 클라이언트 성능 개선 지점을 분석하고 찾기 위해 다양하게 활용이 가능합니다.
• 새로고침을 하면 Server로부터 내려받은 자원들을 확인할 수 있습니다.
• Request Header, Response Header 등의 정보를 통해 서버에 어떤 값을 요청했고, 응답받았는지 확인이 가능합니다.

 

효율적인 디버깅 방법 

• breakpoint를 찍을 지점에 debugger statement 삽입 (debugger;)
• console.log()를 사용할 경우
  • console.table(), console.dir() 메서드 적용하여 시각적으로 편하게 디버깅
• console.log()를 많이 사용할 경우
  • var c = console.log.bind(document)를 적용
  • console.log(v1), console.log(v2) -> c(var1), c(var2)로 코드 간소화가 가능

 

<참고 자료>

https://yozm.wishket.com/magazine/detail/1585/

웹 개발 시간을 줄여주는 팁 4가지 | 요즘IT