Статическое содержимое
3.6. Отладка: Инспектор DOM
Инспектор DOM - это инструмент, поставляемый вместе с классическим браузером. Его можно непосредственно использовать как средство диагностики и как средство обучения. Далее мы рассмотрим, как это делается. Функциональность этой программы вы можете исследовать самостоятельно.
Чтобы запустить Инспектор, нужно выбрать Инструменты | web-разработка | Инспектор DOM в окне Навигатора. В открывшемся окне программы следует выбрать Файл | Исследовать окно, а затем - любое окно из списка, кроме того, что называется "Инспектор DOM". Его не стоит выбирать, потому что наблюдать за процессом исследования окна в нем же самом не очень удобно. После выбора окна для анализа в левой и правой частях окна Инспектора появится некоторая информация. Следует выбрать в окне Инспектора Правка | Настройки... и убедиться, что флажок "Подсвечивать выбранный элемент" установлен, а значение "Длительность подсветки" - не меньше 2500 миллисекунд (для новичков).
Пользоваться большей частью команд из меню Инспектора очень просто. Самые важные кнопки, на которые приходится будете часто нажимать, - две маленькие пиктограммы, каждая из которых находится в верхней части одной из больших панелей Инспектора. Рисунок на них напоминает пиктограммы окон в Windows Explorer в режиме отображения маленьких значков. Щелкнув по этим пиктограммам, можно открыть выпадающие меню. Из левого меню нужно выбрать Узлы DOM, а из правого - Вычисляемые стили. Теперь мы готовы исследовать содержимое любого окна Mozilla. Последовательность настройки показана на рисунке 3.6. Интересующие нас элементы управления обведены кружочками.
На панели слева показана полная иерархия элементов 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. В следующей лекции речь пойдет о том, как добавлять наиболее часто используемый элемент управления, кнопку. Также в "Первые элементы управления и темы" , "Первые элементы управления и темы", мы попробуем улучшить внешний вид нашего приложения.