Internet Explorer 8 개발자 도구 Jscript Profiler 소개

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

원본 : Introducing the IE8 Developer Tools JScript Profiler (영어)

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

안녕하세요, Jscript 팀 프로그램 관리자 Sameer Chabungbam 입니다.

최근 공개된 Internet Explorer 8 Beta 2 에는 웹 응용 프로그램 개발을 간단하게, 보다 생산적으로 할 수 있도록 지원하기 위해 개선된 점이 많이 있습니다. 개선된 내용의 하나로,  개발자 도구인 JScript Profiler 는 성능 문제를 파악하여, 수정하는데 도움이 되는 중요한 스크립트 관련 동작 데이터를 웹 개발자에 제공합니다. Profiler가 웹 응용 프로그램의 스크립트의 성능을 향상시키기 위한 매우 유익한 도구라고 확신합니다. Jscript Profiler는 가볍고, 사용하기 쉬우며, 다음과 같은 기능을 이용할 수 있습니다.

• 두가지 표시 방법에 따르는 Jscript 기능 동작 데이터 제공
  · 기능 뷰 - 모든 기능의 목록 표시
  · 호출 트리뷰 -  호출순서의 계층 표시
• 파일 보내기 지원
• 익명 함수 이름 추정
• Jscript 내장 함수 분석
• 다양한 분석 리포트 지원
• 여러 페이지에 걸친 탐색과 업데이트 작업을 포함한 분석 지원

이 글에서는 Profiler 소개와 몇가지 기능을 소개합니다. 부디 이 도구를 시험해 보시고, 피드백을 보내주세요.

Profiler 사용

Internet Explorer 8 의 개발자 도구는 F12 키를 누르거나 명령 모음의 드롭 다운 리스트에서 "개발자 도구" 를 선택하여 실행합니다. 프로파일 탭으로 전환하면, 새로운 스크립트 Profiler가 보입니다. "프로파일링 시작" 단추를 클릭하면 새로운 프로파일링 세션이 시작됩니다.

이 상태에서 분석이 필요한 동작을 실시하면, Jscript 의 동작 데이터가 Profiler에 의해서 백그라운드에서 자동적으로 수집됩니다. 단추 표시가 "프로파일링 중지" 로 바뀌고 프로파일링을 실행하는 것에 주의해 주세요. 프로파일링을 중지하려면, "프로파일링 중지" 단추를 클릭합니다. Profiler는 수집한 동작 데이터를 처리하고, 종료된 세션의 분석 리포트를 보여줍니다.

분석 결과를 확인한다

분석 결과는 현재 표시된 드롭 다운 목록에서 선택할 수 있는 두가지 종류의 표시 방법으로 데이터를 제공합니다.

• 기능 뷰 : 동작 데이터에 대응하는 모든 기능의 목록표입니다
• 호출 트리뷰 : 호출 실행 시퀀스에 근거하는 기능의 계층 목록입니다. 각각의 노드에는 기능과 모든 호출 기능 목록, 호출 동작 데이터가 대응합니다. 호출하는 트리 표시는 스크립트의 성능에 큰 영향이 있는 호출 스택 흔적을 찾아내는데 편리합니다.

위 두가지 뷰는 각각의 행이 Jscript 기능에 대응하고, 다양한 동작 데이터를 각각의 열에 대응합니다. 이 표시는 다른 열을 표시하기 위해서 사용자가 지정을 할 수 있습니다. 열의 머리글을 오른쪽 클릭하여, 표시하고자 하는 열을 선택하기 위해 [열 추가와 삭제] 를 선택합니다.

대응하는 열의 머리글을 클릭하거나 오른쪽을 클릭하여 표시되는 context menu에서  "정렬"에서 기준의 열을 선택하면, 행을 정렬할 수 있습니다.

표시할 수 있는 열은 다음과 같습니다

