Internet Explorer 8 Beta 2 개발자 도구

  • Article

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

영문 원본 : IE8 Performance

업데이트 일자: 2008 년 9 월 3 일

 

 

지난 3 월에 Internet Explorer 8 Beta 1 개발자 도구와 세가지 장점에 대해 글을 썼습니다.

  • 통합되어 간단하고 사용하기 쉽다
  • 시각적인 인터페이스를 플랫폼에 제공한다
  • 빠르게 테스트를 실시할 수 있다

Internet Explorer 8 Beta 2 의 개발자 도구에서는 생산성 향상과 연결되는 기존의 기능과 새로운 기능 모두가 놀랍게 개선되어, 이러한 장점을 최대한 활용할 수 있습니다. 

Jscript 분석과 디버그

Internet Explorer 8 Beta 1 에는 Internet Explorer에서 간단하게 debug가 생기는 Jscript 디버거를 도입했습니다. Internet Explorer 8 Beta 2에서는 몇가지가 훌륭하게 개선되었습니다. 이번 console.log 함수와 just-in-time 디버그를 지원, 파일 선택 개선 등에 의해 보다 좋은 조작이 가능합니다.

File Chooser in IE8 Developer Tools Debugger

그렇지만,  디버거는 사이트를 적정하게 동작하도록  도울 뿐이기 때문에 사이트 동작을 최적화해야 합니다. 따라서, Internet Explorer 8 Beta 2 는 기본 제공 Jscript Profiler 를 탑재했습니다. 문제점 탐색이나 다른 디자인 패턴을 비교하여, Internet Explorer 에서 높은 성능을 발휘하는 웹 응용 프로그램을 구축하기 위해서 이용합니다.  [프로파일링 시작] 을 입력하면 기능하고, [프로파일링 정지] 를 입력하면 기본 제공 메서드를 포함한 모든 Jscript 를 분석한 데이터를 표시합니다.

JScript Profile Data in IE8 Developer Tools

이 뛰어난 기능의 자세한 내용은 IEBlog 에서포스팅할 예정입니다. 스크립트 디버그 (영어) 와 스크립트 분석 (영어)에 대한 온라인 문서도 참고해 주세요. 

HTML 와 CSS 조작

Internet Explorer 8 Beta 1에서는 HTML 요소에 대한 동적인 편집만이 지원되었지만,  Beta 2에서는 모든 HTML , CSS 에 이 기능을 이용할 수 있습니다. CSS 의 동적 편집 을 실시하려면, 속성 이름 , 값, 선택 장치를 클릭 하여 새로운 값을 입력하고 Enter 를 누릅니다.

IE8 Live CSS Editing

HTML 태그의 이름 변경, 요소의 순서 변경이나 추가와 삭제를 실시해야 하는 경우, 풀 텍스트 편집기능을 사용하여 주세요. HTML 를 자유롭게 편집하기 위해서는 HTML 탭의 도구 막대에 있는 "편집"을 클릭 합니다. 한번 더 누르는 것으로, 편집 내용이 적용되어 트리 표시로 돌아옵니다. 이것은 InnerHTML을 사용하여, Jscript 를 통해서 InnerHTML을 변화시키는 것과 같이, 동작중의 스크립트에 의한 규칙이 적용됩니다.

IE8 Full Text Editing

도구에 의한 변화는 페이지가 업데이트 되거나 다른 페이지로 이동할 때까지 지속됩니다. 이 가벼운 편집기능은 도움이 되지만, 변경 내용이 간단하게 없어집니다. Internet Explorer 8 Beta 2 는 현재의 HTML 와 CSS 를 텍스트 파일에 저장 하기위해, 소스를 업데이트 할 때의 참고 정보를 보관할 수 있습니다. 도구내의 데이터는 여러분의 소스가 아니라, Internet Explorer 에서 생성된 것입니다. 따라서, 여러분이 도구를 사용하여 편집한 이외의 내용도 포함하여, 원래 소스의 치환 등의 엑시던트를 미리 막아서 기본값 파일 형식은 txt 가 되어 있습니다. 변화를 확인하는 좋은 방법은 변경전과 변경후의 페이지를 저장하고, windiff 와 같은 도구를 이용하는 것입니다.

