AIR HTML Introspector를 사용한 디버깅

Adobe® AIR® SDK에는 응용 프로그램에 포함시켜 HTML 기반 응용 프로그램을 디버깅하는 데 사용할 수 있는 AIRIntrospector.js JavaScript 파일이 포함되어 있습니다.

AIR Introspector

Adobe AIR HTML/JavaScript Application Introspector(AIR HTML Introspector)는 HTML 기반 응용 프로그램을 개발하고 디버깅하는 데 도움을 주는 다음과 같은 유용한 기능을 제공합니다.

  • 응용 프로그램의 사용자 인터페이스 요소를 가리켜 해당 마크업과 DOM 속성을 확인할 수 있는 검사 도구가 포함되어 있습니다.

  • 검사를 위해 객체 참조를 보내거나, 속성 값을 조정하고 JavaScript 코드를 실행할 수 있는 콘솔이 포함되어 있습니다. 또한 객체를 콘솔과 직렬화하여 데이터를 편집하지 못하도록 제한할 수 있습니다. 콘솔에서 텍스트를 복사하고 저장할 수 있습니다.

  • DOM 속성 및 함수의 트리 보기가 포함되어 있습니다.

  • DOM 요소의 특성과 텍스트 노드를 편집할 수 있습니다.

  • 응용 프로그램에 로드된 링크, CSS 스타일, 이미지 및 JavaScript 파일을 목록으로 표시합니다.

  • 사용자 인터페이스의 초기 HTML 소스와 현재 마크업 소스를 확인할 수 있습니다.

  • 응용 프로그램 디렉토리에 있는 파일에 액세스할 수 있습니다. 이 기능은 응용 프로그램 샌드박스에 대해 열린 AIR HTML Introspector 콘솔에서만 사용할 수 있습니다. 응용 프로그램 샌드박스 내용에서 열린 콘솔이 아닌 경우 이 기능을 사용할 수 없습니다.

  • XMLHttpRequest 객체와 responseText , responseXML 등을 비롯한 해당 속성(사용할 수 있는 경우)을 볼 수 있는 뷰어가 포함되어 있습니다.

  • 소스 코드와 파일에서 일치하는 텍스트를 검색할 수 있습니다.

AIR Introspector 코드 로드

AIR Introspector 코드는 JavaScript 파일인 AIRIntrospector.js에 포함되어 있으며, 이 파일은 AIR SDK의 frameworks 디렉토리에 있습니다. 응용 프로그램에서 AIR Introspector를 사용하려면 AIRIntrospector.js를 응용 프로그램 프로젝트 디렉토리에 복사하고 응용 프로그램의 기본 HTML 파일에서 script 태그를 사용하여 로드합니다.

<script type="text/javascript" src="AIRIntrospector.js"></script>

또한 응용 프로그램의 다양한 기본 윈도우에 해당하는 모든 HTML 파일을 파일에 포함시킵니다.

중요: AIRIntrospector.js 파일은 응용 프로그램을 개발하고 디버깅할 때만 포함시키십시오. 배포하려고 패키지화한 AIR 응용 프로그램에서는 이 파일을 제거해야 합니다.

AIRIntrospector.js 파일은 Console 클래스를 정의합니다. JavaScript 코드에서는 air.Introspector.Console 을 호출하여 이 클래스에 액세스할 수 있습니다.

참고: AIR Introspector를 사용하는 코드는 응용 프로그램 보안 샌드박스(응용 프로그램 디렉토리의 파일)에 있어야 합니다.

콘솔 탭에서 객체 검사

Console 클래스에는 log() , warn() , info() , error() dump() 의 다섯 가지 메서드가 정의되어 있습니다.

log() , warn() , info() error() 메서드 모두 객체를 콘솔 탭으로 보내는 데 사용할 수 있습니다. 이러한 메서드 중 가장 기본적인 메서드는 log() 메서드입니다. 다음 코드에서는 test 변수로 표현된 단순 객체를 콘솔 탭으로 보냅니다.

var test = "hello"; 
air.Introspector.Console.log(test);

하지만 복합 객체를 콘솔 탭으로 보내는 것이 유용한 경우가 많습니다. 예를 들어, 다음 HTML 페이지에는 버튼 객체 자체를 콘솔 탭으로 보내는 함수를 호출한 버튼( btn1 )이 포함되어 있습니다.