• 기능： 기능 이름
• 회수： 기능이 호출된 회수
• 포괄 시간 (ms) ： 이 기능과 자식 기능이 소비한 밀리초 단위의 시간
• 포괄 시간 (%)： 이 기능과 자식 기능이 소비한 시간의 비율
• 배타 시간 (ms) ： 이 기능이 소비한 밀리초 단위의 시간
• 배타 시간 (%) ： 이 기능이 소비한 시간의 비율
• 평균시간 (ms) ： 이 기능과 자식 기능이 소비한 밀리초 단위의 평균시간
• 최대 시간 (ms) ： 이 기능과 자식 기능이 소비한 밀리초 단위의 최대 시간
• 최소 시간 (ms) ： 이 기능과 자식 기능이 소비한 밀리초 단위의 최소 시간
• URL ： 이 기능이 정의된 소스 파일의URL
• 행 번호 ： 소스 파일에서 이 기능이 시작되는 행 번호

행을 더블 클릭하면 대응하는 기능이 정의된 부분의 소스 코드가 스크립트 탭으로 표시할 수 있지만, 이것은 동작 데이터에서 URL 정보가 수집 되어, 스크립트 탭에 소스 파일이 로드된 경우에 유효합니다. Profiler에 URL 정보를 수집시키기 위해서는 Internet Explorer 의 스크립트 디버거를 유효하게 해야 합니다. [주의 : 스크립트 디버거는 [도구] > [인터넷 옵션] > [세부 사항 설정] 탭에서 유효하게 할 수 있습니다]

데이터 내보내기

분석 리포트를 한층 더 분석하거나 그래프화하고, 다른 응용 프로그램과 공유하고 싶을 때가 많습니다. 이 요구사항을 간단하게 만족시키기 위해, Profiler는 데이터를 쉼표 단락 (CSV) 형식에서 내보내기가 가능해 졌습니다. 이 데이터는 Microsoft Office Excel ® 과 같은 응용 프로그램에서 열리고, 공유 가능합니다. "데이터 내보내기" 단추 를 클릭하여, 파일 이름을 설정하면, 현재의 리포트 동작 데이터가 파일화됩니다. 현시점에서는 기능 뷰만으로 내보내기가 가능하고, 호출 트리뷰에서는 내보내기를 할 수 없습니다.

추정되는 이름

JavaScript에서는 함수명은 임의의 설정 항목입니다. 이름이 없는 함수(익명 함수 - anonymous function - 라고 부릅니다)를 정의할 수 있습니다. 실제로 이러한 일은 빈번히 발생합니다. 실제로 JavaScript 함수의 상당수는 개체 리터럴 문맥으로 정의되어, 대부분의 경우에 익명(anonymous)입니다. 이것은 프로파일 리포트에서 문제가 됩니다. 여러개의 anonymous 엔트리가 존재하는 경우, 이것을 식별하는 유일한 방법은 URL과 행 번호 정보에서 그 함수를 정의하는 실제의 소스 코드를 찾을 수 밖에 없습니다. 이것은 편리함과는 거리가 멀고, 분석 리포트를 읽기 어렵고, 이해하기 어려운 것으로 만듭니다. 

이 문제를 해결하기 위해, Jscript Profiler는 함수가 정의된 문맥의 위치를 바탕으로, 각각의 anonymous 함수 이름을 추정합니다. 어떻게 실행하는지는 다음과 같습니다.

var Shape = {

    Area : function () {    .    .    . }     // anonymous function 1

};

Foo = function () {    .    .    . }     // anonymous function 2

이 코드를 분석하면, 이러한 함수는 모두 anonymous (익명)으로 표시되는 대신에 각각 "Area" 와 "Foo" 라고 추측하여 리포트 됩니다. 이 방법으로, 소스 코드를 열지 않고 분석 리포트에서 어느 함수가 참조되었는지 신속하게 알 수 있습니다. 이름 추측에 이용되는 경험적 접근(heuristics) 논리는 극히 단순하고 성능에 부담을 주지 않습니다. 경우에 따라서는 이름 추정에 실패할 때도 있지만, 그 경우에 함수는 특별한 이름인 [Anonymous] 로서 목록에 표시됩니다.

Internet Explorer에서 동작하는 웹 응용 프로그램내의 JavaScript 성능을 개선할 때에 이 Profiler가 귀중한 보물이 될 것이라고 기대하고 있습니다.

감사합니다.