매력적인 Internet Explorer 8 Beta2 의 개발툴

Internet Explorer 8 Beta2 에 포함된 개발툴이 소개되었는데, 이거 굉장히 멋지네요. 우선 8 Beta1 에서 소개된 개발툴의 장점들은 다음과 같습니다.

  1. 기본으로 포함되어 있으며 사용하기가 쉬움
  2. 비쥬얼 인터페이스를 제공
  3. 빠르게 실험이 가능

Beta2 에서는 이보다 훨씬 더 멋진 기능들이 추가되었는데, 이는 다음과 같습니다.

JScript 의 프로파일링과 디버깅

Beta2 에서는 just-in-time-debuging 을 위한 Console.log 를 지원합니다. 바로바로 에러메시지 등을 콘솔에 찍어볼 수 있기 때문에 굉장히 편리할 것 같네요.

하지만 디버거는 사이트가 그저 돌아가게 정도밖에는 도움을 주지 못합니다. 그렇기 때문에 사이트를 최적화하는데 도움을 주기 위해 Beta2 부터는 JScript 프로파일러를 제공하고 있습니다. 사용법도 매우 간단합니다. ‘Start Profiling’ 을 클릭한 뒤 사이트를 이용하다가 ‘Stop Profiling’ 을 클릭하는 것만으로 끝! 그동안 어떤 코드가 얼마나 많은 시간을 잡아먹었는지는 아래 스크린샷에서와 같이 표현됩니다.

이에 대한 더 자세한 내용은 스크립트 디버깅하기스크립트 프로파일링하기 를 참고하시면 되겠습니다.

HTML 과 CSS 다루기

Beta1 에서는 HTML 의 라이브(실시간) 에디팅만을 지원했지만 Beta2 에서는 HTML 과 CSS 모두 라이브 에디팅을 사용할 수 있습니다. CSS 의 경우 속성(Property) 이름, 값, 셀렉터 타입 등을 클릭해서 값을 바꿔줄 수 있습니다.

HTML 의 순서를 바꿔준다거나 엘리먼트 일부를 추가/제거 하기 위해 HTML 자체를 수정하는 것도 가능합니다. ‘HTML Editable’ 버튼을 클릭함을써 트리뷰 형태와 HTML 에디터 모드를 자유롭게 옮겨다닐 수 있네요.

페이지가 새로고침 되거나 다른 페이지로 넘어갈 경우 수정한 내용은 사라져 버리게 됩니다. 그렇기 때문에 수정된 HTML 과 CSS 를 파일로 저장할 수 있는 기능이 포함되었으며, windiff 를 사용했을 때와 같이 원본 파일과 달라진 부분만을 저장하는 것도 가능합니다.

호환성 테스트

호환성 테스트를 쉽게 하기 위해 개발 툴에서는 ‘Browser mode’ 와 ‘Document mode’ 메뉴를 제공합니다. ‘Browser mode’ 를 통해 다른 버젼의 익스플로러를 흉내낼 수 있으며, ‘Document Mode’ 를 통해서는 doctype 이나 meta tag 를 통해 지정된 렌더링 모드를 바꿔볼 수 있게 됩니다.

간단한 사용법

Beta2 에서는 사용자 친화적인 툴을 만들기 위해 굉장히 노력을 많이 했다네요. 그렇기 때문에 따로 뭘 설치할 필요나 개발툴을 사용하기 위해 ‘고급(Advanced)’ 탭을 클릭하는 노력을 제거해버렸습니다. 최소한의 클릭으로 툴을 사용할 수 있도록 만들었다는군요.

개발자들은 키보드를 사랑하는 경향이 있기 때문에 자주 사용하는 기능들에는 단축키가 배정되었습니다. 예를 들어 F12 는 툴을 여는 역할을 하고, CTRL+E 는 검색 상자에 포커스를 만드는 역할을 하게 됩니다. F3 과 Shift+F3 은 다음 검색 결과로 넘어가는 역할이네요. 단축키에 대해 더 알아보고 싶으시다면 ‘전체 단축키’ 문서를 참고하시기 바랍니다.

거기다가 툴바가 더 이뻐졌고, 자주 사용하는 기능들은 더 빠르게 접근할 수 있도록 개선이 있었다고 합니다. 더 쉽게 문법을 확인할 수 있도록 구문 강조(Syntax Highlighting) 기능이 추가되었구요.

또 툴바 형태로 개발툴을 익스플로러 내부에 붙여놓을 수도 있고, CTRL+M 이나 최소화 버튼을 이용 메뉴에만 표시되도록 만드는 것도 가능해졌다네요.

아직 베타 단계이므로 실제 사용에 있어서는 문제가 있을 지도 모르겠지만, 제공하려는 기능들만 봐서는 굉장히 인상적입니다. 이 글 대부분은 IEBlog 에 영문으로 기재된 내용을 대충 한글로 옮긴 것이므로 오역이나 잘못 이해한 부분이 있을 수도 있습니다. 원문이 궁금하신 분은 아래 링크를 따라가보시면 되겠습니다. :)

http://blogs.msdn.com/ie/archive/2008/09/03/developer-tools-in-internet-explorer-8-beta-2.aspx

그럼 다들 즐거운 하루 보내세요.

Published by

One thought on “매력적인 Internet Explorer 8 Beta2 의 개발툴”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">