'JavaScript'에 해당되는 글 1건

  1. 2007.10.10 자바스크립트 디버그
Web2007. 10. 10. 13:53

자바스크립트 디버그

자바스크립트 디버그 #

자바스크립트 디버그 툴 #

파이어폭스 #

  • Firebug ([https]설치 링크) - 파이어폭스 웹브라우저 플러그인. 미려하고 편리한 UI와 기능이 돋보입니다.
  • Venkman ([https]설치 링크) - 파이어폭스 웹브라우저 플러그인. 강력한 기능성으로 지금까지 널리 사용되어온 듯 하나, Firebug에 비해 사용방법이 어렵고 불편합니다.
  • Web Developer([https]설치 링크) - 파이어폭스 웹브라우저 플러그인. 많은 기능을 가지고 있으나, 여기서는 페이지의 자바스크립트 오류를 바로 알려주도록 설정하는 것을 설명합니다.
    • 설치 후, 파이어폭스 메뉴의 도구 > Web Developer > Options > Options
    • Web Developer Options 창이 뜨면 Miscellaneous > Warnings & Errors 밑의 항목 모두 체크
  • Console²([https]설치 링크) - 파이어폭스 웹브라우저 플러그인. 기본적으로 가지고 있는 Error Console 기능을 확장해서 편리하게 오류정보를 파악할 수 있도록 해줍니다.
    • 기존에 누적되었던, 중복된 오류정보 숨기기 (Console²창의 Options > Hide Duplicates)
    • Error, Warning, Messages 등 오류 정도에 따라 분류해서 보여주기
    • JavaScript, CSS, XML 등 언어 별로 분류해서 보여주기
    • 오류정보 검색 기능. (Console²창의 Search에 문자를 입력하면 현재 오류들 중에서 오류메세지, 주소를 대상으로 검색해서 보여줍니다.)

파이어버그로 자바스크립트 디버그 하기 #

파이어버그(Firebug)로 파이어폭스의 자바스크립트 디버그 작업을 할 수 있습니다. 웹브라우저의 플러그인이기 때문에, 개발툴과는 무관하게 순수하게 디버깅 작업만을 할 수 있으며, Watch Expression, JavaScript Console, DOM Inspection 등의 심플하면서도 강력한 기능들을 제공합니다. 사용 방법은 다음과 같습니다.
  1. 파이어폭스를 실행하고, 디버그 작업을 할 페이지를 엽니다.
  2. 도구 > Firebug > Open Firebug를 클릭해 파이어버그 창을 띄웁니다. 파이어버그 창은, 브라우저의 하단에 도킹되거나, 혹은 하나의 독립된 창으로 띄울 수 있으며, 브라우저 하단에 도킹되는 것이 장점이라 생각합니다. 하나의 창에서 작업을 진행할 수 있기 때문에 편리합니다.
  3. 만약 파이어버그가 Disable 된 상태라면, Enable 시켜줍시다. Open Firebug 클릭시 나타나는 창에서 활성화 시키는 버튼이 보일 것입니다.
  4. 파이어버그 창을 보면, Console, HTML, CSS, Script, DOM, Net의 탭이 존재합니다.
    • Console 탭은 JavaScript Console 로서, 스크립트 코드를 바로바로 실행할 수 있습니다. 디버깅중에 코드에 없던 특정 스크립트를 실행해볼 때 유용합니다.
    • HTML 탭은 현재 페이지의 마크업을 확인할 수 있습니다. 스크립트로 생성된 코드까지 모두 나오기 때문에, 구조 확인시에 유용하게 사용할 수 있습니다.
    • CSS 탭은 현재 페이지에 적용된 모든 스타일시트 파일을 확인할 수 있습니다.
    • Script 탭은 JavaScript 디버그의 중심이 되는 탭입니다. 여기에서 Watch, Breakpoint, Step Over, Step Into 등의 기본적인 디버그 기능들이 제공됩니다.
    • DOM 탭은 ...
    • Net 탭은 웹페이지내에 필요한 파일들의 트래픽 상황을 확인해볼 수 있는 기능을 제공합니다.
  5. 이제 코드중 원하는 곳에 Breakpoint를 잡거나, 소스코드에 debugger; 행을 삽입해서 파이어버그가 스크립트 디버그 작업을 할 수 있게 해주면 됩니다. 만약 페이지 로드시에 실행될 코드를 디버그 하려면, Breakpoint를 잡거나, 소스코드에 debugger; 행을 삽입한 후, 해당 페이지를 리로드 하시면 됩니다.

