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


Study/Javascript, Jquery, CSS  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>

브라우저에서는 debugger; 에서 브레이크 포인트가 걸려서 디버깅이 멈추게 되어있습니다.

그럼 오른쪽에 debugger용 파넬도 있고 watch포인트와 scope등 프로그래밍 도구가 있습니다.

코드 에디터의 라인을 클릭하면 브레이크 포인트가 추가되어 재갱신을 하게 되면 브레이크 포인트에 걸리게 되어있습니다.


console.log는 console 탭으로 가보면 data의 값이 표시가 됩니다.

예전에는 alert으로 자바스크립트의 값을 확인하던 시절이 어제 같은데 많이 좋아졌네요..


console 화면에서는 그 상태에서 여러가지 값을 바로 확인하거나 테스트할 수 있는 도구이기도 합니다.

위 예제는 data의 문자 길이를 출력해 보았고 console에서 요소(element)를 추가도 해보았습니다.

요소가 추가된 것을 확인할 수 있습니다.


그리고 application 탭을 이동하면 cookie를 확인할 수 있습니다.

그리고 cookie를 브라우저에서도 추가를 할 수 있습니다.

network 탭으로 가서 headers를 보면 Request Headers의 cookie에 데이터가 있는 것을 확인할 수 있습니다.


여기까지 브라우저에서 Javascript 프로그래밍 디버깅하는 방법에 대한 글이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.