IE에서의 웹 개발은 FireFox에 비하면 아직(2008년)까지는 어려운 편이다.
제공되는 개발 도구들이 별로 좋지 못하고, 특히 JavaScript 디버깅은 매우 어려운 편이다. 현재 사용할 만한 IE 용 웹 개발 도구들을 정리해본다.
특히 IE에서의 JavaScript 디버깅용으로는 MSD와 Companion.JS 조합이 현재로서는 가장 이상적인 조합인 것 같다.
- Microsoft Script Editor : 이하 MSE. 가장 좋다고 알려져 있으나, MS Office XP/2003 에만 포함돼 있다. (즉, 상용이다)
- Microsoft Script Debugger : 이하 MSD. 무료 디버거로 독립적으로 사용하면 디버거 자체의 버그로 IE를 다운시킨다. 하지만 Companion.JS와 함께 사용하면 좋다~
- Companion.JS : IE용 FireBug의 Console 기능만 가져왔다고 보면 된다. 물론... 기능은 무쟈게 딸린다. 하지만 MSD와 함께 사용하면 오류가 난 부분을 정확하게 찝어준다.
- IE Deveoper Toolbar : IE용 Developer Toolbar로 DOM구조, JavaScript/Cookie/CSS 등을 설정할 수 있다. Script보다는 HTML/DOM 구조 관련 작업에 사용한다.
-
DebugBar : DOM 구조 분석에 있어서 IE Dev Toolbar보다 훨씬 앞선다. 다양한 기능을 IE와 같은 창에서 편리하게 사용할 수 있다. 그러나 FireBug에 비하면 많이 딸린다....
- HTTP 전송 데이터 분석,
- JavaScript 소스 구조별로 보기
- HTTP 전송 데이터 분석
- 실시간 HTML Validation
- Javascript 바로 실행해보기 등이 가능하다.
- ieHTTPHeader : IE가 주고 받는 헤더를 확인할 수 있다. IE내부에 붙는 형태이다. 헤더 뿐만 아니라 주고 받는 모든 데이터를 보려면 Fiddler 2가 쵝오!
-
Fiddler 2 : IE 뿐만 아니라 어느 브라우저에서라도 사용할 수 있느 Proxy 기반의 브라우져 데이터 전송 분석도구이다.
- 헤더 뿐만아니라 바디까지 모두 분석해준다.
- 기능상으로 보면 HTTP 데이터 분석에서는 최고의 무료 툴이다.
- .NET을 깔아야만 한다.
- IE는 Fiddler를 실행하면 자동으로 Proxy 설정이 바뀌고, Fiddler를 종료하면 다시 Proxy 설정이 복구된다. 다른 브라우저는 직접 Proxy 설정을 변경하면 된다.
JavaScript Debugging
IE에서 웹 개발하면서 제일 짜증 나는 점은, JavaScript 오류가 발생했을 때, 도무지 어디에서 에러가 발생한 것인지 친절하게 알려주질 않는 다는 것이다. 그래서 IE에게는 별로 기대할 것도 없다보니, 에러가 어디서 났다는 것만 정확히 알려주는 것 만으로도 고맙기 그지 없는 상황이 되는데, 바로 "에러난 정확한 위치"를 알려줄 수 있는 것이 "MSD"와 "Companion.JS"의 조합이다.
실제로 IE에서 가장 좋은 스크립트 디버거는 MSE 이지만, 상용이라 배재한다.
MSD의 경우 약간의 문제가 있는데, 이걸 제대로 사용하려고 들면, IE를 수시로 다운시켜서 뭘 제대로 할 수가 없다는 점이다.
헌데, MSD + Companion.JS 조합으로 사용하면 별다른 문제 없이 오류 위치를 정확히 집어준다. (이 정도 기능외에는 별로 기대 할 게 없긴 하지만 이것만으로도 너무나 감사하다.)
먼저 MSD를 설치한다.
다시, Companion.JS를 설치한다.
MSD가 없으면 Companion.JS는 작동하지 않는다.
IE 설정에서 고급에서 "스크립트 디버깅 사용 안 함" 옵션의 체크를 없앤다.
이제 도구 -> 도구모음 -> 탐색 창 -> Companion.JS 에 체크를 해주면 화면 아래에 Companion.JS 창이 생긴다.
Source 탭에서는 HTML 문법 오류, JavaScript 오류 위치 검사 등을 할 수 있다.
여기서 Console 탭을 통해서 JavaScript를 임의로 실행 해 볼 수 있다.
아래는 일부러 오류를 내고 오류 위치 알려주는 것을 확인한 모습. js 파일이 여러개로 분리돼 있어도 정확히 집어준다.
IE에서 JavaScript 개발 때문에 고통받고 있으니, 부디 더 좋은 방법이 있다면, 기탄없이 조언 부탁드립니다.