크롬 브라우저로 디버깅 하기

크롬 브라우저로 디버깅 하기

크롬에 내장된 개발자 도구를 사용하면 편리하게 디버깅 할 수 있다. 

 

<script>
var num1 = 100, num2 =200, num3;
var t1 = "hello", t2="js";
document.write(num1+num2,"<br/>");
document.write(t1,"<br/>");
document.write(t2);
</script>

 

실행화면

 

위의 코드에 고의로 오류가 발생하도록 코드를 작성해 디버깅 해보자.

 

---

 

콘솔(Console) 패널을 이용한 디버깅

 

<script>
var num1 = 100, num2 =200, num3;
var t1 = "hello, t2="js";
document.write(num1+num2,"<br/>");
document.write(t1,"<br/>");
document.write(t2);
</script>

 

코드에서 t1 hello 뒷 부분에 큰 따옴표를 삭제해서 실행하면 오류이기 때문에 아무것도 출력되지 않는다.

 

크롬 브라우저에서 F12키(또는 오른쪽 클릭-검사)를 눌러 개발자 도구를 열고 Console 패널을 활성화 한다.

 

오류가 발생한 파일명과 행을 나타낸다.

 

그러면 오류가 발생한 부분을 알 수 있게 되는데, debugging.html 파일의 8행의 코드를 수정하면 오류를 해결할 수 있다고 알려준다.

 

해당 부분에 Syntax Error

 

---

소스(Sources)패널을 이용한 디버깅

앞에서의 오류를 다시 이용해서 이번에는 Sources패널을 클릭한다. 그리고 현재 실행한 HTML파일을 찾아 선택하면 개발자도구의 오른쪽 창에 코드가 나타난다. 이 때 새로고침 버튼을 누르면 오류표시가 나타난다. 즉 해당 위치에서 오류가 발생한 것으로 이렇게 소스 패널을 활용하면 오류를 쉽게 수정할 수 있다.

 

오류난 위치에 오류를 표시해준다.

 

---

소스 패널의 중단점(BreakPoints)을 이용한 디버깅

 

<script>
var num1 = 100, num2 =200, num3;
var t1 = "hello", t2="js";
document.write(num1+num2,"<br/>");
document.write(t1,"<br/>");
document.writ(t2);
</script>

 

기존 코드에서 writ(t2)로 일부러 작성하고 실행해 소스 탐색창을 열어 현재 HTML파일을 선택한다.

 

BreakPoint는 행번호를 클릭해 설정할 수 있다.

행번호를 클릭해 중단점을 생성하는데, 생성한 중단점은 BreakPoints 창 영역에 추가된다. 새로 고침을 눌러 파일을 다시 로딩하면 설정한 중단점 위치에서 프로그램이 정지되어 있음을 확인할 수 있다. 여기서 F11키를 누르면 프로그램이 한 줄씩 실행된다. 만약 나머지를 한 번에 실행하려면 F8키를 누르면 된다. 이 기능은 프로그램의 오류를 찾거나 실행 과정을 확인할 때 매우 유용하다.

 

---

소스 패널의 중단점(BreakPoints)과 Watch를 이용한 변수 체크

여기서 Watch와 중단점을 함께 사용하는 방법을 알아보자. Watch에는 관찰하고 싶은 변수를 등록할 수 잇다. 그리고 중단점부터 프로그램을 한 줄씩 실행하면 Watch에 등록한 변수의 값을 관찰할 수 있다.

 

<script>
var num1 = 100, num2 =200, num3;
var t1 = "hello", t2="js";
document.writ(num1+num2,"<br/>");
document.write(t1,"<br/>");
document.write(t2);
</script>

 

기존 코드에서 writ(num1+num2,"<br/");로 오류를 내 확인해보자.

 

파일을 실행한 후, 소스 패널에서 중단점을 등록한 다음 Watch탭에서 +버튼을 눌러 변수를 등록한다. 

Sources패널에서 Watch 탭의 +를 눌러 변수를 등록한다.

 

그 후 F5를 눌러 새로고침한 후 F11키를 누르면서 Watch에 등록된 변수를 관찰할 수 있다.

 

새로고침했을 때 num1: undefined

 

F11을 눌렀을 때 num1:100

 

F11키를 누르면서 확인한 결과 writ 부분에서 num1이 not available로 바뀌는 것을 확인할 수 있다.