// convert all characters to lowercase to simplify testing
var agt=navigator.userAgent.toLowerCase();
// *** BROWSER VERSION ***
// Note: On IE5, these return 4, so use is_ie5up to detect IE5.
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
// Note: Opera and WebTV spoof Navigator
var is_nav = ((agt.indexOf("mozilla")!=-1) && (agt.indexOf("spoofer")==-1)
&& (agt.indexOf("compatible") == -1) && (agt.indexOf("opera")==-1)
&& (agt.indexOf("webtv")==-1) && (agt.indexOf("hotjava")==-1));
var is_nav2 = (is_nav && (is_major == 2));
var is_nav3 = (is_nav && (is_major == 3));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav4up = (is_nav && (is_major >= 4));
var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) ||
(agt.indexOf("; nav") != -1)) );
var is_nav6 = (is_nav && (is_major == 5));
var is_nav6up = (is_nav && (is_major >= 5));
var is_gecko = (agt.indexOf("gecko") != -1);
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );
var is_ie4up = (is_ie && (is_major >= 4));
var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5_5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);
var is_ie6 = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );
var is_ie6up = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);
// KNOWN BUG: On AOL4, returns false if IE3 is embedded browser
var is_aol = (agt.indexOf("aol") != -1);
var is_aol3 = (is_aol && is_ie3);
var is_aol4 = (is_aol && is_ie4);
var is_aol5 = (agt.indexOf("aol 5") != -1);
var is_aol6 = (agt.indexOf("aol 6") != -1);
var is_opera = (agt.indexOf("opera") != -1);
var is_opera2=(agt.indexOf("opera 2") != -1 || agt.indexOf("opera/2") != -1);
var is_opera3=(agt.indexOf("opera 3") != -1 || agt.indexOf("opera/3") != -1);
var is_opera4=(agt.indexOf("opera 4") != -1 || agt.indexOf("opera/4") != -1);
var is_opera5=(agt.indexOf("opera 5") != -1 || agt.indexOf("opera/5") != -1);
var is_opera5up=(is_opera && !is_opera2 && !is_opera3 && !is_opera4);
var is_webtv = (agt.indexOf("webtv") != -1);
var is_TVNavigator = ((agt.indexOf("navio") != -1)
|| (agt.indexOf("navio_aoltv") != -1));
var is_AOLTV = is_TVNavigator;
var is_hotjava = (agt.indexOf("hotjava") != -1);
var is_hotjava3 = (is_hotjava && (is_major == 3));
var is_hotjava3up = (is_hotjava && (is_major <= 3));
4.2 레이아웃 방식의 변경
대부분의 웹 디자이너나 개발자들은 TABLE을 기초로 한 레이아웃을 제작한다. TABLE은 다양한 행과 열 로 구성되어 있기 때문에, 격자형 문서구조를 구성하는데 아주 효과적이므로 많이 사용해 왔다. 그러나, 문서 구조가 복잡해 지면 TABLE의 복잡성 또한 증가하여 유지 보수 하거나 갱신 시 구조를 이해하는 데 매우 어려움을 겪게 된다. 이미 앞서 살펴 본 대로 TABLE은 각 웹 브라우저 마다 달리 표현되는 속성 때문에 Cross Browsing에 어려움을 주기도 한다. 그래서 TABLE형 레이아웃에 CSS를 결합하여 표현하기 도 하는데 이것은 궁극적인 해결 방식이 될 수 없다.
TABLE형 레이아웃 대신에 대안으로 떠 오르는 것인 DIV형 레이아웃이다. DIV는 DHTML의 태그로서 소개 되었다가 HTML4.0에 표준으로 채택되었다. DIV와 비슷하게 SPAN이나 LAYER등의 태그가 있었으나 DIV로 통일 되어 사용되는 것이 요즘 추세이다. DIV는 문서의 일정 영역을 구분하여 조각으로 만든 다음 각 조각(Component)을 자유롭게 활용하거나 배치시킬 수 있다. TABLE형은 행과 열에 따라 순차적으로 문서 가 배치되는 반면 DIV형은 선언된 영역을 자유롭게 배치할 수 있다. CSS를 이용하면 HTML4.01과 CSS1/2 를 지원하는 브라우저에서는 완벽한 Cross Browsing이 가능하다.
만약 세가지 상자로 구성된 레이아웃을 표현해야 한다고 생각하여 보자.
- table을 이용한 레이아웃 예제
<table cellspacing=0 cellpadding=0 width="100%">
<tr><td><table cellspacing=10 cellpadding=0
bgcolor=#eeeeee
width=120 height=100><td
bgcolor=#cccccc>1</td></table>
</td><td><table cellspacing=10 cellpadding=0
bgcolor=#eeeeee
width=120 height=100><td
bgcolor=#cccccc>2</td></table>
</td><td><table cellspacing=10 cellpadding=0
bgcolor=#eeeeee
width=120 height=100><td
bgcolor=#cccccc>3</td></table>
</td></tr></table>
table을 통한 가장 일반적인 레이아웃을 한 경우이다. 그러나 이는 웹브라우저 마다 table을 표시하는 속성이 달라 전혀 다르게 보이게 된다.
- div을 이용한 레이아웃 예제
<STYLE type="text/css">
@import "layout.css";
</STYLE>
<div id="left"> <p>1</p>
</div>
<div
id="middle"><p>2</p></div>
<div
id="right"><p>3</p></div>
위의 경우는 div와 CSS를 조합하여 만든 레이아웃 구성도로서 이를 통해 간단하고 명확하게 레이아웃을 표시할 수 있을 뿐 아니라, 웹브라우저에서 유사한 스타일로 표현 가능하다.
- layout.css 파일 예제
#left {
position: absolute;
top: 0px; left: 0px; margin: 20px; padding: 10px;
border: 5px solid #ccc; background: #666; width: 120px;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\""; voice-family:inherit;
}
html>body #left {
width: 120px; /* ie5win fudge ends */
}
#middle {
margin: 20px 190px 20px 190px; padding: 10px;
border: 5px solid #ccc; background: #666;
}
#right {
position: absolute;
top: 0px; margin: 20px; padding: 10px; border: 5px solid #ccc;
right: 0px; /* Opera5.02 */
background: #666; width: 120px;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\""; voice-family:inherit;
}
html>body right {
width: 120px; /* ie5win fudge ends */
}
이러한 레이아웃 방법은 말로만 듣는 것보다 실제로 웹사이트에서 구현해 보는 것이 제일 중요하다. 이 러한 Box형 레이아웃을 배우기 위해서는 다음 웹사이트를 방문하기를 권장한다. http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
1) 모질라(Mozilla) 계열 웹브라우저
비 IE계열의 대표적인 웹브라우저가 Netscape이다. Netscape는 4.58버전일 끝으로 Navigaor라고 불리는
브라우저 시대를 끝내고, 소스를 공개함으로서 공개 소프트웨어로 전환하였다. 이 공개 소프트웨어 프
로젝트를 모질라(Mozilla)라고 명명하고, Gegko라는 브라우저 엔진을 통해 웹브라우저를 발전시켜 왔다.
Netscape6/7 버전은 Mozilla의 1.0.2, 1.4를 기반으로 한 것이며 모질라 기반 브라우저라고 할 수 있다.
Mozilla, Netscape, Mozilla Firebird, Kameleon 등은 모두 모질라 기반 브라우저로서 모질라에 대한
정보만 제공하여도 비 IE 사용자의 상당수를 지원할 수 있다.
모질라에서 브라우저 설정을 어떻게 하며 어떤 폴더에 저장되는지 궁금해 하는 경우가 있다. 과거에
Netscape Communicator를 설치 해본 사람이라면, 프로필이라고 하는 개념은 친숙할지도 모른다. 모질라
기반 브라우저에서 프로필은 북마크 주소장, 캐시 메일 사용자 정의 설정등의 개인적인 데이터를 정리
해 보존해 두는 폴더이다. Mozilla 는 복수의 프로필을 사용할 수 있게 되어 있어 프로필의 변환에 프
로필 관리자라고 하는 전용의 컴퍼넌트를 사용한다. 프로필 관리자는 Mozilla 프로그램의 실행전 혹은
종료후가 아니면 실행할 수 없다.
Mozilla 의 프로필 관리자는 Netscape 6/7 의 프로필도 인식한다. 또 프로필의 데이터는 프로그램의 제
거에서는 삭제되지 않는다. NS6/7 의 프로필을 사용하려면 불편이 생기기 때문에 이전에 NS6/7 를 설치
한 일이 있는 경우 반드시 신규의 프로필을 작성해야 한다. 신규의 프로필을 작성하려면 Mozilla 의 프
로필 관리자로 "Create Profile..."을 통해 한다.
모질라 기반 브라우저에서 음악을 못 듣거나 플래시 및 자바 애플릿이 작동하지 않는 경우는 MIDI 플레
이어나 Macromedia Flash Java Plugin 등의 플러그 인을 Mozilla에 설치하고 재구동하지 않은 경우로
생기는 경우가 많다.
모질라나 Netscape의 한글 버전을 다운로드 하여 설치하기 위해서는 한글 모질라
(http://www.mozilla.or.kr)를 이용하거나 모질라 영문 배포사이트 에서 OS에 맞는 모질라 영문버전을
받아 설치한 후, 모질라를 통해 모질라 한글사이트에서 Version (mac/unix/win) 형식의 언어팩을 설치
한다. Edit->Preference...->Appearance->Language->Korean(KR)을 선택한 후
모질라를 재시작한다. 1.0버전 부터 Windows와 Linux용 설치 프로
그램이 제공되고 있다. 부분적으로만 한글이 보일 경우, 모질라는 기본적으로 다른 버전에서 사용하던
프로필을 사용할 수 없기 때문에 예를 들어, 1.0버전에서 만든 프로필을 1.1 버전에서 사용할 경우 이
러한 문제가 발생한다. 브라우저가 업그레이드 된 경우, 이전 버전에서 만든 프로필을 사용하지 말고
새로운 프로필을 만든 후 한글 언어팩을 설치 하면 이 문제를 해결할 수 있다.
웹사이트에서 IE와 Netscape사이의 cross-browsing이 되지 않아 발생하는 문제에 대해서는 HTML 코딩
중에는 IE에서만 인식되는 비 표준 문법들이 있는데, 이것은 사이트가 IE 위주로 HTML이 작성되어 있거
나 Netscape나 모질리를 지원하지 않는 경우일 수 있다. 개발자들이 브라우저에 따라 모두 테스트를 해
보기 전까지는 문제를 발견해 내기가 쉽지 않고, 국내의 대부분 웹사용자들이 IE를 쓰므로 모질라나
Netscape 에서 Cross-browsing이 안될 수 있다. 사이트 운영자에게 Netscape나 모질라에서 발생되는 문
제에 대해 메일을 보내셔서 문제점을 고칠 수 있도록 피드백을 마련해 주는 것이 좋다.
모질라에서 Object 태그를 쓰는 ActiveX콘트롤이 실행되지 않는 경우가 있다. 이것은 ActiveX 콘트롤이
Microsoft에서 개발한 기술로 Netscape의 Plug-in 기술과 대치되는 기술이기 때문이다. 국내 대부분의
웹사이트들이 ActiveX콘트롤을 즐겨 쓰고 있으나, 모질라나 Netscape에서는 기본적으로 ActiveX를 지원
하지 않는다. Netscape7.0이나 모질라1.1 이상에서 ActiveX콘트롤을 지원 받을려면 윈도우 환경에서
ActiveX for Plugin, Plugin for ActiveX Plugin(http://www.iol.ie/~locka/mozilla/mozilla.htm)을 설
치하거나, 리눅스 데스크탑 환경에서는 wine (http://www.winehq.org)같은 윈도우 에뮬레이터를 설치하
여 상호 기술을 사용 가능하도록 알려주어야 한다.
모질라의 북마크 파일을 백업하려면, bookmark.html 형식의 HTML파일을 프로필(profile) 디렉토리 아래
의 사용자 디렉토리에서 가져온다. 프로필 디렉토리의 위치는 Win9x 같으면 Program Files 파일 아래의
mozilla.org(설치디렉토리) profile 아래에 있으며, 2000/XP라면 "Document and Setting" 아래 개인 디
렉토리의 "Local Setting" 아래 있다.
2) 오페라 브라우저
오페라(Opera)는 1990년 초, 노르웨이 통신회사, 텔레너의 연구소에서 근무하던 3명의 로부터 시작하여
1995년에 오페라소프트웨어가 설립되었다. 그리고 1996년에 윈도우 오페라 2.1의 오페라 최초 버전이
발표되었다. 1998년에, 오페라는 윈도우를 넘어 다른 플랫폼으로 오페라 브라우저를 확대하여 2000년과
2001년에 Linux, Macintosh, BeOS, Symbian OS (EPOC) 및 QNX와 같은 대중적인 플랫폼에 대해 출시되었
다. 2000년 12월에 윈도우 오페라 5 버전이 광고가 지원되는 무료 버전으로 출시되었다. 첫달에 무료
오페라 5 버전은 2백만개가 다운로드되어 설치되었다. 오페라는 개발 초기부터 W3C의 표준 사양을 준수
하고, 브라우징 속도를 가장 빠르게 한 특징을 가지고 사용자 층을 이끌어 나왔다.
오페라 한글판이 출시되기 앞서 이 한글 언어팩을 이용하여 한글로 오페라를 사용할 수 있다. 한글 언
어팩을 클릭하여 다운로드 받은 후 오페라가 설치된 Opera 디렉토리에 압축을 풀면 된다. 다음에 오페
라를 실행하여 "파일(File)/환경설정(Preferences)/언어(Language)"에서 사용자 인터페이스 언어 설정
에서 옆에 버튼을 누르고 Opera 디렉토리 안에 owxxx_xxxxko.lng 파일을 찾아 선택하고 확인 후 설정한
다. 그리고 오페라를 다시 시작하면 한글로 오페라를 사용할 수 있다.
오페라 사용시 웹페이지 내에서 한글을 제대로 표현하려면 다음과 같이 한다. 메뉴바 파일(File) - > 환경설정(Preferences) -> 글꼴 및 색(Fonts and colors)를 선택하면 오른쪽 화면 나의 글꼴 및 색(my fonts and color)에서 먼저 일반글자(normal) 선택하고 변경을 누르면 대화창 이 나타나는데 거기서 글꼴은 TT굴림 또는 TT돋음을 선택하고 유형에서는 보통, 크기는 10 또는 11(최 적) 로 선택하고 확인을 선택한다. 그리고 다시 환경설정 창에서 아래 적용을 눌러 설정한다. 다른(css font-family 를 제외한) 항목들도 같은 방법으로 설정한다. 다음에 [환경설정-언어]에서 인코딩유지 항 목에서 html 을 euc-kr 로 선택하고 설정하여 사용한다. 메뉴바, 도구모음 글꼴도 변경할 수 있다. 환 경설정> 브라우저 모양에서 "글꼴 및 색" 항목에서 "시스템 기본설정 사용" 에 체크 지우고, "일반 텍스트", "비 활성텍스트", "북마크창 글꼴"를 각각 누르고 차례로 글꼴을 바꾸면 된다. 크기는 동일하게 "9" 로 하면 되며, 글꼴 색상도 변경 가능하다.
오페라 브라우저를 사용할 때, 어떤 페이지는 다른 브라우저와 다르게 표시되는 것을 볼 수 있다. 대부
분의 경우에서 그 차이는 그 표시되는 페이지에서 표준을 지원하지 않는 오류에 의해 나타난다. 어느정
도까지 오페라는 넷스케이프 및 인터넷 익스플로러로 표시되는 오류를 그대로 복제하도록 시도하지만,
오페라는 우선적으로 표준 체계를 그대로 적용한다. 오페라와 넷스케이프/ 인터넷익스플로러 사이에 표
시되는 차이에 대해서는 아래와 같다.
오페라에서
링크 밑줄은 오페라 및 NN6 이전 버전에서와는 다르다 (하나의 색으로 밑줄이 사용되고, 텍스트는 다른
색으로 사용된다). 이것은 텍스트에 대한 CSS2의 결과이다.
IE5/Windows는 오페라 (및 NN6)에서 상자를 보다 크게 보이게 하는 높이와 폭에서 오류가 있다. 이것
은 표준 양식으로 IE6에서 수정되었다.
IE5는 또한 위치에 대해 문제를 갖고 있다. 위치한 요소는 포함하는 요소가 아닌 가장 가까이 위치한
요소에 위치되어야 한다. 배경 이미지의 위치는 창이 아닌 요소 상자와 관계한다. 이것은 오페라에서
body 와 함께 위치한 이미지 (background-position: center)는 창의 중앙에서가 아닌 페이지의 중앙에
서 보기 좋지 않게 나타난다는 것을 의미한다.
보통 padding은 그 body 요소에 적용된다. 그리고 여백을 두지 않는다 (body 및 head/html 요소 사이의
여백).
오페라에 대한 소개 및 한글 지원 페이지는 http://opera114.pe.kr를 참고하면 된다.
이러한 스크립트 디버거로 알 수 있는 것은 DOM 요소와 속성 사용에 대한 에러 처리 같은 것이다. 만약
Javascript 문법에 대해서도 확인하고자 한다면, Strict로 처리한다.
유사한 기능을 하는 IE에서도 MS 스크립트 디버거라는 프로그램이 있다. 기본적으로 자바스크립트에 에
러가 나면 아래와 같은 경고창이 나온다. 여기에는 에러가 생긴 곳(Breakpoint)의 행과 문자 위치만 나
오며 특별한 에러 메시지가 표시되지 않기 때문에 오류를 찾아내는 것이 쉽지는 않다. MS에서 제공하느
최신의 스크립트 디버거는 다운로드 받을 수 있다.
요즘 대부분의 웹사이트에서 다양한 방면의 쿠키(Cookie)를 사용한다. IE에서는 웹사이트에 설정된 쿠
키 정보를 볼 수 없으나, 모질라에서는 쿠키 관리자를 통해 설정된 쿠기 정보와 내용을 확인 할 수 있
어, 웹사이트 문제 해결에 도움을 준다.
쿠키를 차단할 수도 있고, 확인할 수도 있기 때문에 관리하거나 자시의 개인정보가 빠져 나갈 수 있는
여지가 있는지 확인 가능하다는 장점도 포함되어 있다.
그리고, HTML의 표현상 오류는 소스를 간단히 살펴 봄으로서 해결이 되는 경우가 많다. 그러나 자바스
크립트 문법과 DOM의 사용상의 오류는 쉽게 알아내기 힘들다. 따라서 이러한 경우를 대비하여 디버거를
사용할 수 있다.
Mozilla와 Netscape에는 자바스크립트 콘솔 및 벤크맨(Venkman)으로 불리는 JavaScript 디버거가 내장
되어, 스크립트 개발자들에게 이용되고 있다. 이것은 화면 표시와 콘솔 양쪽에서 조작할 수 있는 디버
거이다. 스크립트에서 잘못된 코드로 인해 만들어 지는 종료점(beakpoint)괸리, Call Stack 감시 변수/
객체 감시라고 하는 기능을 화면 콘솔 커멘드로 이용 가능하며, 대화형 콘솔에서는 임의의 JavaScript
코드를 실행시킬 수도 있다. 키보드 쇼트 컷은 기존의 비주얼 디버그 환경에 맞추고 있어 gdb 의 사용
자이면 벤크맨의 break, step, next, finish, frame 및 where 커멘드를 자연스럽게 사용할 수 있다.
이 JavaScript 디버거는 Windows 환경에서의 비주얼 상호 개발 환경이나 다른 대규모 웹 개발도구보다
뛰어나 Mac OS 나 Unix 를 포함해 다른 플랫폼에 대해서는 비주얼 디버그 환경에서 이 정도까지 포괄적
으로 적용 가능하다. 왼쪽의 스크린샷은 벤크맨의 실행 모습이다.
W3C의 표준 권고안인 DOM에 대한 체계적인 구조도와 웹페이지 상의 잘못된 사용 방법을 알려주는 도구
인 DOM Inspector가 모질라에 역시 내장되어 있다. 임의의 웹 문서나 XUL 어플리케이션으로 이용 중
DOM 을 정밀 조사 하거나 수정하거나 하는데 사용할 수가 있는 도구로사, 문서 및 내부의 노드를 다종
다양한 시점에서 보는 볼 수 있는 윈도우를 이용해 DOM 계층을 탐색할 수 있다. 오른쪽의 스크린샷은
전형적인 DOM 정밀 조사 작업의 모습이다.
그 밖에 모질라에서는 IE와 달리 페이지 소스 보기에서 문법을 하이라이트 처리하여 별도로 확인 할 수
있으며, 캐쉬 관리자, HTTP 헤더 보기를 통해 웹서버와의 통신 과정에서 일어나는 일련의 과정을 모두
디버깅 해 볼 수 있다. 이러한 다양한 디버깅 방법들을 활용하여 보다 더 Cross browsing에 가까운 웹
페이지 구현이 가능하다.
4.3 비 IE 사용자를 위한 가이드
국내의 대부분 웹사이트들은 IE를 기준으로 만들어졌다는 비난 아닌 비난을 받고 있다. 대부분의 사용
자들이 IE를 쓰는 만큼 3~4% 내외인 비 IE 사용자를 위해 웹페이지나 서비스를 바꾼다는 것은 쉽지 않
다는 것은 사실이다. 특히, 상호 소통적이고 커뮤니케이션을 중요시 하는 국내 웹서비스의 현실로 볼
때, Javascript와 같은 스크립트 언어와 Flash, Shockwave 그리고 다양한 ActiveX 플러그인 기술을 사
용하는 것 자체를 막을 수는 없다고 생각한다. 그러나, 이러한 의존적인 기술을 사용하면서도 비 IE 사
용자 혹은 비 Windows OS 사용자 들이 어느 정도 서비스를 접근할 수 있는 가이드 조차 마련되어 있지
않고 접근 자체가 거부 된다는 것은 문제라고 볼 수 있다. 여기서는 비 IE 사용자를 위한 몇 가지 사용
방법에 대해 설명하여, 이를 웹사이트에 소개함으로서 비 IE 사용자들에게 이해를 줄 수 있는 가이드를
제공하고자 한다. <HR>의 색은 배경 특징 이다, 그래서 오페라는 생성하는 내용 뿐만 아
니라 모든 배경스타일을 승인한다. NN4 및 IE에서 그것은 전경 특징이다 (색). NN6은 역시 바르게 한다
(전에 내용을 생성하고 사용된 후라면 오페라와 NN6 사이에는 차이가 있다). 4.4 웹페이지 디버깅 방법
지금까지 Cross browsing을 위해 브라우저의 특성과 표준 지원 정도. 올바른 웹페이지 코딩 방법 등을
살펴보았다. 그러나, 이러한 가이드를 충분히 숙지하고 있어도 오류가 나는 것이 웹페이지이다. 가이드
를 잘 익히는 것도 중요하지만, 결국 웹 개발자가 최종 작업을 마치고 여러 웹브라우저에서 기능을 구
현하여 동작 여부를 체크하는 것이 필요하다. IE4.0, IE5.5, IE6.0, Mozilla 1.5, Nescape7, Opera7,
Safari1.0, Lynx2.8 등의 브라우저에서 확인해 볼 것을 권장한다. 아래 링크를 따라가면, 각 웹브라우
저의 예전 버전까지 제공해 준다.
- 인터넷 익스플로러: http://browsers.evolt.org/?ie/
웹페이지의 간단한 스크립트 오류를 알아 내기 위해서는 모질라나 파이어버드에 있는 자바스크립트 콘
솔을 이용하는 방법이 있다. 이 콘솔을 이용하면, 표준안에 근접한 방법으로 웹페이지를 디버깅 할 수
있는 장점이 있다. 파이어버드는 가벼운 웹브라우저 이므로, 파이어버드와 IE 그리고 오페라 정도로도
웹페이지 디버깅을 할 수 있다.
- 모질라: http://browsers.evolt.org/?mozilla/
- 오페라: http://browsers.evolt.org/?opera/
- 넷스케이프: http://browsers.evolt.org/?navigator/
- 사파리: http://browsers.evolt.org/?safari/
- 링스(Lynx): http://browsers.evolt.org/?lynx/
[그림.9 Mozilla 자바스크립트 콘솔을 통한 디버깅]var response = true; var response = false; 라는 코드를 Strict모드로 한 경우 흔히 나타나는
"redeclaration of var response" 에러의 경우 위의 문법을 아래와 같이 수정해야 에러가 없어진다.
var response = true; response = false;
[그림. 10 Internet Explorer의 자바스크립트 디버거]
[그림. 11 쿠키 매니저를 통한 문제 해결]
[그림. 12 Mozilla Venkman을 통한 스크립트 디버깅]