Отладка web-приложений в IE8

    Пока я работал над материалом о сравнении двух браузеров IE8 и Firefox как имеющих в себе средства разработки, то нашел не случайно подробный анализ этой темы выполненный В.А. Рябовым в курсе лекций  "Современные веб-технологии". Поэтому не буду сейчас ничего выдумывать, а просто дам Вам выдержку из 19-й лекции. Как говорится - без купюр.

19.2. Отладка Веб-приложений

   Отладка – этап разработки компьютерной программы, на котором обнаруживают, локализуют и устраняют ошибки. Чтобы понять, где возникла ошибка, приходится:

• узнавать текущие значения переменных;

• и выяснять, по какому пути выполнялась программа.

   Существуют две взаимодополняющие технологии отладки.

• Использование отладчиков – программ, которые включают в себя пользовательский интерфейс для пошагового выполнения программы: оператор за оператором, функция за функцией, с остановками на некоторых строках исходного кода или при достижении определённого условия.

• Вывод текущего состояния программы с помощью расположенных в критических точках программы операторов вывода – на экран, принтер, громкоговоритель или в файл. Вывод отладочных сведений в файл называется журналированием.

   Современный процесс веб-разработки включает не только работу с HTML, но и отладку сценариев, и проверку оформления страниц. По этой причине все основные браузеры, под которые производится верстка и оптимизация большинства страниц, включает в себя специальные средства для веб-мастеров.

   В JavaScript доступ к отладчикам становится особенно полезным при разработке крупных нетривиальных программ из-за различий в реализациях разных браузеров (в частности, в отношении объектной модели документа). Полезно иметь доступ к отладчику для каждого из браузеров, в которых будет работать веб-приложение.

   Профилирование – сбор характеристик работы программы, таких как время выполнения отдельных фрагментов (обычно подпрограмм), число верно предсказанных условных переходов, число кэш промахов и т. д. Инструмент, используемый для анализа работы, называют профилировщиком. Обычно выполняется совместно с оптимизацией программы.

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

   Это часто используется, чтобы определить, как долго выполняются определенные части программы, как часто они выполняются, или генерировать граф вызовов (Call Graph). Обычно эта информация используется, чтобы идентифицировать те участки программы, которые работают больше всего. Эти трудоёмкие участки могут быть оптимизированы, чтобы выполняться быстрее. Это – также общая методика для отладки.

Также выделяют анализ покрытия (Code Coverage) – процесс выявления неиспользуемых участков кода при помощи, например, многократного запуска программы.

   Internet Explorer имеет три отладчика: Microsoft Visual Studio – самый полный из них, следом за ним следует Microsoft Script Editor (компонент Microsoft Office), и, наконец, свободный Microsoft Script Debugger, который гораздо более простой, чем два других. Бесплатный Microsoft Visual Web Developer Express предоставляет ограниченную версию с отладочной функцией JavaScript в Microsoft Visual Studio. В восьмой версии в IE вместе с инструментами для разработчиков появился встроенный отладчик.

   Разрабатываемые веб-приложения в Firefox можно отлаживать при помощи расширений Firebug.

В табл. 19.2 приведено сравнение средств отладки кода страниц разными браузерами.