상호 호환성 테스트

개발자 도구에는" 브라우저 모드" 와 " 문서 모드" 의 두가지 호환성을 위한 메뉴가 있습니다. " 브라우저 모드" 는 Internet Explorer 가 서버나 웹 사이트에 대해서 어떤 버전인지 신고하고,  어떻게 행동하는지를 변화시킵니다. 이것은 Internet Explorer 8 을 사용하여 Internet Explorer 7에서 표시했을 때 사이트가 어떻게 보이는지 Internet Explorer 8에서 " 호환 표시" 를 눌렀을 때에 어떻게 사이트가 보이는지를 테스트 합니다. " 브라우저 모드" 는 사용자 에이전트 스트링과 조건부 주석의 평가시에 이용되는 내부 버전의 설정 값 및 렌더링 모드에 영향을 미칩니다.

"문서 모드" 는 다른 DOCTYPE 나 META 태그 (영어)를 사용하여  렌더링 모드를 변경했을 경우에 사이트가 어떻게 보이는지 테스트를 실행합니다.

현재의 동작 모드는 메뉴에 항상 표시되어 있기 때문에, 클릭하지 않고 정보를 얻을 수 있습니다.

편리한 사용

처음부터 이 도구는 사용자 친화적인 것으로 만들고자 했습니다. 개발자 도구를 Internet Explorer 8 의 일부로 하여, 추가적으로 설치할 필요가 없고,  인스턴스 단위의 스크립트 디버거를 삽입하여, 하나 하나 인터넷 옵션의 " 세부 사항" 탭을 확인할 필요가 없기 때문에 일반적인 조작을 위한 필요 클릭 수가 감소했습니다.  그리고, Beta 2에는 개발자 도구를 향상시키기 위해 몇가지 중요한 변화가 있습니다. 

만약 여러분이 저와 비슷하다면, 키보드를 사용하는 것을 좋아할 것이라고 생각합니다. Beta 2에서는 자주 사용되는 기능에 대해, 광범위한 키보드 바로 가기 를 추가하여, 일반적인 키조작에서 이 도구가 경쾌한 것이 됩니다. 예를 들면, F12 로 개발자 도구를 열어, CTRL+E 에서 포커스를 검색창으로 이동하여, F3 와 SHIFT+F3 에서 검색 결과를 찾을 수 있습니다. 키보드 바로 가기의 전체에 대해는 full keyboard reference (영어)를 확인해 주세요.

그 밖에도 개발자 도구를 우수하게 만들기 위해(개발팀원들도 이 훌륭한 디자인 터치를 칭찬합니다.) 일반적인 조작에 빠르게 액세스하기 위한 탭을 도구 막대에 기본 제공, 읽기 쉽게 하기 위해서 도구 전체에서 구문이 하이라이트되어 표시됩니다.

개발자 도구를 Internet Explorer Developer Toolbar 와 같이 Internet Explorer 창 안에 고정하는 것도 가능하지만, Beta 2에서는 창안에서 최소화하는 것도 가능합니다. 개발자 도구를 고정한 상태에서, " 최소화" 단추를 누르거나  CTRL+M 를 입력하면, 표시영역을 절약하기 위해서 메뉴바의  상태를 축소할 수 있지만, 이 상태에서도 메뉴나 브라우저모드, 문서 모드 액세스는 가능합니다.

IE8 Developer Tools Pinned to the Internet Explorer Window

Internet Explorer Developer Toolbar 기능

"특성" 목록 표시와 "윈도우 사이즈 변경" 기능을 포함한 Internet Explorer Developer Toolbar 가 잘 알려진 모든 기능을 탑재했습니다.

세부 사항

Jscript 도구에 대한 정보는 계속해서 이 블로그를 주목해 주세요. 또 자세한 내용은 다음의 문서 (영어)를 참조하세요. 

John Hrvatin
Program Manager