javascript debugger (자바스크립트 디버거)

( ※ 모든 사진은 클릭시 확대해서 보입니다 )

 

자바스크립트 디버거에 대해 알아보자.

 

이미 알고 계신분도 많지만, 모르고 있으신 분들도 많다고 생각한다..

저랑 비슷한 경력이나 배우고 있거나 이제 일을 막 시작했거나 하는경우에는 말이다..(참고로 전.. 현재 1년쯤..)

 

디버거라는 녀석은 정말정말 많은 도움이 된다.

오류를 찾아 수정할때라던지, 다른 사람의 소스를 분석할때라던지 정말정말 도움이 된다고 생각한다. (다른분들은 모르겠지만 개인적으로는..)

그래서 알아두고 있으면 정말 코딩하는데 도움이 될 것이라 저는 생각합니다!!ㅎ

 

지난번에 중복제거에서 잠깐 언급을 했었는데,

그 소스를 가지고 크롬에서 간략하게 보도록 하겠습니다.

 

 

위와 같이 어떠한 로직에 이클립스에서 디버거를 할때 breakpoints 를 찍듯이 지점에 debugger; 라고 적습니다. 그리고 저장을 하고 브라우저에서 어떻게 되는지 확인을 해보겠습니다.

 

 

 

위와 같이 화면을 띄우고 F12를 눌러 개발자모드를 엽니다!

그리고 debugger가 적혀있는 로직을 태우면 다음과 같이 debugger모드가 실행됩니다.

 

 

위와 같이 debugger 모드가 실행되는 것을 볼 수 있고, 우리는 이 것을 제어 할 수 있습니다.

 

많이 쓰는 3가지 정도 기능을 알아보면

첫번째, 단축키로는 F8 이고, 다음과 같은 버튼이다. 왼쪽 화면과 오른쪽 화면에서 모두 찾아 볼 수 있다. 이 버튼은 쉽게 말해서 다음 debugger라던지 breakpoints를 찾아간다고 보면 된다. 한번에 슈융 하고 넘어간다. 만약에 다음 debugger랑 beakpoints가 없으면 디버거가 종료 된다고 보면 된다.

 

 

두번째, 단축키는 F10이고, 다음과 같은 버튼이다. 이 역시 많이 쓰이기 때문에 왼쪽화면과 오른쪽 화면에서 모두 찾아 볼 수 있다. 이 버튼은 쉽게 말해서 한줄씩 넘어간다고 보면 된다. 이클립스에서는 F5 단축키에 해당한다, 그래서 디버거를 사용하다보면 자주 이클립스랑 혼동을 한다...ㅠ

 

 

세번째는, 단축키는 F11이고, 다음과 같은 버튼이다. 이는 많이 사용이 안되다보니 오른쪽에만 배치되어 있는 것 같다. 이 버튼은 쉽게 말하면 function이 보이면 다 들어간다고 보면 된다. 한줄씩 넘기다가 어떠한 function을 만나면 그 function으로 넘어가게 된다.

 

 

 

다음으로 간략하게 어떻게 넘어가지는 보여드리겠습니다.

관리자도구를 열어 debugger를 입력한 곳에 debugger가 걸린 모습입니다.

 

 

 

 

첫번째는 가장 많이 사용되는 F10을 눌러보겠습니다.

그럼 다음과 같이 한줄이 넘어가는 것을 볼 수 있습니다.

 

 

두번째는 해당줄에 function이 있으면 찾아 들어가는 F11을 눌러보겠습니다.

그럼 다음과 같이 인클루드한 jquery js 파일로 찾아 가는것을 볼 수 있습니다.

 

 

 

그 다음 이 함수를 빠져나와 마지막으로 F8을 눌러보겠습니다.

 

 

위에 모습은 jqeury 함수를 빠져나온 다음 모습이고, F8을 누르기전에는 위에서도 간략하게 설명 했듯이 다음 debugger 구문이 있거나, breakpoints가 있어야 합니다. 그래서 저는 F8을 누르기 전에 57번 라인에 breakpoints를 지정 해놨습니다. ( breakpoints를 지정하는 것은 해당 라인 숫자를 클릭하면 간단하게 지정 할 수 있습니다.)

그 후에 F8을 누르면 다음 breakpoints로 이동 하는 것을 볼 수 있습니다.

 

 

이 과정에서 제가 생각하는 가장 좋은 장점은 콘솔창을 제어 할 수 있는 점이라고 생각합니다. 이클립스 같은 경우에는 variable 테이블이 있긴 하지만 콘솔창에서 직접 변수를 써서 확인하거나 코딩을 할 수가 없는데 이 곳에서는 그 것이 가능해 코딩을 하기에 정말 좋은 것 같습니다. 예를 들어 스크립트 구문을 짜고 이곳에서 확인하는 것이 아니라 이 곳에서 먼저 테스트를 해보고 구문을 넣을 수가 있어서 확인과정을 한번 줄 일 수 있습니다.

 

위와 같이 콘솔창에서 실행구문이 넘어간 후론 콘솔창에서 입력하여 확인 할 수가 있으며, 전혀 없는 변수인 a를 선언해서 확인할 수 있듯이 테스트도 해 볼 수 있습니다. 그리고, 그 해당 변수의 타입에 따라 딸려 있는 함수를 바로 확인 할 수 있어 사용하기에도 더욱 편리합니다.

더욱 와 닿는걸 하나 보여드리면,

 

 

엑셀 업로드 테스트를 하는 로직인데 ajax로 가서 원하는 데이터를 여러개 가져 오는 것입니다. returnData라는 변수에 담겨져 오는데, 여러가지 타입이 담겨져 옵니다. 처음으로 returnData라는 것을 입력하면, 그 안에 map 데이터로 data, sheetContent라는 이름을 가진 것이 있고, 그 안에는 또 returnData.data를 입력해서 확인하면 문자 배열이 하나 있고, 다른 returnData.sheetContent에는 여러개의 배열들이 있고 그중에 하나를 골라 returnData.sheetContent[0]을 입력하면 map으로 들어있는 데이터를 확인 할 수 있습니다. 그렇기에 좀 더 정보를 확인 할 수 있고, 코딩하기에도 좋다고 생각을 합니다.

 

결론은!! debugger를 사용해 좀 더 쉽고 빠르게 오류도 확인하고, 정보도 확인해서 잘 하는 개발자가 같이 됩시다!ㅎ

 

아 그리고 마지막으로, 다른 브라우저도 사용이 가능하다는것을 보여드리고 마무리 짓겠습니다.

 

< 익스프롤러, 개발자모드 F12 >

 

< 파이어폭스, 개발자모드 F12 >

 

<오페라, 개발자모드..를 못찾아서 우클릭해서 요소검색으로 했습니다..>

 

오늘도 좋은 하루 되세요  ^ ^ㅎ