웹개발을 하다보면 js(javascript)를 쓰게 되는데 js란게 워낙 관대한 언어라 에러가 나면 어디서 에러가 났는지 찾기가 힘들다. 디버깅 툴을 이용하면 이러한 에러를 쉽게 확인할 수 있는데, 이런 디버깅 툴이 있는지 조차 모르는 분들이 많다. IE8 부터 기본적으로 들어가 있다. 실행키는 IE에서 F12
일단 간단한 HTML을 작성한다. 소스는 버튼을 클릭하면 경고창을 띄우는 소스이다.
소스중에 alert(test)를 alert(test1) 로 바꾸어서 에러를 만들어 실행해보자.
아까와는 다르게 alert창이 나오지 않고 아무런 반응이 없을것이다.
이때 브라우져를 한번 클릭하고 F12를 클릭하면 아래와 같은 창이 나타난다. 이게 디버깅툴인데 스크립트 탭을 클리갛고 디버깅시작 버튼을 클릭하자. 그럼 아래와 같이 디버깅 중지로 변경되어 나타날 것이다.
이제 다시한번 IE로 가서 버튼을 클릭해보자 그럼 아래와 같이 디버깅툴이 자동으로 팝업되면 에러사항을 표시해 줄 것이다.
이렇게 하면 실제 수백줄 되는 코드속에서 에러를 쉽게 찾을수 있을것이다.
그외에 추가적으로 내가 보고싶은 변수에 값도 볼수가 있는데
디버깅중에 해당 변수를 드래그 하고 오른쪽버튼을 클릭 -> 조사식 추가
를 해주면 우측에 조사식탭에 해당 변수가 들어가면 값이 변화를 볼수있다.
일단 간단한 HTML을 작성한다. 소스는 버튼을 클릭하면 경고창을 띄우는 소스이다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<meta name="author" content="Administrator" />
<!-- Date: 2011-08-18 -->
<script type="text/javascript" charset="utf-8">
function test(){
var test = "1";
alert(test);
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="click">
</body>
</html>
IE로 실행하면 아래와 같이 나온다
 |
 |
소스중에 alert(test)를 alert(test1) 로 바꾸어서 에러를 만들어 실행해보자.
아까와는 다르게 alert창이 나오지 않고 아무런 반응이 없을것이다.
이때 브라우져를 한번 클릭하고 F12를 클릭하면 아래와 같은 창이 나타난다. 이게 디버깅툴인데 스크립트 탭을 클리갛고 디버깅시작 버튼을 클릭하자. 그럼 아래와 같이 디버깅 중지로 변경되어 나타날 것이다.
 |
 |
이제 다시한번 IE로 가서 버튼을 클릭해보자 그럼 아래와 같이 디버깅툴이 자동으로 팝업되면 에러사항을 표시해 줄 것이다.
이렇게 하면 실제 수백줄 되는 코드속에서 에러를 쉽게 찾을수 있을것이다.
그외에 추가적으로 내가 보고싶은 변수에 값도 볼수가 있는데
디버깅중에 해당 변수를 드래그 하고 오른쪽버튼을 클릭 -> 조사식 추가
를 해주면 우측에 조사식탭에 해당 변수가 들어가면 값이 변화를 볼수있다.
변수가 객체일경우 해당 객체에 속성값들도 볼수있어 편하게 개발할 수 있다.
'웹개발' 카테고리의 다른 글
| [JAVA] override , overload (2) | 2011.09.22 |
|---|---|
| [JAVA] 대용량 엑셀 반출 heavy excel export (0) | 2011.09.07 |
| [웹개발/TIP] ie6,ie7,ie8, 인터넷 익스플로어에 따른 개발 방법 (0) | 2011.08.18 |
| [MyBatis/iBatis] 초간단 환경 설정 (0) | 2011.07.12 |
| [MyBatis/iBATIS] iBATIS기초 - JNDI설정 (0) | 2011.07.12 |