인터넷 익스플로러 #

  • 비주얼 웹 디벨로퍼 2005 익스프레스([http]다운로드 링크) - 마이크로소프트 사의 비주얼 스튜디오 2005 중, 웹 개발에 관련된 부분을 무료로 공개한 버전입니다. 현재 인터넷 익스플로러 브라우저에서 자바스크립트의 디버그 작업을 하기에는 가장 강력한 툴이라고 보여집니다.

비주얼 웹 디벨로퍼 2005 익스프레스로 자바스크립트 디버그 하기 #

비주얼 웹 디벨로퍼 2005 익스프레스로 인터넷 익스플로러의 자바스크립트의 디버그 작업을 할 수 있습니다. 그러나 개발환경이 비주얼 웹 디벨로퍼 2005 익스프레스가 아닌 상황이라면, 디버그 작업이 허용되지 않습니다. 상용 비주얼 스튜디오 2005에서는 스크립트의 디버거가 필요한 상황에서 인터넷 익스플로러에서 바로 연결을 시켜주지만, 익스프레스 버전에서는 그러한 기능이 제외되었기 때문입니다. 여기서는 개발환경이 비주얼 웹 디벨로퍼 2005 익스프레스가 아닌 경우에 어떻게 비주얼 웹 디벨로퍼 2005 익스프레스에서 인터넷 익스플로러 브라우저의 스크립트 디버그를 할 수 있을지를 알아보도록 하겠습니다. 방법은 간단하며, 다음을 따라 해보시면 됩니다. 우선 다음과 같이 디버그 작업을 해볼 소스를 하나 준비하겠습니다. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
    window.onload = function() {
        var hello = document.getElementById( "Hello" );
        debugger;
        alert( hello.innerHTML );
    }
</script>
</head>
<body>
    <div id="Hello">Hello</div>
</body>
</html>
이제 이 파일을 비주얼 웹 디벨로퍼 2005 익스프레스에서 디버그하는 방법은 다음과 같습니다.
  1. 비주얼 웹 디벨로퍼 2005 익스프레스를 실행합니다.
  2. 파일 > 새 웹 사이트를 클릭합니다.
  3. 빈 웹 사이트를 선택한 후, 위치 항목은 파일 시스템을 선택해서 적당한 경로를 선택해줍니다. 이 경로는 그냥 임시로 쓰이며, 아무 파일도 필요없이 그냥 빈 디렉터리면 됩니다.
  4. 확인을 클릭합니다.
  5. 이제 솔루션 탐색기를 보면 새 솔루션이 하나 생성되어있을 것입니다.
  6. 메뉴의 디버그 > 디버깅 시작을 클릭합니다.
  7. 디버깅 사용 안 함이라는 창이 나타났다면, 디버깅하도록 설정한 새 Web.config 파일 추가를 선택한 후 확인을 클릭합니다.
  8. 이제 잠시후면, 비주얼 웹 디벨로퍼 2005 익스프레스가 인터넷 익스플로러를 실행할 것입니다. 실행될 인터넷 익스플로러는 디버그 모드로 비주얼 웹 디벨로퍼 2005 익스프레스가 스크립트에 간섭할 수 있는 상태가 됩니다.
  9. 이제 이 인터넷 익스플로러 창에서 아까 작성한 파일을 열어줍니다.
  10. 이제 파일의 9번째 줄의 debugger; 라는 코드가 하이라이트 되면서 해당 라인에서 스크립트 실행이 멈추고, 비주얼 웹 디벨로퍼 2005 익스프레스가 해당페이지를 디버그 할 수 있는 상태가 될 것입니다.
  11. 이제 마음껏 디버깅을 즐기시면 됩니다. ^^

비주얼 웹 디벨로퍼 2005 익스프레스 디버그 팁 #

[http]비주얼 웹 디벨로퍼 2005 익스프레스로 자바스크립트 디버그 하기를 보면, 공 페이지를 연 후에 디버그를 원하는 페이지를 열어야 합니다. 이 작업을 한번에 할 수 있는 팁입니다.
  1. 새 솔루션을 하나 만듭니다.
  2. html 페이지를 생성합니다. 디버그할 페이지 하나당 페이지 하나로 매치됩니다.
  3. 페이지의 내용을 아래와 같이 작성합니다. 아래 내용중 디버그할_페이지_주소 부분에 자신이 디버그할 페이지의 주소를 적어주면 됩니다. 방금 생성한 html 파일을 열고 F5(디버깅 시작)키를 누르면 디버그가 시작됩니다. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="refresh" content="0; url=디버그할_페이지_주소" />
 </head>
 <body>
 </body>
</html>
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2007-08-09 11:17:53
Processing time 0.0412 sec

'Web' 카테고리의 다른 글

디지털타임스 창간 10주년 모바일 오픈기념 이벤트  (0) 2010.10.06
Posted by WJinsoo

티스토리툴바