Отладка с помощью AIR HTML IntrospectorПакет Adobe® AIR® SDK включает файл JavaScript, AIRIntrospector.js, который можно включить в приложение для помощи при откладке HTML-приложений. О программе AIR IntrospectorПрограмма Introspector для HTML/JavaScript-приложений Adobe AIR (называемая также AIR HTML Introspector) обеспечивает следующие полезные функциональные возможности, помогающие при разработке и отладке HTML-приложений.
Загрузка кода AIR IntrospectorКод AIR Introspector содержится в файле JavaScript (AIRIntrospector.js), который находится в каталоге frameworks пакета AIR SDK. Чтобы использовать AIR Introspector в своем приложении, скопируйте файл AIRIntrospector.js в каталог проекта приложения и загрузите файл с помощью тега скрипта в основной HTML-файл приложения: <script type="text/javascript" src="AIRIntrospector.js"></script> Также включите этот файл в любой HTML-файл, соответствующий различным исходным окнам приложения. Важная информация. Включайте файл AIRIntrospector.js только при развертывании и отладке приложения. Удалите его из упакованного приложения AIR перед его распространением.
Файл AIRIntrospector.js определяет класс Console, к которому можно обращаться из кода JavaScript путем вызова air.Introspector.Console. Примечание. Код, использующий AIR Introspector, должен находиться в изолированной программной среде приложения (в файле, находящемся в каталоге приложения).
Проверка объекта на вкладке Console (Консоль)Класс Console определяет пять методов: log(), warn(), info(), error() и dump(). Методы log(), warn(), info() и error() все позволяют отправлять объект на вкладку Console (Консоль). Наиболее простым из этих методов является log(). В следующем примере простой объект, представленный переменной test, передается на вкладку Console (Консоль): var test = "hello"; air.Introspector.Console.log(test); Но гораздо полезнее отправлять на вкладку Console (Консоль) сложные объекты. Например, следующая страница HTML содержит кнопку (btn1), которая вызывает функцию, отправляющую сам объект кнопки на вкладку Console (Консоль): <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> При нажатии этой кнопки на вкладке Console (Консоль) отображается объект btn1, можно развернуть древовидное представление этого объекта для проверки его свойств: Можно изменить свойство объекта, щелкнув запись справа от имени свойства и изменив эту текстовую запись. Методы info(), error() и warn() сходны с методом log(). Но при вызове этих методов на вкладке Console (Консоль) отображается значок в начале строки:
Методы log(), warn(), info() и error() отправляют ссылку только на фактический объект, поэтому доступны только те свойства, которые актуальны на момент просмотра. Если требуется сериализовать этот фактический объект, используйте метод dump(). Метод содержит два параметра:
Вызов метода dump() сериализует объект перед его отправкой на вкладку Console (Консоль), поэтому свойства этого объекта нельзя редактировать. Например, рассмотрим следующий код: var testObject = new Object(); testObject.foo = "foo"; testObject.bar = 234; air.Introspector.Console.dump(testObject); При выполнении этого кода на консоли отображается объект testObject и его свойства, но значения свойств редактировать нельзя. Настройка AIR IntrospectorМожно настроить консоль, установив свойства глобальной переменной AIRIntrospectorConfig. Например, в следующем коде JavaScript выполняется настройка AIR Introspector для перехода на новую строку в столбцах через 100 символов: var AIRIntrospectorConfig = new Object(); AIRIntrospectorConfig.wrapColumns = 100; Убедитесь, что свойства переменной AIRIntrospectorConfig установлены до загрузки файла AIRIntrospector.js (с помощью тега script). Для переменной AIRIntrospectorConfig можно определить восемь следующих свойств:
Интерфейс AIR IntrospectorЧтобы открыть окно AIR Introspector при отладке приложения, нажмите клавишу F12 или вызовите один из методов класса Console (см. раздел «Проверка объекта на вкладке Console (Консоль)»). Можно настроить другую клавишу быстрого вызова вместо клавиши F12; см. раздел «Настройка AIR Introspector». В окне AIR Introspector содержится шесть вкладок: Console (Консоль), HTML, DOM, Assets, Source и XHR, как показано на следующем рисунке: Вкладка Console (Консоль)На вкладке Console (Консоль) отображаются значения свойств, переданные как параметры одному из методов класса air.Introspector.Console. Дополнительные сведения см. в разделе «Проверка объекта на вкладке Console (Консоль)».
Вкладка HTMLВкладка HTML позволяет просматривать весь HTML DOM в древовидной структуре. Щелкните элемент, чтобы просмотреть его свойства в правой части вкладки. Щелкните значки «+» и «-», чтобы развернуть или свернуть узел в дереве. Можно отредактировать любой атрибут или текстовый элемент на вкладке HTML и измененное значение отобразится в приложении. Нажмите кнопку Inspect (Проверить) (слева от списка вкладок в окне AIR Introspector). Можно щелкнуть любой элемент на странице HTML главного окна и связанный объект DOM отобразится на вкладке HTML. Если для главного окна включен фокус, можно также нажать клавишу быстрого вызова, чтобы включить или отключить кнопку Inspect. По умолчанию для этого используется клавиша быстрого вызова F11. Можно настроить другую клавишу быстрого вызова вместо клавиши F11. См. раздел «Настройка AIR Introspector». Нажмите кнопку Refresh Active Window (Обновить активное окно) в верхней части окна AIR Introspector, чтобы обновить данные, отображаемые на вкладке HTML. Нажмите CTRL+F в Windows или Command+F в Mac OS, чтобы выполнить поиск соответствующего критерию текста, отображаемого на вкладке. (Узлы дерева, которые не отображаются, не доступны для поиска.) Вкладка DOMНа вкладке DOM показывается объект окна в древовидной структуре. Можно изменить любые строчные или численные свойства, отредактированные значения отображаются в приложении. Нажмите кнопку Refresh Active Window (Обновить активное окно) в верхней части окна AIR Introspector, чтобы обновить данные, отображаемые на вкладке DOM. Нажмите CTRL+F в Windows или Command+F в Mac OS, чтобы выполнить поиск соответствующего критерию текста, отображаемого на вкладке. (Узлы дерева, которые не отображаются, не доступны для поиска.) Вкладка Assets (Активы)На вкладке Assets (Активы) можно проверить ссылки, изображения, CSS и файлы JavaScript, загруженные в исходном окне. При развертывании одного из этих узлов показывается содержимое файла или отображается фактически используемое изображение. Нажмите кнопку Refresh Active Window (Обновить активное окно) в верхней части окна AIR Introspector, чтобы обновить данные, отображаемые на вкладке Assets (Активы). Нажмите CTRL+F в Windows или Command+F в Mac OS, чтобы выполнить поиск соответствующего критерию текста, отображаемого на вкладке. (Узлы дерева, которые не отображаются, не доступны для поиска.) Вкладка Source (Источник)Вкладка Source (Источник) содержит три раздела:
Нажмите кнопку Refresh Active Window (Обновить активное окно) в верхней части окна AIR Introspector, чтобы обновить данные, отображаемые на вкладке Source (Источник). Нажмите CTRL+F в Windows или Command+F в Mac OS, чтобы выполнить поиск соответствующего критерию текста, отображаемого на вкладке. (Узлы дерева, которые не отображаются, не доступны для поиска.) Вкладка XHRВкладка XHR перехватывает все обращения к XMLHttpRequest в приложении и протоколирует эту информацию. Это позволяет просматривать в древовидном представлении свойства XMLHttpRequest, включая responseText и responseXML (если они доступны). Нажмите CTRL+F в Windows или Command+F в Mac OS, чтобы выполнить поиск соответствующего критерию текста, отображаемого на вкладке. (Узлы дерева, которые не отображаются, не доступны для поиска.) Использование AIR Introspector с содержимым, находящимся вне изолированной программной среды приложенияМожно загрузить содержимое из каталога приложения в объект iframe или frame, который отображается на изолированную программную среду, не связанную с приложением. (См. раздел «Система защиты HTML в Adobe AIR» для разработчиков ActionScript или «Система безопасности HTML в Adobe AIR» для разработчиков HTML). Можно использовать AIR Introspector с таким содержимым, но соблюдая следующие правила:
|
|