기술비밀공유소
기술비밀공유소에서는 소프트웨어 개발과 IT 혁신을 위한 열쇠를 공유합니다. 비밀스런 기술 지식과 새로운 동향을 함께 탐구해 보세요.

크롬개발자도구로 효율적으로 디버깅하는방법

29 May 2019 » browser

저는 과거에 프론트앤드 업무중 디버깅을 할때 개발자들 대부분이 사용하는 console.log(), alert() 를 코드소스 중간중간 끼워넣으며 상태를 출력, 변수를 모니터링 했습니다. 위 방법은 간단한 오류에서는 괜찮은 방법일 수 있으나 다른 라이브러리를 로드하거나 문서를 읽는 과정에서 발생하는 오류가 복잡하게 꼬여버린다면 매번 위 방법으로 하는건 엄청난 노가다이며 효율적이지 못합니다. 그래서 브라우저 개발자도구를 적극활용하여 효율적으로 디버깅하는 방법을 포스팅해봅니다.

목차

  1. 디버깅, 크롬 개발자도구란?
  2. 자바스크립트 디버깅 라이브러리를 사용하지 않은 순수 자바스크립트(Vanilla JS) 사용 예제

이 글에서는 1번 디버깅, 크롬 개발자도구를 알아보고 2번 basic편을 포스팅하겠습니다.

1. 디버깅, 크롬 개발자도구란?

디버깅이란?

debug_01

버그란 1945년 프로그래밍 언어 COBOL의 개발을 주도한 그레이스 호퍼가 Mark ll의 오작동 원인을 찾는중 컴퓨터에 나방이 껴있는걸 발견한 것을 최초 버그라고 기록되어있다고 합니다. 프로그래밍, 개발중 오작동, 오류가 발생한것을 버그라고하고 이 버그를 해결하는것을 디버깅이라고 합니다.

크롬 개발자도구란?

단어 그대로 크롬브라우저에 내장되어있는 개발자도구라고 보면되겠습니다. 개발자도구로 많은것을 할수있는데 웹 어플리케이션을 개발하고 수정/최적화하는데 필요한 다양한 기능을 제공합니다.자바스크립트 디버깅뿐 아니라 모바일 기기 시뮬레이터, 네트워크 분석, 최적화에 대해 검사도 해줍니다. 포스팅에는 Elements, Console, Sources 패널에대해 알아보겠습니다.

2. 자바스크립트 디버깅

debug_02

우선 실습을 위해 https://github.com/subicura/javascript-debugging-example 에서 다운로드 합니다. 그리고 실습을 위해 Node.js를 설치하여 서버세팅을 하고 npm install과 npm start 명령어를 입력하여 3000번 포트로 웹서버를 실행시킵니다. 크롬으로 웹서버 실행 후 http://localhost:3000/vanilla.html 에 접속합니다.

debug_03

위 화면에서 name, message의 input 과 textarea영역에 값을 입력하고 submit버튼을 클릭했을때 제가 원하는 결과값은 message_test가 위에나오고 name_test가 아래에 나오는걸 기대했지만 실행결과는 그 반대로 나오는걸 확인할 수 있습니다. 이제 원하는 결과값으로 나오게 하기위해 디버깅을 통하여 수정해보도록 하겠습니다.

1. Breakpoints(중단점 걸기)

원하는 결과값으로 수정하기 위해서는 이벤트가 발생하는 시점에 breakpoints를 걸어 데이터가 코드로부터 어떻게 반응하고 데이터가 어디로 어떻게 전송되는지 확인해야합니다. 중단점을 특정 이벤트에 부여할수는 있지만 만약 코드가 복잡하거나 자신에게 익숙하지 않은 코드라면 직접 부여하기가 쉽지 않을것입니다.

하지만 크롬 개발자도구에는 글로벌한 이벤트에 대하여 중단점을 만들 수 있는 기능이 있습니다. 위 예제의 경우 submit 이벤트에 중단점을 생성해야합니다. 아래 이미지처럼 이벤트 중단점에 체크해줍니다.

debug_04

순서

  1. 크롬 개발자도구
  2. Sources
  3. Event Listener Breakpoints
  4. Control
  5. Submit <- 체크!

체크를 완료했으면 값을 입력하여 submit버튼을 클릭하여 이벤트를 실행시켜줍니다.

debug_05

이벤트를 실행시켜보니 vasilla-script.js 파일의 15Line에 코드의 흐름이 중단되는걸 볼 수 있습니다.

만약에 어떤 파일의 어떤 함수를 수정해야할지 모르는 상태에서 submit 이벤트가 발생한다 추측했을때 위처럼 breakpoint를 잡는 방법은 정말 괜찮은 방법인것같습니다.


2. Step(단계별 코드실행)

코드를 한줄 한줄 단계별로 실행했을때 스크립트가 어떻게 실행되는지, 변수가 어떻게 저장되어 있는지 확인해볼 수 있습니다. 개발자도구에서 중단점인 15line 의 e.preventDefault(); 코드부터 Step over next function call 버튼을 클릭해봅니다.

image

Step over next function call 버튼을 updatePost 함수까지 실행시켜봤을때 디버깅 정보창의 Scope 섹션에서는 현재 시점의 변수값을 확인해볼 수 있습니다. 확인해보니 name 과 message 변수는 정상적으로 할당되어있는걸 확인할 수 있습니다.

image

그럼 이제 updatePost 함수를 자세히 살펴보겠습니다. updatePost함수에서 Step into next function call 을 클릭하여 updatePost 함수로 이동합니다. updatePost 함수를 단계별로 또 실행해보니 PostHtml에 이름과 메시지가 반대로 들어간 것을 알 수 잇습니다.


3. 콘솔창에서 테스트 해보기

아래 이미지의 순서대로 console창에서 실행해봅니다.

image

  1. postHtml = 입력하면 1번처럼 값이 나옵니다.

  2. copy(postHtml) = 이제 수정해야할 아래 postHtml값의 코드를 복사해줍니다.

<blockquote class="blockquote text-center">
  <p class="mb-0">nameTest_02</p>
  <footer class="blockquote-footer">messageTest_03</footer>
</blockquote>
  1. 코드를 입력하여 postHtml 값의 코드를 수정해줍니다. 수정이 끝났으면 남은 submit 이벤트를 클릭하여 실행합니다.
<blockquote class="blockquote text-center">
  <p class="mb-0">messageTest_03</p>
  <footer class="blockquote-footer"> nameTest_02</footer>
</blockquote>

image

그 결과 message 텍스트가 위로 name 텍스트가 아래로 바뀐것을 확인할 수 있습니다.

  1. 소스창에서 테스트해보기

image

소스창에서 테스트하는방법은 더 간단합니다. 그냥 디버깅을 9Line까지 실행하였다면 위 이미지에 표시되어있는 코드를 바꿔주면 끝입니다.

해당 포스팅은 subicura님의 https://github.com/subicura/javascript-debugging-example 의 오픈소스로 예시를 통하여 포스팅 하였으며 저는 https://subicura.com/2018/02/14/javascript-debugging.html 포스팅을 통하여 스터디를 하였습니다.

Related Posts