Таблица 19.2. Сравнение средств отладки кода страниц разными браузерами
Браузер/функция	IE8	Firefox (Firebug)	Opera	Safari	Chrome
Подсветка синтаксиса HTML	есть	есть	есть	есть	есть
Свертывание кода	есть	есть	есть	есть	есть
Правка HTML	есть	есть	нет	нет	нет
Валидатор HTML-кода	есть (*)	нет	нет	нет	нет
Очистка кэша	есть	нет	нет	нет	нет
Выделение/подсветка всех вхождений кода	есть	есть	есть	есть	есть
Вьювер/редактор CSS	есть	есть	есть	есть	есть
Подсветка синтаксиса CSS	есть	есть	нет	нет	нет
Отключение стилей CSS	есть	есть	нет	нет	нет
Создание новых стилей CSS	есть	есть	нет	нет	нет
Валидатор CSS	есть (*)	нет	нет	нет	нет
Подсветка JavaScript	есть	нет	есть	есть	нет
Отладчик JavaScript	есть	есть	есть	есть	нет
Точки остановки выполнения скрипта	есть	есть	есть	есть	нет
Ручное пошаговое выполнение скрипта	есть	есть	есть	есть	нет
Профили JavaScript	есть	есть	нет	есть	нет
Выполнение JavaScript	есть	есть	есть	есть	есть
Стек вызовов	есть	есть	есть	есть	нет
Местные переменные	есть	есть	нет	есть	нет
Отслеживание переменных	есть	есть	есть	нет	нет
Вьювер для веб-сервиса	нет	есть	нет	нет	нет
Переключение режимов совместимости браузера	есть	нет	нет	нет	нет
Парковка к границам окна	есть	есть	есть	есть	есть
Палитра цветов	есть	есть(*)	нет	нет	нет
Вкладки	нет	есть	нет	нет	нет
Скорость загрузки страницы (Yslow)	нет	есть	нет	нет	нет

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

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

   Инструменты для разработчика – 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 в области свойств справа появятся более подробные сведения о выбранном элементе:

• Стиль. Команда "Стиль" повышает эффективность отладки CSS, предоставляя список всех правил, применяющихся к выбранному элементу. Правила отображаются в порядке следования. Правила, применяющиеся в последнюю очередь, отображаются в нижней части списка; свойства, которые далее заменяются другими, перечеркиваются; благодаря этому можно лучше понять, каким образом правила CSS влияют на текущий элемент, без сопоставления селекторов вручную. Можно быстро включать и отключать правила CSS, устанавливая или снимая флажок рядом с правилом. Изменения будут сразу же отображаться на странице.

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

• Раскладка. Команда "Раскладка" предоставляет сведения о макете модели, такие как смещение элементов, их высота и заполнение. Эту команду следует применять при отладке расположения элементов.

• Атрибуты. Команда "Атрибуты" дает возможность исследовать все определенные атрибуты выбранного элемента. С помощью этой команды также можно изменять, добавлять и удалять атрибуты выбранного элемента.

После загрузки DOM-структуры сайта пользователь увидит древовидный список структуры тегов на левой панели. Справа же отображаются связанные с ними, соответственно, стили и атрибуты CSS. Например, при выборе в странице тега

можно увидеть связанные с таблицей классы 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, а не с кодом исходного сайта. Чтобы избежать случайной перезаписи кода, выходные данные сохраняются в виде текста, а в начало файла добавляется комментарий.

19.2.2.3. Отладка JavaScript

Отладка JScript – это важнейший этап в разработке веб-приложений. Благодаря интуитивно понятному упрощенному отладчику JScript средства разработчика позволяют существенно упростить весь процесс отладки JScript. Установив Internet Explorer 8, разработчики могут отлаживать JScript на любом сайте, загруженном в Internet Explorer (рис. 19.7).

Developer Tools может использоваться также и как отладчик JavaScript. Для его запуска нужно перейти во вкладку "Сценарий" (Script) и нажать на кнопку Start Debugging. В результате произойдет перезагрузка текущей страницы в открытой вкладке (если в настройках браузера запрещена отладка скриптов), а Developer Tools "открепятся" от нижней части экрана. Остановка процесса отладки производится по нажатию на клавиатурное сочетание Shift+F5 или нажав на кнопку Stop Debugging.