<html> 
    <head> 
        <title>Source Viewer Sample</title> 
        <script type="text/javascript" src="scripts/AIRIntrospector.js"></script> 
        <script type="text/javascript"> 
            function logBtn() 
            { 
                var button1 = document.getElementById("btn1"); 
                air.Introspector.Console.log(button1); 
            } 
        </script> 
    </head> 
    <body> 
        <p>Click to view the button object in the Console.</p> 
        <input type="button" id="btn1" 
            onclick="logBtn()"  
            value="Log" /> 
    </body> 
</html>

이 버튼을 클릭하면 콘솔 탭에 btn1 객체가 표시되고, 객체의 트리 보기를 확장하여 속성을 검사할 수 있습니다.

속성 이름 오른쪽에 있는 목록을 클릭하고 텍스트 목록을 수정하여 객체의 속성을 편집할 수 있습니다.

info() , error() warn() 메서드는 log() 메서드와 동일하지만 호출될 때 콘솔 탭의 줄 시작 부분에 다음과 같은 아이콘이 표시된다는 것이 다릅니다.

메서드

아이콘

info()

error()

warn()

log() , warn() , info() error() 메서드는 실제 객체에 대한 참조만 보내므로 사용할 수 있는 속성은 보는 시점의 속성입니다. 실제 객체와 직렬화하고 싶은 경우에는 dump() 메서드를 사용하십시오. 이 메서드에는 매개 변수가 두 개 있습니다.

매개 변수

설명

dumpObject

직렬화할 객체입니다.

levels

객체 트리에서 루트 수준과 함께 검사할 수준의 최대 수입니다. 기본값은 1로, 트리의 루트 수준에서 한 수준 깊은 수준이 표시됩니다. 이 매개 변수는 선택적입니다.

dump() 메서드를 호출하면 객체를 콘솔 탭으로 보내기 전에 직렬화하므로 객체의 속성을 편집할 수 없게 됩니다. 예를 들어 다음과 같은 코드를 살펴봅니다.

var testObject = new Object(); 
testObject.foo = "foo"; 
testObject.bar = 234; 
air.Introspector.Console.dump(testObject);

이 코드를 실행하면 콘솔에 testObject 객체와 해당 속성이 나타나지만 콘솔에서 속성 값을 편집할 수 없습니다.

AIR Introspector 구성

AIRIntrospectorConfig 전역 변수를 설정하여 콘솔을 구성할 수 있습니다. 예를 들어, 다음 JavaScript 코드는 100자 단위로 열을 줄 바꿈하도록 AIR Introspector를 구성합니다.

var AIRIntrospectorConfig = new Object(); 
AIRIntrospectorConfig.wrapColumns = 100;

AIRIntrospectorConfig 변수의 속성은 script 태그를 통해 AIRIntrospector.js 파일을 로드하기 전에 설정해야 합니다.

AIRIntrospectorConfig 변수에는 다음과 같은 8가지 속성이 있습니다.

속성

기본값

설명

closeIntrospectorOnExit

true

응용 프로그램의 다른 모든 윈도우가 닫히면 관리자 윈도우가 닫히도록 설정합니다.

debuggerKey

123(F12 키)

AIR Introspector 윈도우를 표시하거나 숨기는 키보드 단축키에 대한 키 코드입니다.

debugRuntimeObjects

true

JavaScript에 정의되어 있는 객체와 함께 런타임 객체를 확장하도록 설정합니다.

flashTabLabels

true

콘솔 및 XMLHttpRequest 탭이 변경되면 깜빡이도록 설정합니다(예: 이러한 탭에서 텍스트가 기록된 경우).

introspectorKey

122(F11 키)

검사 패널을 여는 키보드 단축키에 대한 키 코드입니다.

showTimestamp

true

콘솔 탭에서 각 줄의 시작 부분에 타임스탬프를 표시하도록 설정합니다.

showSender

true

콘솔 탭에서 각 줄의 시작 부분에 메시지를 보내는 객체에 대한 정보를 표시하도록 설정합니다.

wrapColumns

2000

소스 파일에서 줄 바꿈을 할 열 번호입니다.

AIR Introspector 인터페이스

응용 프로그램을 디버깅할 때 AIR introspector 윈도우를 열려면 F12 키를 누르거나 Console 클래스의 메서드 중 하나를 호출합니다( 콘솔 탭에서 객체 검사 참조). F12 키가 아닌 키를 바로 가기 키로 구성할 수 있습니다. 자세한 내용은 AIR Introspector 구성 을 참조하십시오.

