자바스크립트 개발환경 및 디버깅

프론트엔드 관련 테스트를 하면서, 항상 사용했던 것이 브라우저의 개발자 도구이다. 개발자 도구를 통해서 어떤 행동을 할 수 있을지를 아래에서 설명한다.

 

1.1 개발자 도구

크롬 브라우저가 제공하는 개발자 도구(DevTools)은 자바스크립트 개발에 필수적인 강력한 도구이다. 개발자 도구는 브라우저에 기본 내장되어 있으므로 별도의 설치가 필요없다. 개발자 도구는 아래의 단축키로 오픈할 수 있다.

단축키

Windows	F12 또는 Ctrl + Shift + I
macOS	command ⌘ + option ⌥ + I

 

 

예전에 프론트엔드를 개발할 때 가장 어려운 것이 무엇일까요? 라는 질문을 들은 적이 있다. 그 때의 나는 디버깅이 아닐까요 라고 대답을 했던 것 같다. 

사실 프론트엔드의 디버깅을 내가 잘 할 줄 몰라서 말했던 대답인거 같은데, 웹 브라우저를 통해서도 바로 될 수 있다고 한다.

1.4 디버깅

에러 정보의 오른쪽에 에러 발생 위치를 나타내는 링크를 클릭해보자. 자바스크립트 코드를 디버깅을 할 수 있는 Sources 패널로 이동할 것이다.

Sources 패널

에러가 발생한 위치에 빨간 밑줄이 표시되고 그 위에 마우스를 올려 보면 Uncaught TypeError: Cannot set property ‘innerHTML’ of null이라는 에러 정보가 표시된다. 이 에러는 innerHTML 프로퍼티에 값을 할당하기 위해 객체 $conter를 참조했으나 그 객체가 null이기 때문에 발생한 에러다. $conter의 값이 null인지 확인해보고 null이라면 그 이유를 알아내어 에러 발생 원인을 제거해 보자. 에러가 발생한 코드 왼쪽의 라인 번호를 클릭하여 브레이크 포인트(중단점)을 걸고 다시 버튼을 클릭하면 아래와 같이 디버깅 모드로 들어가게 된다.

디버깅 모드

$conter의 값이 null인 것을 확인했다. 그 원인은 13 라인에서 $conter에 값을 할당할 때, HTML 요소의 아이디를 ‘counter-x’로 잘못 지정한 탓이다. 다시 소스코드로 돌아가 HTML 요소의 아이디를 ‘counter’로 정확히 지정하면 에러가 제거될 것이다.

 

자바스크립트 IDE

자바스크립트 IDE의 인기 순위 이미지이다. vs code가 압도적으로 인기가 많고, 나머지는 비슷한 것을 볼 수 있다. 

jetbrain 전체 패키지 라이센스가 있으니까, webStorm을 써보는 것으로 해야겠다.