48897 Members __ Online

정렬
HOME스터디[s]프로그램(종합)

[AJAX] 강의 7-2장 - 디버깅툴/FireFox 자바스크립트 콘솔

posted by 라부
date : , update :
hit : 17331, scrab : 0 , recommended : 0 , attach : 2

지난 7-1장에서는 Ajax와 직접적으로 관련된 XMLHttpRequest debugging 툴을 살펴보았다. 이이서 자바스크립트의 코드를 디버깅 할 수 있는 툴에 대해서 알아보자. 앞으로 파이어폭스의 자바스크립트 콘솔, Microsoft Script Debugger, Venkman 에 대해서 소개할 것이다.

 

먼저 파이어폭스의 기본 기능인 자바스크립트 콘솔에 대해서 알아보자. 사실 이 툴에 대해서 기대를 많이 했지만 여러모로 테스트를 해 본 결과 그리 영리한 툴은 아니며 실전에서 활용하기에는 많이 부족하다는 결론에 도달하였다.

 

자바스크립트 콘솔을 실행하려면 파이어폭스 메뉴의 도구 -> 자바스크립트 콘솔을 클릭하면 된다.

 

사실 현재 잘 실행되고 있는 웹 페이지를 열어본 후에 자바스크립트의 콘솔을 실행시키면 많은 수의 에러리스트를 확인 할 수 있을 것이다. 네이버 홈페이지에 접속해서 자바스크립트 콘솔을 실행시켜 보자.


a7201
 
위 그림의 에러 리스트들은 자바스크립트 코드와는 거리가 먼, 사실 W3C 의 웹 표준을 지키지 않아 발생한 Warining 들이 대부분이다. HTML Validator 가 설치되어 있다면 잘 따져보기 바란다. 모든 항목이 일치하는 것은 아니지만  HTML Validator 가 지적하고 있는 Warining 을 자바스크립트 콘솔은 에러라고 표시하고 있다.
 
AJAX 강의 5-2장 - FireFox 확장기능을 이용한 HTML 코드검사 에서도 언급했었지만 HTML Validator 는 자바스크립트 코드의 에러를 감지하지 못한다. 웹 페이지의 요소가 W3C 의 표준에 어긋나는지 검사해 줄 따름이다. 자바스크립트의 메소드에서 브레이스 }을 일부러 생략하고 자바스크립트 콘솔이 표시하는 항목을 살펴보자.

 
a7202
 
HTML Validator 는 자바스크립트 코드의 문법적 오류를 잡아주지 못하지만 자바스크립트 콘솔은 위 그림처럼 오류를 지적해 준다. 오류가 69 라인에서 발생했다는 정보만으로는 정확히 어느부분에서 브레이스가 생략되었는지 알 수 없다. </script> 의 마지막 라인을 가리키고 있기 때문이다. 하지만 최신 객체지향 언어의 IDE 툴에서 조차 브레이스를 누락했을때 보여주는 에러 메시지도 클래스의 마지막 브레이스 부분에서 구문오류가 발생했다는 메시지를 보여주므로 그리 큰 문제는 되지 않을 것이다.
 
AJAX 강의 5-4장 - 자바스크립트 소스코드 검증기 JSLint 에서 소개한 JSLint 보다는 좀 더 쓸만하다는 것에 위안을 삼고 있다. 하지만 실전에서 사용하기에는 많이 아쉬운 것이 사실이다.
 
 
출처 - http://blog.naver.com/jinoxst








ajax, 강좌
댓글 0 | 엮인글 0

[AJAX] 강의 7-3장 - 디버깅툴/Microsoft Script Debugger
[AJAX] 강의 7-1장 - 디버깅툴/XMLHttpRequest Debugging





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D64%22%3E%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8%28%EC%A2%85%ED%95%A9%29%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E