Freigeben über

Internet Explorer 8 Developer Tools 생산성 향상

  • Artikel

 

 

지난  1 년간, Internet Explorer 개발시에 웹 개발자의 생산성 향상을 도모하기 위한 다양한 도구 (Web Development Tools for Internet Explorer (영어)  또는 Tools for Detecting Memory Leaks (영어))에 대한 글을 써 왔습니다. 이러한 도구는 Microsoft 내부/외부 파트너가 개발한 것입니다. 그 중의 하나 (IE Developer Toolbar) (영어)는 사이트를 IE에서 디버그 하는데 도움이 되고, 무료이며 가벼운 도구를 원하는 요구에 따라 IE 팀이 개발한 것입니다.

IE8 Developer Tools 는 Internet Explorer에서 개발자의 생산성 향상을 지원하는 다음 단계입니다. 이 글에서는 IE8 Beta 1에서 이용 가능한 도구를 소개해고, 그러한 도구에 관한 상세 정보를 알려드립니다.

통합화되어 사용하기 쉬운 Developer Tools

Internet Explorer 8에서는 개발도구를 쉽게 바로 사용할 수 있도록 디버그 과정을 간소화했습니다. 다른 디버그용 응용 프로그램을 찾아서 다운로드하여 설치할 필요가 없습니다. Shift 키를 누르고, F12 키를 누르거나 명령 모음의［개발도구］아이콘을 클릭하면, 바로 사용할 수 있습니다.

Toolbar Icon

또, JScript 를 디버그 할 때 ,［ Script (스크립트 ) ］ 탭으로 전환하여［ Start Debugging (디버그 시작 ) ］ 단추를 누릅니다. 스크립트 디버깅 기능이 활성화되지 않은 경우에도 Internet Explorer 8은 알림 메시지를 보여주고, 페이지를 새로 갱신하면서 현재 IE 창에 대해서만 디버깅 기능을 활성화 합니다. 또, 페이지를 갱신하는 것과 대화상자를 표시하지 않으려면 인터넷 옵션 컨트롤 패널의 ［ Advanced (세부 사항 ) ］ 탭에서 Internet Explorer 의 스크립트 디버그를 유효하게 하면 됩니다. 

Debugger

다음은 디버거를 보여줍니다.

도구를 열고 있지 않은 경우에도 IE Developer Toolbar (영어)이 성능에 영향을 준다는 피드백을 받고, 그 문제를 해결하기 위한 설계를 했습니다. Beta 1 에서는 이 새로운 설계를 빌드하면서 IE 개발자 도구 모음의 새로운 기능을 모두 구현하는 것보다 새로운 시나리오 적용에 중점을 두었습니다. 결과적으로, IE 개발자 도구 모음이 많은 기능이 IE8 Beta 1에서는 이용할 수 없습니다. 그렇지만, 이후 Beta 버전에서는 새로운 기능을 추가하는 것과 동시에 개발자 도구 모음의 기능을 원래대로 하여, 이미 친숙한 기능을 사용할 수 있도록 할 예정입니다.

플랫폼의 비주얼 인터페이스

IE8 Developer Tools에서는 디버그 프로세스 간소화에 추가하여, 사이트에 관한 새로운 분석 관점이 제공됩니다. 단순히 관련된 Internet Explorer 의 내부표현을 표시할 수 있습니다. 예를 들어, 이 도구의 DOM 트리는 소스를 사용하는 것이 아니라, IE 가 내부에 생성한 트리를 사용하여 페이지를 표시합니다. 따라서, 스크립트 또는 트리를 변경하면, IE8에서도 업데이트한 트리가 표시됩니다. 요소의 스타일 정보를 표시하여, 다음과 같이 어느 규칙이 적용되는지 또는 어느 규칙이 기존의 스타일 속성을 지정할지를 훨씬 더 잘 이해할 수 있습니다.

Element Style Info

검증 고속화

또, Internet Explorer 8 Developer Tools 는 IE 내부에서 사이트를 편집하여, 검증과 반복을 신속하게 실시할 수 있습니다. 예를 들어, 관심 있는 스타일 규칙이나 속성이 있으면, 그것을 유효화 또는 무효화하는 체크 박스를 클릭하거나 DOM 트리의 특성을 클릭하여, 그 자리에서 편집합니다.

이 도구를 사용하면, 이용 가능한 모든 표시 모드에 액세스가 쉽기 때문에 다른 모드를 빨리 테스트 할 수 있습니다.

Compatability Modes

변경 저장, 응용 프로그램 간의 변환, 페이지 업데이트를 할 필요가 없기 때문에  테스트, 디버그, 검증을 보다 빠르고 쉽게 실시할 수 있습니다.

그 외의 정보

Internet Explorer Developer Tools 에 대한 자세한 내용은 다음의 리소스를 참조해 주세요.

감사합니다.

John Hrvatin
프로그램 매니저
Internet Explorer

편집 : 「호환성 모드」의 이미지 업데이트

 

* 이 글은 Internet Explorer 개발 팀 블로그 (영어)의 번역 문서입니다. 이 글에 포함된 정보는 Internet Explorer 개발 팀 블로그 (영어)가 생성된 시점의 내용으로, 제품의 사양이나 기능이 보장되는 것은 아닙니다. 이 글에 포함된 정보의 이용은 사용 조건을 참조해 주세요. 그리고, 이 글의 게재 시점에서 Internet Explorer 개발 팀 블로그 (영어)의 내용이 변경될 수 도 있습니다. 최신 정보는 Internet Explorer 개발 팀 블로그 (영어)를 참조하십시오. 

영문 원본 :Improved Productivity Through Internet Explorer 8 Developer Tools

 

업데이트 일: 2008 년 3 월 7 일

Comments

  • Anonymous
    March 23, 2009
    어느 분인지는 잘 모르지만.. 이같이 방대한 양의 포스트들을 한글화 해 주시는 덕에 저같은 블로거가 쉽게 신뢰성 있는 자료를 찾을 수 있었습니다. 고맙습니다.