Рис. 19.7. Отладка в Developer Tools

   Консоль JavaScript-кода может отслеживать вызов тех или иных переменных, выражений и стеков вызовов.

   В ходе процесса возможна установка контрольных точек автоматической остановки выполнения – для этого нужно выделить нужное место в коде скрипта, после чего нажать на кнопку F9. Есть также и запуск отладчика с пропуском ошибок исполнения (во избежание остановок) – для этого можно или щелкнуть по кнопке "Остановка при ошибке" или же продублировать это действие командой Ctrl+Shift+E. Кроме того, в случае, если установленная контрольная точка становится неактуальной (код на странице поменялся, указан неправильный путь до сценария и так далее), то в отладчике можно задать условия, при которых будет выполняться остановка (устанавливается в свойствах точки остановки). Наконец, в случае, когда выполнение сценария приостановлено, пользователь может вручную продолжить работу отладчика (кнопка F5), остановить процесс (Ctrl+Shift+B), перейти на следующий этап (F11) или предыдущий шаг (F10), повторить последний цикл скрипта до текущего состояния (Shift+F11).

   Любая ошибка во время выполнения приводит к тому, что отладчик автоматически останавливается в месте возникновения ошибки [30]. Windows Internet Explorer остановится и выделит строку, вызвавшую ошибку, в окне просмотра исходного кода.

   Примечание. Пока Windows Internet Explorer ожидает ввода от отладчика сценариев, он не отвечает ни на какие воздействия пользователя.

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

  На вкладке Breakpoints изображен список всех доступных точек останова. На рис. 19.8 показана вкладка Breakpoints, выбранная в правой части панели отладчика.

Рис. 19.8. Вкладка "Точки останова" в Developer Tools

   Все точки останова вместе с именами файлов и номерами строк представлены здесь. Дважды щелкнув точку останова в этом списке, можно перейти к исходному коду, в котором она установлена. Сняв флажок рядом с точкой останова, ее можно временно деактивировать, не удаляя из исходного кода. Чтобы удалить точку останова, щелкните ее правой кнопкой мыши и выберите Delete (Удалить).

   Примечание. Даже если перейти со страницы текущего веб-узла, Windows Internet Explorer сохранит информацию о точках останова до тех пор, пока не будут закрыты средства разработчика.

   Консоль JavaScript-кода может отслеживать вызов тех или иных переменных, выражений и стеков вызовов. Все полученные результаты могут протоколироваться. Еще одна полезная для веб-разработчика функция в Developer Tools связана с измерением производительности JavaScript на страницах. Под страницу могут создаваться специальные профили, которые показывают, какое количество времени было затрачено на исполнение того или иного сценария, а также число вызовов его при открытии страницы. Соответственно, под каждый сеанс будут создавать соответствующие отчеты, которые можно экспортировать в CSV-файл. Помимо этого, профили можно сохранять для сравнения между разными версиями кода.

  В любой момент, когда исполнение сценария приостановлено точкой останова, можно просмотреть значения переменных. С помощью средства Locals отладчика можно вывести имена, значения и типы всех переменных, существующих в текущей области видимости сценария. Значения переменных вне области видимости не определены. Область видимости – это интервал, в котором можно обращаться к некоторой переменной. На рис. 19.9 показан вид средства Locals во время отладки.

Рис. 19.9. Средства "Локальные" в Developer Tools

С помощью средства Watch можно просматривать переменные из разных областей видимости. Чтобы включить просмотр переменной, нужно найти ее в исходном тексте сценария, щелкнуть правой кнопкой мыши и выбрать Add Watch. Таким образом, будет добавлена точка наблюдения для идентификатора, на котором находился курсор. На рис. 19.10 изображено средство Watch с наблюдаемой переменной.

Рис. 19.10. Средства "Смотреть" в Developer Tools

Еще один способ добавить точку наблюдения переменной – щелкнуть текст "Click to add…" в окне Watch и ввести имя переменной.

Заметим, что функция профилирования JavaScript добавляет к функциональности отладчика возможность оптимизации кода. Иными словами, Developer Tools содержат инструмент, позволяющий выявить "узкие места" в веб-приложениях – обычно это наиболее часто используемые скрипты. Для этого вебмастеру необходимо инициировать процесс профилирования, чтобы увидеть скорость обработки сценариев. Результат будет представлен в виде списка последовательных вызовов скрипта или отдельных его функций. Чтобы увидеть URL, который относится к данному фрагменту и строку на странице, в IE8 должен быть включен отладчик сценариев.