다음 그림에서 볼 수 있는 것처럼 AIR Introspector 윈도우에는 콘솔, HTML, DOM, 에셋, 소스 및 XHR의 6개 탭이 있습니다.

콘솔 탭

[콘솔] 탭에는 air.Introspector.Console 클래스의 메서드 중 하나에 매개 변수로 전달된 속성 값이 표시됩니다. 자세한 내용은 콘솔 탭에서 객체 검사 를 참조하십시오.

  • 콘솔을 지우려면 텍스트를 마우스 오른쪽 버튼으로 클릭하고 [콘솔 지우기]를 선택합니다.

  • [콘솔] 탭에 있는 텍스트를 파일에 저장하려면 콘솔 탭을 마우스 오른쪽 버튼으로 클릭하고 [파일에 콘솔 저장]을 선택합니다.

  • [콘솔] 탭에 있는 텍스트를 클립보드에 저장하려면 콘솔 탭을 마우스 오른쪽 버튼으로 클릭하고 [클립보드에 콘솔 저장]을 선택합니다. 선택한 텍스트를 클립보드에 복사하려면 텍스트를 마우스 오른쪽 버튼으로 클릭하고 [복사]를 선택합니다.

  • Console 클래스에 있는 텍스트를 파일에 저장하려면 콘솔 탭을 마우스 오른쪽 버튼으로 클릭하고 [파일에 콘솔 저장]을 선택합니다.

  • 탭에 표시된 텍스트에서 일치하는 텍스트를 검색하려면 Ctrl+F(Windows) 또는 Command+F(Mac OS)를 누릅니다. 표시되지 않은 트리 노드는 검색되지 않는다는 것에 주의하십시오.

HTML 탭

[HTML] 탭을 사용하면 전체 HTML DOM을 트리 구조로 볼 수 있습니다. 요소를 클릭하면 탭 오른쪽에 해당 속성이 표시됩니다. 트리의 노드를 확장하거나 축소하려면 + 및 - 아이콘을 클릭합니다.

[HTML] 탭에서는 모든 특성과 텍스트 요소를 편집할 수 있으며, 편집한 값은 응용 프로그램에 반영됩니다.

AIR Introspector 윈도우의 탭 목록 왼쪽에 있는 [검사] 버튼을 클릭합니다. 기본 윈도우의 HTML 페이지에서 원하는 요소를 클릭하면 [HTML] 탭에 연결된 DOM 객체가 표시됩니다. 기본 윈도우에 포커스가 있는 경우 키보드 단축키를 눌러 [검사] 버튼을 설정하거나 해제할 수 있습니다. 키보드 단축키는 기본적으로 F11입니다. F11 키가 아닌 키를 키보드 단축키로 구성할 수 있습니다. 자세한 내용은 AIR Introspector 구성 을 참조하십시오.

[HTML] 탭에 표시된 데이터를 새로 고치려면 AIR Introspector 윈도우 맨 위에 있는 [활성 윈도우 새로 고침] 버튼을 클릭합니다.

탭에 표시된 텍스트에서 일치하는 텍스트를 검색하려면 Ctrl+F(Windows) 또는 Command+F(Mac OS)를 누릅니다. 표시되지 않은 트리 노드는 검색되지 않는다는 것에 주의하십시오.

DOM 탭

[DOM] 탭에는 윈도우 객체가 트리 구조로 표시됩니다. 모든 문자열 및 숫자 속성을 편집할 수 있으며, 편집한 값은 응용 프로그램에 반영됩니다.

[DOM] 탭에 표시된 데이터를 새로 고치려면 AIR Introspector 윈도우 맨 위에 있는 [활성 윈도우 새로 고침] 버튼을 클릭합니다.

탭에 표시된 텍스트에서 일치하는 텍스트를 검색하려면 Ctrl+F(Windows) 또는 Command+F(Mac OS)를 누릅니다. 표시되지 않은 트리 노드는 검색되지 않는다는 것에 주의하십시오.

에셋 탭

[에셋] 탭을 사용하면 기본 윈도우에 로드된 링크, 이미지, CSS 및 JavaScript 파일을 확인할 수 있습니다. 이러한 노드 중 하나를 확장하면 파일의 내용이나 실제 사용된 이미지가 표시됩니다.

[에셋] 탭에 표시된 데이터를 새로 고치려면 AIR Introspector 윈도우 맨 위에 있는 [활성 윈도우 새로 고침] 버튼을 클릭합니다.

