Статическое содержимое

3.6. Отладка: Инспектор DOM

Инспектор DOM - это инструмент, поставляемый вместе с классическим браузером. Его можно непосредственно использовать как средство диагностики и как средство обучения. Далее мы рассмотрим, как это делается. Функциональность этой программы вы можете исследовать самостоятельно.

Чтобы запустить Инспектор, нужно выбрать Инструменты | web-разработка | Инспектор DOM в окне Навигатора. В открывшемся окне программы следует выбрать Файл | Исследовать окно, а затем - любое окно из списка, кроме того, что называется "Инспектор DOM". Его не стоит выбирать, потому что наблюдать за процессом исследования окна в нем же самом не очень удобно. После выбора окна для анализа в левой и правой частях окна Инспектора появится некоторая информация. Следует выбрать в окне Инспектора Правка | Настройки... и убедиться, что флажок "Подсвечивать выбранный элемент" установлен, а значение "Длительность подсветки" - не меньше 2500 миллисекунд (для новичков).

Пользоваться большей частью команд из меню Инспектора очень просто. Самые важные кнопки, на которые приходится будете часто нажимать, - две маленькие пиктограммы, каждая из которых находится в верхней части одной из больших панелей Инспектора. Рисунок на них напоминает пиктограммы окон в Windows Explorer в режиме отображения маленьких значков. Щелкнув по этим пиктограммам, можно открыть выпадающие меню. Из левого меню нужно выбрать Узлы DOM, а из правого - Вычисляемые стили. Теперь мы готовы исследовать содержимое любого окна Mozilla. Последовательность настройки показана на рисунке 3.6. Интересующие нас элементы управления обведены кружочками.

Рис. 3.6. Разбор окна Навигатора, отображающего HTML, в Инспекторе DOM

На панели слева показана полная иерархия элементов XML, составляющих окно Mozilla, в виде дерева. Так как все окна Mozilla написаны на XUL, это иерархия XUL-тегов. В некоторых окнах, например окнах Навигатора, есть и HTML-теги. Можно проходить по дереву вглубь, просто выбирая нужные ветки, или щелчком выделить один нужный тег. Выделив тег, мы видим, что соответствующий ему графический объект в его окне подсвечивается красным. Если тег невидим, тогда мигает только линия, вертикальная или горизонтальная. Панель слева обычно делится на три колонки: nodeName, id и class. Можно добавлять и другие колонки, щелкнув по кнопке выбора колонок справа вверху.

На панели справа отображается один из специализированных наборов данных о выделенных тегах из левой панели. Здесь также можно выбирать колонки для отображения. Например, выбрав панель Вычисляемые стили, мы увидим стили выбранного тега после применения всех правил CSS 2 и наследования. Это действительные стили тега - то, как он выглядит на экране.

Кружки на снимке окна показывают те элементы управления Инспектором DOM, которые наиболее интересны для нас. Обнаружив в Microsoft Windows кнопку Capture, не нажимайте на нее, иначе рискуете "подвесить" платформу прежде, чем закончите работу.

Самая простая цель использования Инспектора DOM - сделать его инструментом диагностики. Он поможет понять сложные XUL-документы, показывая их в работе. Представление документа в виде дерева подсветка границ объектов красным облегчает понимание того, какой визуальный элемент соответствует выбранному тегу в дереве. Это поможет лучше понять, как устроен ваш XUL-документ. Глядя на колонки классов и идентификаторов, вы сразу же увидите, применились ли стили к нужным тегам.

Другое очевидное применение Инспектора – обучение. Вы сможете подробно разобрать все XUL-приложения, составляющие классический браузер, да и вообще любой продукт на основе Mozilla. Так можно многое узнать о том, как программисты Mozilla создавали стандартное наполнение chrome. И станет очевидно, что структура классического браузера вовсе не так сложна и непонятна. Большая часть Mozilla - просто XUL-документы и другие сопутствующие технологии. С помощью Инспектора можно исследовать все, включая окна предупреждений и окно настроек. На рисунке 3.6 показан разбор окна классического браузера в Инспекторе DOM. На снимке экрана показано и XUL-окно, и открытая в нем HTML-страница.

3.7. Итоги

Самое простое, что можно сделать с помощью XUL - отображать статические текст и изображения. Добавлять такие данные очень легко. Тег <description> предоставляет полезную возможность переноса строк текста, но обычно он используется для отображения небольших частей текста. Использование изображений и стилей в XUL очень похоже на их применение в HTML. И в XUL, и в HTML можно использовать расширения Mozilla по отображению границ, кроме того, в Mozilla есть и другие расширения стилей, причем некоторые из них предназначены только для содержательных тегов, а некоторые - для тегов, определяющих визуальную структуру документа.

XUL без графических элементов управления вряд ли более полезен, чем HTML. В следующей лекции речь пойдет о том, как добавлять наиболее часто используемый элемент управления, кнопку. Также в "Первые элементы управления и темы" , "Первые элементы управления и темы", мы попробуем улучшить внешний вид нашего приложения.