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 иногда замедляла быстродействие браузера.

Cредства отладки кода страниц

 

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

* - поддерживается на стороннем веб-сервисе

Конкуренты в лице коммьюнити, разрабатывающего Firefox, в этот период времени выпустили специальный плагин Firebug, ставший популярным в то время инструментом для веб-дизайнера; последовательно улучшались и Dragonfly (средство веб-разработки в Opera Browser), и Drocery (для Safari). Однако уже в бета-версию IE8 разработчики поместили переработанный в сторону улучшения инструмент веб-отладки Developer Tools, который остался и в финальной версии браузера.

Состав Developer Tools

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

Developer Tools поддерживает работу по инспекции и отладке HTML, CSS, JavaScript, а также просмотр cookies и кеша браузера.

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

Developer Tools можно "прикреплять" к инспектируемой странице

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

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

Инспектируем HTML и CSS

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

Помимо отображения в рамках Developer Tools, расположение HTML-элементов можно увидеть и на самой оригинальной странице

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

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

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

Отлаживаем сценарии

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

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

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

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

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

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

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

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

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