탭에 표시된 텍스트에서 일치하는 텍스트를 검색하려면 Ctrl+F(Windows) 또는 Command+F(Mac OS)를 누릅니다. 표시되지 않은 트리 노드는 검색되지 않는다는 것에 주의하십시오.

소스 탭

[소스] 탭에는 섹션 세 개가 있습니다.

  • 실제 소스 - 응용 프로그램을 시작할 때 루트 내용으로 로드된 페이지의 HTML 소스를 표시합니다.

  • 파싱된 소스 - 응용 프로그램 UI를 구성하는 현재 마크업을 표시합니다. 응용 프로그램은 Ajax 기술을 사용하여 즉석에서 마크업 코드를 생성하므로 마크업 코드가 실제 소스와 다를 수 있습니다.

  • 응용 프로그램 파일 - 응용 프로그램 디렉토리에 있는 파일을 나열합니다. 이 목록은 응용 프로그램 보안 샌드박스의 내용에서 실행된 AIR Introspector에서만 사용할 수 있습니다. 이 섹션에서 텍스트 파일의 내용이나 이미지를 볼 수 있습니다.

[소스] 탭에 표시된 데이터를 새로 고치려면 AIR Introspector 윈도우 맨 위에 있는 [활성 윈도우 새로 고침] 버튼을 클릭합니다.

탭에 표시된 텍스트에서 일치하는 텍스트를 검색하려면 Ctrl+F(Windows) 또는 Command+F(Mac OS)를 누릅니다. 표시되지 않은 트리 노드는 검색되지 않는다는 것에 주의하십시오.

XHR 탭

[XHR] 탭은 응용 프로그램의 모든 XMLHttpRequest 통신을 가로채 정보를 기록합니다. 이 탭을 사용하면 responseText , responseXML 등을 비롯한 XMLHttpRequest 속성(사용 가능한 경우)을 트리 보기로 볼 수 있습니다.

탭에 표시된 텍스트에서 일치하는 텍스트를 검색하려면 Ctrl+F(Windows) 또는 Command+F(Mac OS)를 누릅니다. 표시되지 않은 트리 노드는 검색되지 않는다는 것에 주의하십시오.

비 응용 프로그램 샌드박스의 내용으로 AIR Introspector 사용

응용 프로그램 디렉토리의 내용을 비 응용 프로그램 샌드박스에 매핑된 iframe이나 frame으로 로드할 수 있습니다. Adobe AIR의 HTML 보안 (ActionScript 개발자용) 또는 Adobe AIR의 HTML 보안 (HTML 개발자용)을 참조하십시오. 이러한 내용을 포함한 AIR introspector를 사용할 수 있지만 다음과 같은 규칙을 따라야 합니다.

  • AIRIntrospector.js 파일이 응용 프로그램 샌드박스 내용과 비 응용 프로그램 샌드박스(iframe) 내용에 모두 포함되어야 합니다.

  • parentSandboxBridge 속성은 덮어쓰지 마십시오. AIR Introspector 코드에서 이 속성을 사용합니다. 필요한 경우에는 속성을 추가합니다. 예를 들어, 다음과 같이 하는 대신

    parentSandboxBridge = mytrace: function(str) {runtime.trace(str)}} ;

    다음과 같은 구문을 사용하십시오.

    parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
  • 비 응용 프로그램 샌드박스 내용에서는 F12 키를 누르거나 air.Introspector.Console 클래스의 메서드 중 하나를 호출하여 AIR Introspector를 열 수 없습니다. 이 경우 Introspector 윈도우를 열려면 [Introspector 열기] 버튼을 클릭해야 합니다. 이 버튼은 기본적으로 iframe 또는 frame의 맨 오른쪽 위에 추가됩니다. 비 응용 프로그램 샌드박스 내용에 적용되는 보안 제한 때문에 버튼 클릭과 같은 사용자 동작의 결과로만 새 윈도우를 열 수 있습니다.

  • 응용 프로그램 샌드박스와 비 응용 프로그램 샌드박스 각각에 대해 별도의 AIR Introspector 윈도우를 열 수 있습니다. 두 윈도우는 AIR Introspector 윈도우에 표시된 제목으로 구분할 수 있습니다.

  • AIR Introspector를 비 응용 프로그램 샌드박스에서 실행할 때는 [소스] 탭에 응용 프로그램 파일이 표시되지 않습니다.

  • AIR Introspector는 자신을 연 샌드박스의 코드만 검사할 수 있습니다.