[Javascript] 브라우저에서 Javascript 프로그래밍 디버깅하는 방법

Study/Javascript, Jquery, CSS

[Javascript] 브라우저에서 Javascript 프로그래밍 디버깅하는 방법

v명월v 2020. 3. 25. 01:55

안녕하세요. 명월입니다.

이 글은 브라우저에서 Javascript 프로그래밍 디버깅하는 방법에 대한 글입니다.

이전에 브라우저에서 css style를 개발하는 방법, 브라우저 개발 모드를 설명한 적이 있습니다.

링크 - [CSS] 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드)

이 브라우저의 개발 모드는 document의 element 구성 표시와 css 상태 뿐 아니라 javascript와 cookie, console, network 등 개발에 필요한 개발 도구가 있습니다.

위 이미지는 크롬(Chrome) 기준입니다.

먼저 network를 살펴 보면, browser와 웹 서버간에 link 파일과 이미지등의 다운로드 속도에 대한 성능을 나타냅니다. 간단하게 제 블로그를 클릭해서 들어갔는데 모든 객체를 다운 받는데 2.2초(2200ms)정도 걸렸네요.

이런 많은 유저가 접속하는 포털 사이트 급에서 2.2초면 굉장히 느린 것입니다. 특히 메인 html 페이지가 1.41초면 어머어마하게 느린 것입니다. 처음 사이트 서버를 구축을 할 때, 대상 트래픽도 어느정도 고려를 해서 설계를 하는데 티스토리는 국내용 트래픽 위주로 설계했기 때문에 외국에서는 조금 많이 느린감이 있습니다. (제가 일본에 있습니다.)

그리고 network에서 headers를 누르면 request, response 해더 정보가 표시됩니다.

그리고 Cookies를 누르면 페이지의 쿠키 정보도 깔끔하게 나옵니다.

아래의 소스를 브라우저에서 열어 보겠습니다.

<!doctype html>
<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <script>
    // data 변수에 값을 넣는다.
    var data = "hello world";
    // 콘솔 창에 결과를 표시한다.
    console.log(data);
    // 브라우저에서 브레이크 포인트를 찍는다.
    debugger;
  </script>
 </body>
</html>