|
Пакет Adobe® AIR® SDK включает файл JavaScript, AIRIntrospector.js, который можно включить в приложение для помощи при откладке HTML-приложений.
О программе AIR Introspector
Программа Introspector для HTML/JavaScript-приложений Adobe AIR (называемая также AIR HTML Introspector) обеспечивает следующие полезные функциональные возможности, помогающие при разработке и отладке HTML-приложений.
-
Включает инструмент самоанализа, который позволяет указать элемент пользовательского интерфейса в приложении и просмотреть его свойства разметки и DOM.
-
Включает консоль для отправки ссылки на объекты для анализа, где можно настроить правильные значения и выполнить код JavaScript. Также можно сериализовать объекты при выводе их на консоль, что ограничит возможность редактирования данных. Кроме того, можно скопировать и сохранить текст с консоли.
-
Консоль содержит три представления для свойств и функций DOM.
-
Они позволяют редактировать атрибуты и текстовые узлы для элементов DOM.
-
В консоли отображаются списки ссылок, стилей CSS, изображений и файлов JavaScript, загруженных в приложение.
-
Можно просматривать HTML-источник и текущий источник разметки для интерфейса пользователя.
-
Позволяет обращаться к файлам в каталоге приложения. (Эта возможность доступна только в консоли AIR HTML Introspector, открытой в изолированной программной среде приложения. Она недоступна для консолей, открытых для содержимого не в изолированной программной среде приложения.)
-
Консоль включает средство просмотра объектов XMLHttpRequest и их свойств, включая свойства
responseText
и
responseXML
(если они доступны).
-
Можно выполнить поиск соответствующего критериям текста в коде источника и в файлах.
Загрузка кода 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 (Консоль) отображается значок в начале строки:
|
Метод
|
Значок
|
|
info()
|
|
|
error()
|
|
|
warn()
|
|
Методы
log()
,
warn()
,
info()
и
error()
отправляют ссылку только на фактический объект, поэтому доступны только те свойства, которые актуальны на момент просмотра. Если требуется сериализовать этот фактический объект, используйте метод
dump()
. Метод содержит два параметра:
|
Параметр
|
Описание
|
|
dumpObject
|
Объект для сериализации.
|
|
levels
|
Максимальное число уровней, которые будут проверяться в дереве объекта (помимо корневого уровня). Значение по умолчанию 1 (означает, что показывается только один уровень за корневым уровнем дерева). Этот параметр не обязателен.
|
Вызов метода
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
можно определить восемь следующих свойств:
|
Свойство
|
Значение по умолчанию
|
Описание
|
|
closeIntrospectorOnExit
|
true
|
Задает, что окно Inspector будет закрываться, когда будут закрыты все другие окна приложения.
|
|
debuggerKey
|
123 (клавиша F12)
|
Код ключа для клавиши быстро вызова, позволяющей отображать и скрывать окно AIR Introspector.
|
|
debugRuntimeObjects
|
true
|
Задает, чтобы Introspector развертывал объекты выполнения в дополнение к объектам, определенным в JavaScript.
|
|
flashTabLabels
|
true
|
Задает, чтобы вкладки Console (Консоль) и XMLHttpRequest мигали, показывая, когда на них произошли изменения (например, когда изменяется текст на этих вкладках).
|
|
introspectorKey
|
122 (клавиша F11)
|
Код ключа для клавиши быстрого вызова, для открытия панели Inspect.
|
|
showTimestamp
|
true
|
Задает, чтобы в начале каждой строки на вкладке Console (Консоль) отображалась метка времени.
|
|
showSender
|
true
|
Задает, чтобы в начале каждой строки на вкладке Console (Консоль) отображалась информация об объекте, отправившем это сообщение.
|
|
wrapColumns
|
2000
|
Число столбцов, на которые разбиты исходные файлы.
|
Интерфейс AIR Introspector
Чтобы открыть окно AIR Introspector при отладке приложения, нажмите клавишу F12 или вызовите один из методов класса Console (см. раздел «
Проверка объекта на вкладке Console (Консоль)
»). Можно настроить другую клавишу быстрого вызова вместо клавиши F12; см. раздел «
Настройка AIR Introspector
».
В окне AIR Introspector содержится шесть вкладок: Console (Консоль), HTML, DOM, Assets, Source и XHR, как показано на следующем рисунке:
Вкладка Console (Консоль)
На вкладке Console (Консоль) отображаются значения свойств, переданные как параметры одному из методов класса air.Introspector.Console. Дополнительные сведения см. в разделе «
Проверка объекта на вкладке Console (Консоль)
».
-
Чтобы очистить консоль, щелкните текст правой кнопкой мыши и выберите Clear Console (Очистить консоль).
-
Чтобы сохранить текст из вкладки Console (Консоль) в файл, щелкните вкладку Console (Консоль) правой кнопкой мыши и выберите Save Console To File (Сохранить консоль в файл).
-
Чтобы сохранить текст из вкладки Console (Консоль) в буфер обмена, щелкните вкладку Console (Консоль) правой кнопкой мыши и выберите Save Console To Clipboard (Сохранить консоль в буфер обмена). Чтобы скопировать в буфер обмена только выделенный текст, щелкните текст правой кнопкой мыши и выберите команду «Копировать».
-
Чтобы сохранить текст из класса Console в файл, щелкните вкладку Console (Консоль) правой кнопкой мыши и выберите Save Console To File (Сохранить консоль в файл).
-
Чтобы выполнить поиск соответствующего критерию текста, отображаемого на вкладке, нажмите CTRL+F в Windows или Command+F в Mac OS. (Узлы дерева, которые не отображаются, не доступны для поиска.)
Вкладка 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 (Источник) содержит три раздела:
-
Фактический источник: показывается исходный HTML-код страницы, загруженной в качестве основного содержимого при запуске приложения.
-
Разобранный источник: показывается текущая разметка, образующая интерфейс пользователя приложения, которая может отличаться от фактического источника, поскольку в ходе работы приложение создает код разметки, используя технологии Ajax.
-
Файлы приложения: отображается список файлов в каталоге приложения. Этот список доступен только для AIR Introspector, если он запущен из содержимого в изолированной программной среде приложения. В этом разделе можно просматривать содержимое текстовых файлов или изображения.
Нажмите кнопку 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 с таким содержимым, но соблюдая следующие правила:
-
Файл AIRIntrospector.js должен быть включен в содержимое, находящееся как в изолированной программной среде приложения, так и вне ее(iframe).
-
Не переопределяйте свойство
parentSandboxBridge
; оно используется кодом AIR Introspector. Добавьте необходимые свойства. Вместо того, чтобы писать следующий код:
parentSandboxBridge = mytrace: function(str) {runtime.trace(str)}} ;
Используйте следующий синтаксис:
parentSandboxBridge.mytrace = function(str) {runtime.trace(str)};
-
Из содержимого, находящегося вне изолированной программной среды приложения, нельзя открыть AIR Introspector нажатием клавиши F12 или вызовом одного из методов класса air.Introspector.Console. Можно открыть окно Introspector только нажатием кнопки Open Introspector (Открыть Introspector). Эта кнопка по умолчанию добавляется в правый верхний угол объекта iframe или frame. (Из-за ограничений безопасности, связанных с использованием содержимого вне изолированной программной среды приложения, новое окно может быть открыто только в результате действия пользователя, например нажатия кнопки.)
-
Можно открыть отдельные окна AIR Introspector для содержимого, находящегося в изолированной программной среде приложения и вне его. Различать эти окна AIR Introspector можно по их заголовкам.
-
На вкладке Source (Источник) файлы приложения не отображаются, если AIR Introspector запущен из содержимого, находящегося вне изолированной программной среды приложения
-
AIR Introspector может просматривать только тот код в изолированной программной среде приложения, из которого он был запущен.
|
|
|
