Основы тестирования и отладки Веб-приложений

19.2.2. Отладка и профилирование в Internet Explorer 8

Рассмотрим, какие же возможности предоставляет IE8, и сравним их с реализацией в других популярных веб-браузерах [29].

Инструменты для разработчика – Developer Tools – требуются для быстрой проверки кода страницы на его валидность (соответствие веб-стандартам, отсутствие ошибок в синтаксисе), а также для отладки различных сценариев (в основном, из-за распространения AJAX в современном сайтостроительстве это отладка JavaScript) и отображения стилей (CSS, отдельные цвета, шрифты и графика). При этом важно, чтобы данные инструменты были встроены в сам браузер, а не представляли собой отдельное приложение. В IE длительное время не было подобного инструмента, пока в 2007 году не появился отдельный тулбар для разработчиков (IE Developer Toolbar). С его помощью можно было разбирать код страницы (DOM), "на лету" проверять корректность HTML, CSS, RSS, включать отображение линеек масштаба для последующей верстки страниц и многое другое. Кроме этого тулбара, под IE были выпущены еще ряд инструментов – инспектор кода IEWatch, отладчики DebugBar и Fiddler, средства для работы со скриптовыми технологиями Ajaxview и Visual Web Developer Express. Однако в большинстве своем это были решения от сторонних разработчиков браузера, а фирменная панель IE Developer Toolbar иногда замедляла быстродействие браузера.

19.2.2.1. Состав Developer Tools

Запуск встроенного в IE8 инструмента веб-разработки осуществляется или через меню (Сервис – Средства разработчика), или с помощью горячей клавиши F12. В отдельном окне откроется двухпанельный редактор. В левой части будет отображаться DOM-структура сайта (секции head, body), а справа – расширенное содержание выбранного фрагмента кода. Developer Tools поддерживает работу по инспекции и отладке HTML, CSS, JavaScript, а также просмотр cookies и кэша браузера (рис. 19.1).

увеличить изображение
Рис. 19.1. Developer Tools в Internet Explorer 8.0

Пользователь может вносить изменения в код или атрибуты элементов в режиме реального времени (WYSWYG), одновременно наблюдая результат на странице. Также можно открывать элементы только для чтения. Полученные в ходе редактирования веб-документы можно сохранять на локальном диске компьютера.

Developer Tools открываются под каждую открытую в IE8 страницу, поэтому, чтобы не загромождать экран окнами средств разработчика, их можно закреплять (команда Ctrl+P или нажатие на пиктограмму под кнопкой закрытия окна). В этом случае окно будет располагаться во вкладке редактируемой страницы в виде панели (рис. 19.2).

увеличить изображение
Рис. 19.2. Панель Developer Tools в Internet Explorer 8.0

Работа с инструментом строится по классической схеме – пользователю нужно выделить фрагмент страницы или участок ее кода, который автоматически будет подсвечен согласно правилам синтаксиса HTML/CSS. Внесение изменений осуществляется простой правкой кода или установкой других значений атрибутов, после чего требуется нажать клавишу Enter. Отмена всех изменений производится или обновлением страницы, или нажатием на кнопку ESC, если требуется отменять правки по частям.

19.2.2.2. Отладка HTML и CSS

С помощью средств разработки можно проверять код HTML и каскадные таблицы стилей сайта в том виде, в котором они обрабатываются браузером Internet Explorer, а не в исходном виде. Это особенно удобно в случае с динамическими сайтами, сложными сайтами и сайтами, где применяются платформы ASP или PHP.

В основной области содержимого используется дерево документо-объектной модели (DOM) сайта, соответствующее структуре, содержащейся в памяти браузера Internet Explorer для отображения сайта. Для перемещения по дереву можно использовать мышь или клавиатуру. Самый быстрый способ найти узел, соответствующий определенному элементу страницы, – использовать функцию "Выбрать элемент щелчком". Используйте эту функцию, чтобы выбрать элемент на странице, и в средствах разработки будет автоматически выбран нужный узел дерева. Также можно использовать поле поиска.

После выбора элемента в дереве DOM в области свойств справа появятся более подробные сведения о выбранном элементе [30]:

• Стиль. Команда "Стиль" повышает эффективность отладки CSS, предоставляя список всех правил, применяющихся к выбранному элементу. Правила отображаются в порядке следования. Правила, применяющиеся в последнюю очередь, отображаются в нижней части списка; свойства, которые далее заменяются другими, перечеркиваются; благодаря этому можно лучше понять, каким образом правила CSS влияют на текущий элемент, без сопоставления селекторов вручную. Можно быстро включать и отключать правила CSS, устанавливая или снимая флажок рядом с правилом. Изменения будут сразу же отображаться на странице.
• Отслеживать стили. Эта команда содержит такие же сведения, что и команда "Стиль", но в данном случае стили группируются по свойствам. Если нужно найти сведения о каком-либо свойстве, используйте команду "Трассировка стиля". Нужно всего лишь найти нужное свойство, щелкнуть значок плюса (+), и на экране появится список всех правил, устанавливающих данное свойство. Правила перечисляются в порядке следования.
• Раскладка. Команда "Раскладка" предоставляет сведения о макете модели, такие как смещение элементов, их высота и заполнение. Эту команду следует применять при отладке расположения элементов.
• Атрибуты. Команда "Атрибуты" дает возможность исследовать все определенные атрибуты выбранного элемента. С помощью этой команды также можно изменять, добавлять и удалять атрибуты выбранного элемента.

После загрузки DOM-структуры сайта пользователь увидит древовидный список структуры тегов на левой панели. Справа же отображаются связанные с ними, соответственно, стили и атрибуты CSS. Например, при выборе в странице тега <div> можно увидеть связанные с таблицей классы CSS и отследить вызываемые параметры цветов, шрифтов, полей, отступов и так далее. Здесь же в разделе "Раскладка" (Layout) будет показано расположение этого элемента на площади страницы с указанием размеров в пикселях и пропорций. Естественно, его можно изменять непосредственно на этой вкладке. В атрибутах отображается список всех зависимостей HTML-кода на странице; к ним можно добавлять собственные из выпадающего списка (рис. 19.3).

увеличить изображение
Рис. 19.3. Атрибуты в Developer Tools

Помимо отображения в рамках Developer Tools, расположение HTML-элементов можно увидеть и на самой оригинальной странице. Для этого следует указать в меню "Как векторные" (Outline) показ соответствующих фрагментов – ячеек таблицы, таблиц, элементов DIV-верстки, границ рисунков в относительных, абсолютных, постоянных и перемещенных границах. В результате на странице они будут размечены тонкими зелеными линиями.

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

увеличить изображение
Рис. 19.4. Результаты выбора элемента в Developer Tools

Developer Tools позволяет настраивать каскадные стили в режиме реального времени

Пользователь в одноименной вкладке выбирает нужный шаблон, описывающий оформление страницы, после чего в левой части окна появляется иерархический список всех атрибутов. Отключение/включение производится простой установкой или снятием галочки на соответствующем пункте. Заметим, что, если на странице вызываются несколько шаблонов CSS, то в списке на первом месте по умолчанию появится тот, который подгружается самым первым.

С помощью вкладки CSS можно понять взаимодействие между таблицами стилей. Она в большей степени полезна для сайтов, на которых используется несколько таблиц стилей. Для переключения между таблицами стилей используйте кнопку выбора таблиц стилей. При выборе таблицы стилей правила и связанные с ними свойства стилей появляются в основной области содержимого. Эта информация сгруппирована по правилам стилей. По умолчанию на этой кнопке отображается первая таблица стилей, на которую ссылается веб-страница. Как показано на рис. 19.5, правила таблиц стилей отображаются под кнопкой выбора таблиц стилей.

увеличить изображение
Рис. 19.5. Вкладка CSS в Developer Tools

С помощью средства Layout можно вывести следующие значения:

• Значения смещений, то есть расстояния между выбранным элементом и его родительскими элементами. Смещения представлены свойствами offsetLeft и offsetTop.
• Значения величин Margin, Border и Padding, которые соответствуют значениям, установленным на веб-странице. Если в исходном коде веб-страницы значения для этих величин не указаны, используются значения по умолчанию Windows Internet Explorer.
• Глубже других внутри находятся высота и ширина элемента, которые определяются свойствами offsetHeight и offsetWidth.

Для каждого атрибута рамочной модели указаны его величина и единица измерения. По умолчанию значения атрибутов рамочной модели указываются в точках; если единица измерения средством "Layout" не показана, значит, величина задана в точках. На рис. 19.6 изображено средство "Layout" вместе с выбранным на панели HTML (слева) элементом.

увеличить изображение
Рис. 19.6. Раскладка в Developer Tools

Все изменения, внесенные с помощью средств разработчика, применяются только к внутреннему представлению сайта в браузере Internet Explorer. При обновлении страницы или при переходе на другую страницу вновь откроется исходный сайт. Однако в некоторых случаях может потребоваться сохранить изменения. На вкладках "HTML" и "CSS" нажмите кнопку "Сохранить" для сохранения текущего HTML- или, соответственно, CSS-кода в файл. Помните, что отличия от исходного кода могут быть не только в измененных вами фрагментах, но и в других частях, поскольку в средствах разработчика сайт отображается в соответствии с кодом в Internet Explorer, а не с кодом исходного сайта. Чтобы избежать случайной перезаписи кода, выходные данные сохраняются в виде текста, а в начало файла добавляется комментарий.