19.2.2.4. Профилирование JavaScript

   Благодаря профилированию сценариев можно улучшить работу веб-сайта посредством идентификации и исправления связанных с производительностью проблем в коде JavaScript (JScript).

   Режим Profiler позволяет собрать информацию о временных характеристиках работы веб-узла, которая собирается по мере визуализации страниц веб-узла обозревателем Windows Internet Explorer. Данная информация помогает оптимизировать участки кода, на исполнение которых уходит слишком много времени, то есть узкие места.

   На вкладке "Профили" начните сеанс профилирования сценария нажатием кнопки "Запуск создания профилей". При этом обработчик сценариев переключается в режим профилирования, и на кнопке появляется текст "Остановка создания профилей". Выполните сценарий, который хотите профилировать на веб-странице. Щелкните "Остановка создания профилей" для завершения сеанса. Автоматически отображается отчет о только что созданном профиле.

На рис. 19.11 показан основной пользовательский интерфейс вкладки "Профили".

Рис. 19.11. Вкладка "Профили" в Developer Tools

   Отчеты о профилях можно просматривать в представлении "Функции" или "Дерево вызовов", которое можно выбрать из раскрывающегося списка "Текущее представление".

• В представлении "Функции" перечисляются все используемые функции.

• В представлении "Дерево вызовов" показана иерархия вызовов.

В отчете показаны функции, использовавшиеся обозревателем Windows Internet Explorer для визуализации URL-адреса. Выводится название функции, число ее вызовов, включительное и исключительное время. Включительное время – это время, затраченное на исполнение самой функции и всех функций, из нее вызванных. Исключительное время – это время, затраченное на исполнение самой функции без учета функций, из нее вызванных.

С помощью собранной профилировщиком информации легко найти узкие места в коде вашего веб-узла. Если обнаружить и изменить структуру неэффективного кода или медленных алгоритмов, то можно сократить время, которое обозреватель Windows Internet Explorer тратит на визуализацию веб-страниц.

Данные профиля можно экспортировать из текущего отчета в CSV-файл.

19.2.2.5. Другие возможности Developer Tools

   При создании средств разработчика в IE8 Microsoft учла современные требования к подобным инструментам. В частности, особое внимание было уделено к юзабилити решения. Так, в Developer Tools поддерживается полнотекстовый поиск фрагментов HTML (окно поиска расположено в верхнем правом углу окна), а также быстрый поиск всех вхождений тега на основе совместимых с W3C-стандартами селекторов (например, "@table"). Просмотр с помощью Developer Tools включен в контекстное меню IE8. В Developer Tools модули подгружаются по мере необходимости и под конкретную страницу, не затрагивая производительность IE8 на других открытых вкладках.

   Среди прочих возможностей Developer Tools есть расширенные инструменты работы с рисунками (показ путей, размеров, отчетов об изображениях, блокировка их на странице), ссылками на странице (генерация отчета обо всех внешних и внутренних гиперссылках с их атрибутами), кэшем браузера (просмотр и удаление cookies сайта или страницы, политика обновления кэша обозревателя для страницы или всего домена), а также полезные для верстальщика линейка масштаба, палитра цветов и подгонка страницы по определенное разрешение (есть предустановки под стандартные 800*600 и 1024*768 пикселей и возможность задать свой произвольный размер). Кроме того, рядом расположен переключатель отображения веб-документа под разные версии IE – режим совместимости с IE7/IE8, а также более старшими билдами браузера.

   Developer Tools являются удобным и эффективным инструментом для решения повседневных задач веб-мастера. В отличие от плагинов, которые загружают дополнительно не без того ресурсоемкий процесс любого браузера (этим особенно отличаются браузеры на движке Gecko, работающие под Windows), решение от Microsoft выглядит достойной и современной альтернативой.