JavaScript 오류 지점 찾아내기
예전부터 소스코드를 칠때 JavaScript언어의 디버깅 때문에 많이 힘들었을 겁니다.
물론 저도 마찬가지였고요.
JavaScript 구문이 오류가 나면 예전엔 어는 부분에서 에러가 낫는지 찾기 힘들었습니다. 웹브라우져는 정상적으로 구동하는데 JavaScript 오류 구문 때문에 제대로 웹프로그램을 짤수 없었습니다.
그래서 예전에는 의심이 가는 JavaScript 구문에 다음처럼 alert("어디까지왔니?"); 구문을 뛰워서 정상적으로 팝업창에 alert가 뜨면 거기까진 문제가 없다고 보고 점차 코드를 찍어서 일일이 확인 했습니다.
하지만 이제 웹 브라우져들의 기능이 강력해져 JavaScript언어에 흐름이 어디까지 갔는지도 체크 해볼수도 있고 디버깅 하기도 쉬워졌습니다.
간단한 구문으로 크롬 환경에서 JavaScript 디버깅을 해보겠습니다.
Source.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function clickcheck() {
for (var i = 0; i <= 10; i++) {
alert(i);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<button onclick="clickcheck()">클릭</button>
</body>
</html>
위 구문은 단순히 button에 JavaScript 함수내에 숫자를 화면에 출력하는 구문입니다.
그다음 크롬 브라우져를 해당 html 파일을 연뒤에 F12를 누르게 되면 다음과 같은 화면이 나오는데 아래 표시된 빨간색 네모칸에 Sources 부분을 누릅니다.
Source 메뉴를 누르게 되면 다음과 같은 메뉴들이 나오는데 아래 이미지에 나온대로
1번 네모칸에 표시된대로 디버깅할 위치를 지정한다음
2번 클릭을 눌러 JavaScript 구문을 실행 시킨뒤에
3번을 눌러 해당 JavaScript 구문을 한단계씩 실행 시킬수 있습니다.
이렇게 되면 해당 구문을 찍어보면서 정확한 값을 확인할수 있습니다. 3번을 눌르면 한단계씩 소스가 실행되기 때문에 소스의 흐름을 정확히 파악할수 있습니다.
다음은 JavaScript 오류를 일부러 내보겠습니다.
F12번을 눌러 실제로 오류를 내보면 다음과 같이 오류 구문이 정확히 표시가 됩니다. 어느구문에서 오류가 났는지요. 그러면 JavaScript 오류도 이제 일일히 alert를 찍어보면서 소스를 하나씩 확인해 볼 필요가 없습니다! 해당 오류 구문을 누르게 되면 아래 이미지 처럼 오류가 난곳을 보여줍니다.
게다가 직접 소스코드도 나오니 이보다 편할수가없네요
JavaScript 언어를 작성하고 테스트를 하려면 먼저 소스코드를 치고 그다음 웹에서 매번 확인을 하다보면 작업 속도도 느려지고 소스 코딩을 정확히 했는지도 궁금 합니다.
그럴땐 F12를 누르고 Console메뉴에서 직접 JavaScript 구문을 넣어서 테스트도 해볼수 있습니다. 이곳에서 테스트를 미리 하고 소스에 적용하면 매우 편할 것입니다.
이번엔 익스플로러 환경에서 JavaScript 디버깅을 해보겠습니다.
크롬과 별로 다를게 없습니다. 하지만 크롬이 더강력합니다. 직접 써보시면 알겁니다. 더편하고 빠르고 오류도 많이 없으니깐요
스크립트 메뉴를 누르고 break 지점을 빨간색 동그라미 표기된곳을 누른뒤에 디버깅 시작을 누릅니다.
그이후 JavaScript를 실행하기 위해서 버튼을 눌러줍니다. 이런식으로 해도 진행은 되나 계속 작업종료가 되버리는 현상이 나더군요
아래 이미지 처럼 JavaScript 소스 코드를 아래 구문에 넣고 화살표 방향을 실행을 누르면 익스플로러도 바로 JavaScript 구문을 실행할수 있습니다.
아무래도 익스플로러 보단 JavaScript를 디버깅 하기위해서는 크롬 환경의 브라우져를 쓰실것을 추천합니다.
