AIR HTML Introspector를 사용한 디버깅Adobe® AIR® SDK에는 응용 프로그램에 포함시켜 HTML 기반 응용 프로그램을 디버깅하는 데 사용할 수 있는 AIRIntrospector.js JavaScript 파일이 포함되어 있습니다. AIR IntrospectorAdobe AIR HTML/JavaScript Application Introspector(AIR HTML Introspector)는 HTML 기반 응용 프로그램을 개발하고 디버깅하는 데 도움을 주는 다음과 같은 유용한 기능을 제공합니다.
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() 메서드와 동일하지만 호출될 때 콘솔 탭의 줄 시작 부분에 다음과 같은 아이콘이 표시된다는 것이 다릅니다.
log(), warn(), info() 및 error() 메서드는 실제 객체에 대한 참조만 보내므로 사용할 수 있는 속성은 보는 시점의 속성입니다. 실제 객체와 직렬화하고 싶은 경우에는 dump() 메서드를 사용하십시오. 이 메서드에는 매개 변수가 두 개 있습니다.
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가지 속성이 있습니다.
AIR Introspector 인터페이스응용 프로그램을 디버깅할 때 AIR introspector 윈도우를 열려면 F12 키를 누르거나 Console 클래스의 메서드 중 하나를 호출합니다(콘솔 탭에서 객체 검사 참조). F12 키가 아닌 키를 바로 가기 키로 구성할 수 있습니다. 자세한 내용은 AIR Introspector 구성을 참조하십시오. 다음 그림에서 볼 수 있는 것처럼 AIR Introspector 윈도우에는 콘솔, HTML, DOM, 에셋, 소스 및 XHR의 6개 탭이 있습니다. 콘솔 탭[콘솔] 탭에는 air.Introspector.Console 클래스의 메서드 중 하나에 매개 변수로 전달된 속성 값이 표시됩니다. 자세한 내용은 콘솔 탭에서 객체 검사를 참조하십시오.
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)를 누릅니다. 표시되지 않은 트리 노드는 검색되지 않는다는 것에 주의하십시오. 소스 탭[소스] 탭에는 섹션 세 개가 있습니다.
[소스] 탭에 표시된 데이터를 새로 고치려면 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를 사용할 수 있지만 다음과 같은 규칙을 따라야 합니다.
|
|
