Internet Explorer 11 в Windows 8.1 и Windows 7 поставляется с полностью переработанным и усовершенствованным набором средств разработчика, встроенных в браузер, помогающих разработчикам создавать, диагностировать и оптимизировать работу современных веб-сайтов и приложений на многих устройствах. Новые средства, которые мы ради краткости называем просто F12, позволяют веб-разработчикам работать быстро и эффективно.

Рабочие группы Visual Studio и Internet Explorer работали совместно, чтобы создать средства F12, в основу которых заложен принцип помочь разработчикам быстро переходить от проблемы к решению с использованием значимых данных. Новый набор F12 обеспечивает быстрое и гибкое взаимодействие с Интернетом с помощью средств для диагностики и исправления проблем производительности, а также средств, которые помогут вам глубже понять, как Internet Explorer выполняет разметку и отрисовку веб-приложений. Средства F12 поддерживает быстрый интерактивный рабочий процесс, используемый современными веб-разработчиками.

Универсальный набор средств

Новый набор F12 помогает разработчикам быстро переходить от проблемы к решению. Среди новых впечатляющих возможностей можно отметить следующие:

• Средства анализа отклика пользовательского интерфейса и профилирования памяти, помогающие разработчикам создавать быстрые и гибкие веб-приложения.
• Live DOM Explorer и средство проверки CSS, обновляемые вместе со страницей, чтобы разработчики могли в интерактивном режиме исследовать, как динамический контент влияет на разметку и стили
• Возможность отладки JavaScript, быстро запускаемой без обновления страницы, чтобы разработчики могли быстрее приступить к работе

По мере использования средств F12 вы заметите и многие другие усовершенствования, которые помогут вам обеспечить быстрый интерактивный рабочий процесс:

• Быстрый доступ к этим средствам посредством щелчка правой кнопкой мыши пункта меню с помощью "элемента проверки"
• Эффективное взаимодействие с клавиатурой
• Широкие возможности копирования элементов и компонентов из инструментальных средств, благодаря чему их можно вставлять в любой редактор без дополнительного форматирования

Самое главное при этом состоит в том, что эти средства теперь отображают наиболее полную и точную информацию - от правил @media и!important в DOM Explorer до поэлементной структуры затрат в профилировщике отклика пользовательского интерфейса. Эти инструментальные средства также предоставляют непосредственно значимые данные; например, профилировщик памяти определяет узлы DOM, которые являются "живыми", но на которые нет ссылок из разметки или дерева отрисовки.

Возможности нового набора F12 представлены и в Visual Studio, поэтому разработчикам обеспечен согласованный и непрерывный опыт работы со всеми нашими инструментами и платформами веб-разработки.

Давайте теперь коротко рассмотрим эти инструменты в действии.

Профилирование приложений с помощью средства анализа отклика пользовательского интерфейса

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

Профилирование веб-сайта

Анализ использования памяти приложения с помощью профилировщика памяти

Данное средство анализа памяти поможет вам избежать утечек памяти или чрезмерного ее потребления. Создание веб-приложений, которые работают у клиентов в круглосуточном режиме, или же сложных интерактивных приложений часто означает, что их разработчик должен уделять особое внимание вопросам использования памяти.

Хотя JavaScript является средой, в которой осуществляется сбор мусора, приложения обычно потребляют больше памяти просто из-за того, что ссылки на объекты не были (и не могут быть) освобождены. Средство анализа памяти поможет вам выявить эти проблемы, предоставив информацию по каждому объекту на странице, независимо от того, является ли он объектом JavaScript или DOM. С помощью этой информации вы сможете, например, увидеть, сколько памяти удерживается элементом и какие объекты поддерживают его сохранение. Но самое главное, вы можете сравнить два моментальных снимка и увидеть, что изменилось. Это позволит вам понять, почему ваше приложение стало использовать больше памяти, и исправить это положение.

Снимок памяти типа ""куча"", показывающий отключенные элементы DOM

Быстрое понимание особенностей производительности приложения с помощью панели мониторинга производительности

Чтобы помочь вам быстро выявить проблемы, влияющие на производительность работы вашей страницы, в Internet Explorer 11 имеется "настраничный" виджет, называемый панелью мониторинга производительности, доступ к которой осуществляется с помощью сочетания клавиш Ctrl+Shift+U или соответствующего пункта меню "Инструменты" (Alt+T). Эта панель отображает в Internet Explorer в динамическом режиме статистики для основных метрик производительности, таких как время отрисовки, память, количество кадров в секунду (кадров/с) и использование ЦП. Панель мониторинга производительности не требует использования средств F12 и может также использоваться в современных браузерах.

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

Проверка элементов и изменение разметки и стилей с помощью DOM Explorer

DOM Explorer упрощает интерактивный процесс настройки запросов @media и правил CSS и их свойства. Поэтому пользовательский интерфейс вашего приложения становится высокоэффективным средством взаимодействия с несколькими устройствами, обладающим быстрым откликом. Вы можете быстро начать работу на веб-странице, щелкнув правой кнопкой мыши и проверив нужный элемент, что приводит к запуску средств F12 вместе с этим элементом, выбранным в DOM Explorer, с динамическим отображением DOM и примененных правил CSS. Отображаемая модель DOM и таблицы CSS являются динамическими, что позволяет понять, как Internet Explorer интерпретирует особенности вашей разметки, стилей и правил CSS. По мере вашего взаимодействия со страницей или ее изменения с использованием DOM Explorer, вносимые вами изменения будут немедленно отображаться.

Проверка разметки и стилей

DOM Explorer при внесении изменений в таблицу CSS упрощает получение правильного значения свойства или свойств с помощью IntelliSense. Вы сможете легко увидеть, какие свойства являются ошибочными или оказались нераспознанными, и затем копируете правило, чтобы повторно применить его к вашему источнику.

Отладка JavaScript с помощью отладчика и консоли

Новый отладчик JavaScript предоставляет вам средства для определения расположения и быстрого исправления ненадежного кода. Отладчик JavaScript может открыть и просмотреть несколько файлов, даже если ваша библиотека скриптов была минимизирована, задать точки останова и трассировки, проверить объекты JavaScript, значения, цепочки областей и просмотреть содержимое стека. При запуске средств F12 отладчик JavaScript также немедленно запустится, поэтому вы сможете сразу же приступить к работе

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

Подводя итоги

В этой записи блога просто содержится эскиз описания новых элементов в средствах F12. Вы можете найти полный список новых функциональных возможностей, доступных разработчикам в Internet Explorer 11 в статье "Новые возможности средств F12 " и в "руководстве по Internet Explorer 11 Preview для разработчиков ." Вы можете также получить дополнительные сведения в тестовой демонстрации по Internet Explorer, "F12 Adventure ".

С нетерпением ждем ваших отзывов и надеемся на длительное сотрудничество с сообществом разработчиков. Поделитесь вашими предложениями через средство отправки отзывов и предложений в Internet Explorer 11 или на сайте Connect .

П. Дж. Хуг (PJ Hough)
, вице-президент, Visual Studio

Довольно часто пользователи могут наблюдать ситуацию, когда в браузере Internet Explorer (IE) появляется сообщение об ошибке сценария. Если ситуация носит единичный характер, то не стоит беспокоится, но когда подобные ошибки стают регулярными, то стоит задуматься о характере данной проблемы.

Ошибка сценария в Internet Explorer, как правило, вызывается неправильной обработкой браузером кода HTML-страницы, наличием временных интернет-файлов, параметрами учетной записи, а также многими другими причинами, о которых и пойдет речь в данном материале. Также будет рассмотрено методы решения данной проблемы.

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

Блокирование Internet Explorer активных сценариев, ActiveX и Java

Активные сценарии, элементы ActiveX и Java влияют на способ формирования и отображения информации на сайте и могут быть реальной причиной ранее описанной проблемы, если они заблокированы на ПК пользователя. Для того чтобы убедиться, что ошибки сценария возникают именно по этой причине необходимо просто выполнить сброс параметров безопасности браузера. Чтобы это осуществить следуйте следующим рекомендациям.

• Откройте Internet Explorer 11
• Сервис

• В окне перейдите на вкладку Безопасность
• Далее нажмите кнопку По умолчанию , а потом кнопку ОК

Временные файлы Internet Explorer

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

• Откройте Internet Explorer 11
• В верхнем углу браузера (справа) нажмите иконку Сервис в виде шестерни (или комбинацию клавиш Alt+X). Затем в открывшимся меню выберите пункт
• В окне перейдите на вкладку Общие
• В разделе Журнал браузера нажмите кнопку Удалить…

• В окне Удаление истории обзора поставьте флажки возле пунктов Временные файлы Интернета и веб-сайтов , Файлы cookie и данные веб-сайтов , Журнал
• Нажмите кнопку Удалить

Работа антивирусного программного обеспечения

Ошибки сценария возможны через работу антивирусной программы, когда она блокирует активные сценарии, элементы ActiveX и Java на странице или папки для сохранения временных файлов браузера. В таком случае необходимо обратится к документации по установленному антивирусному продукту и отключить сканирование папок для сохранения временных интернет-файлов, а также блокировку интерактивных объектов.

Неправильная обработка кода HTML-страницы

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

• Откройте Internet Explorer 11
• В верхнем углу браузера (справа) нажмите иконку Сервис в виде шестерни (или комбинацию клавиш Alt+X). Затем в открывшимся меню выберите пункт
• В окне перейдите на вкладку Дополнительно
• Далее снимите флажок с пункта Показывать уведомление о каждой ошибке сценария и нажмите кнопку ОК .

Это перечень наиболее частых причин, которые вызывают ошибки сценария в Internet Explorer, поэтому если Вам надоели подобные сообщения, уделите немного внимания и решите проблему раз и навсегда.

Во время работы в интернете браузер Internet Explorer может выдавать сообщения о том, что страница содержит ошибки и может отображаться неправильно. Рассмотрим несколько способов исправления этой проблемы.

Инструкция

Если нет видимых трудностей в работе браузера кроме периодически появляющейся ошибки, можно попробовать отключить отладку скриптов, чтобы сообщение больше не появлялось (если ошибка появляется не на одном, а сразу на нескольких сайтах, перейдите к следующему шагу). В меню «Сервис» откройте пункт «Свойства обозревателя», выберите вкладку «Дополнительно» и отметьте флажком «Запретить отладку сценариев». Если вам нужно отключить оповещение обо всех ошибках, снимите флажок для пункта «Показывать уведомление о каждой ошибке сценария».

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

Возможно, браузер Internet Explorer в момент просмотра страниц не блокирует активные сценарии, Java и ActiveX, которые определяют отображение сведений на странице. Чтобы исправить проблему, необходимо сбросить параметры безопасности браузера. Для этого в меню «Сервис» выберите пункт «Свойства обозревателя» и перейдите на вкладку «Безопасность». Нажмите кнопку «По умолчанию», а затем «ОК». Если после повторного запуска страницы, на которой возникала ошибка, проблема остается, попробуйте следующий способ.

Как известно, браузер хранит временные файлы и копии страниц в отдельной папке, для последующего к ним обращения. Если размеры папки становятся слишком большими, могут возникнуть ошибки при отображении некоторых страниц. Проблему можно решить, периодически очищая папку с временными файлами. Для этого откройте диалоговое окно «Свойства обозревателя» из меню «Сервис». На вкладке «Общие» в группе «История» нажмите кнопку «Удалить». Установите флажки для пунктов «Временные файлы интернета», «Куки-файлы», «Журнал», «Данные веб-форм» и нажмите «ОК».

Есть, конечно, и другие - о них я обязательно упомяну.

Firebug для Firefox

Не знаю точно, является ли FireBug прародителем других средств для разработчиков, но он определенно самый популярный, удобный и функциональный на сегодняшний день в .

Firebug - это дополнение для Firefox, а значит его надо скачать с сайта Firefox add-ons и установить.

Для того, чтобы вызвать файербаг, достаточно нажать F12.

Возможности этого дополнения:

• Инспектирование и редактирование динамически изменяемого HTML;
• Редактирование CSS на лету;
• Отладка JavaScript, командная строка для выполнения скриптов;
• Мониторинг сетевых запросов - можно увидеть размеры и время загрузки файлов и скриптов, заголовки запросов;
• Анализатор DOM.

Можно долго рассказывать про эти возможности в деталях, но я думаю, что они всем нашим читателям известны, а если нет - подробная информация есть на домашней страничке Файербага или то же самое в переводе Ильи Кантора.

Кроме самого firebug’a вам может пригодится полезная примочка к нему - FireCookie , c помощью которой (сюрприз:-) можно просматривать и изменять куки.

WEB Developer Toolbar для Firefox

Еще одно полезное дополнение к Огнелису. Выглядит оно так:

Разберем по пунктам.

Disable

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

Cookies

Полезная опция для работы с куками: их можно просматривать, удалять, запрещать и добавлять.

CSS

Это меню хранит самую крутую фичу Developer Toolbar’a - редактирование CSS на лету. Кроме этого есть возможность просматривать css, запрещать и так далее, и тому подобное. На мой взгляд здесь очень полезно наличие быстрых клавиш (CTRL+SHIFT+C, к примеру, позволяет сразу перейти к просмотру стилей страницы)

Forms

Все для работы с формами: показывать пароли, показывать информацию о формах, конвертировать методы форм (GET » POST и наоборот) и многое другое. Полезная функция «Populate Form Fields» для автоматического заполнения полей формы (например, при тестировании сайта, когда функция запоминания паролей в отключена. В остальном не вижу в этом пункте ничего полезного.

Images

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

Information

В этом меню очень много опций. Может быть полезной функция отображения атрибутов class и id на странице. Кроме этого интересен пункт «View Color Information» - чтобы быстро получить информацию о цветах, которые используются на странице. «View document size» - просмотр размера страницы. «View Response Headers» - просмотреть заголовки страницы.

Miscellaneous

Самая часто используемая функция - очистка кэша. Кроме этого здесь доступны функции «Page ruler» - линейка, «Page Magnifier» - лупа и «Line guides» - несколько линий, которые могут быть полезны чтобы подровнять шаблон.

Outline

Выделение разных элементов страницы - таблиц, заголовков, ссылок, фреймов, блоков. Resize позволяет изменять размер окна браузера под какие-либо стандартные расширения экранов. Tools здесь хранятся фичи для валидации страниц. Как локальных, так и внешних. Удобный и быстрый доступ к валидации HTML, CSS, и прочего. Для валидации HTML можно использовать клавосочетание CTRL+SHIFT+H.

View Source

Просмотр исходного кода. Возможность просмотра в внешнем приложении, просмотр сгенерированного кода.

То, что находится в правом углу мне нравится больше всего. Это быстрый валидатор HTML, CSS и индикатор ошибок JavaScript. Если проблем никаких нету - значок зеленый , а если есть проблемы - красный .

Internet Explorer Developer Toolbar

Начиная с 8.0 debug ошибок встроен уже в этот браузер. Вызывается он легко по клавише F12 . Правда он убогий как программа 90 годов.

Но есть куда круче инструмент для этого браузера, так называемый Internet Explorer Developer Toolbar скачать можно по ссылке.

С виду этот тулбар, конечно, похож на firebug, но, увы, до него еще не дорос. Хотя, с другой стороны в нем есть некоторые возможности, которых нету у файербага. Я бы назвал Internet Explorer Developer Toolbar неким гибридом Firebug’a и FireFox WEB Developer Toolbar’a.

Как и в firebug здесь есть возможность инспектировать элемент простым кликом. Но, если в мы сразу можем увидеть padding’и и margin’ы, то здесь такой возможности нету.

Кроме того Internet Explorer Developer Toolbar не обновляет дерево элементов динамически, как это делает Firebug. То есть, если мы изменим что-нибудь на странице средствами js, с помощью этого тулбара мы ничего не увидим.

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

Самое вкусное: здесь есть встроенный color picker, который позволяет получить любой цвет со страницы с помощью пипетки. (для ff есть отдельный плагин ColorZilla).

Debug DebugBar для Internet Explorer

DebugBar для Internet Explorer скачать можно по указанной ссылке.

По своему интересное расширение. Устанавливается как дополнительная панель к браузеру:

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

Кроме этого имеется инспектор:

Способ испектирования кликом или наведением разработчиков не устроил: они придумали штуку поинтереснее. В DebugBar’e надо перетащить прицел на нужный элемент, чтобы увидеть его в дереве. Возможности редактировать CSS нету. Зато есть валидатор и встроенная консоль js.

А если покопаться в настройках можно найти и такое:

И смешно и грустно.

Известно, что в восьмой эксплорер будет встроен Developer Toolbar. Он будет похож на тот, который описывался в третьем пункте, но надеемся, что будет лучше.

Debug DragonFly для Opera

DragonFly встроен в Оперу, начиная с версии 9.5, поэтому устанавливать не надо. Для того, чтобы активировать Драгонфлай переходим в Инструменты → Дополнительно → Средства для разработчиков. А если по английски, то Tools → Advanced → Developer Tools.

Сразу предупрежу, что DragonFly находится в стадии Alpha2, этим объясняются многие его глюки.

Возможности списком:

• DOM инспектор;
• Инспектирование кликом (опять-таки, мы не увидим отступов, как в FireFox);
• Редактирование ;
• Быстрый доступ к консоли ошибок.

DF - что-то вроде отдельной страницы во фрэйме. Если вы его открыли, оно будет открыто для всех вкладок (в отличие от firebug’a). Поэтому перед инспектированием элемента надо выбрать из списка страницу, которую мы хотим просмотреть.

К сожалению здесь, как и в Internet Explorer Dav Toolbar не отображаются динамически создаваемые элементы. И вообще, когда мы инспектируем страницу, никакой JavaScript не запускается: ссылки и кнопки не нажимаются. Будем надеяться, что когда DragonFly подойдет к релизу, мы увидим все эти возможности.

Debug WEB Inspector в Safari

Сразу скажу, что про браузер Safari информацию свистнул, поэтому за адекватность материала, как говориться, не отвечаю.

Для того, чтобы включить в меню Сафари пункт «Разработка», необходимо в настройках (закладка «Дополнительно») включить соответствующий пункт:

В меню «Разработка» нам доступны следующие функции:

Давайте рассмотрим в деталях WEB инспектор:

По умолчанию инспектор открывается в режиме просмотра HTML . Но его можно переключить в режим просмотра DOM. Для этого на верхней плашке имеется переключатель. При наведении на элемент в инспекторе, он будет подсвечен на самой странице. Увидеть отступы, изменить разметку или CSS на лету или увидеть динамические изменение в DOMe на лету, как в FireBug нельзя. Зато, согласитесь, выглядит весьма мило.

Если есть желание работать с инспектором в окне браузера, можно нажать на кнопочку в нижнем левом углу.

Еще в сафари доступна такая функция, как «Шкала времени сети», (кнопка «Network» в инспекторе):

Наглядно можно увидеть, когда и как долго грузятся файлы. Также можно просмотреть заголовки запросов, но само содержимое просмотреть, к сожалению, нельзя.

Debug для разработчиков в Google Chrome

Хромой появился на свет в продвинутом виде, и у него сразу имеются, пусть пока что кривые, но все же средства для разработчиков.

• DOM Inspector;
• Отладчик javascript;
• Консоль JavaScript.

Для того, чтобы проинспектировать какой-либо элемент, на него надо нажать правой кнопкой и в контекстном меню выбрать «Просмотр кода элемента»:

Функционал тот же, что и в Сафари: элементы подствечиваются при наведении, но не доступны редактирование CSS и HTML, не отслеживаются изменения в DOM. Вот только, кнопка в левом нижнем углу, которая должна прикреплять инспектора к окну браузера не работает.

В закладке «Resources» мы можем увидеть следующее:

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

В этой статье я рассмотрел наиболее известные расширения и встроенные средства для браузеров.

Есть и другие, например:

• Internet Explorer WEB Development Helper - хороший помощник для ASP.NET разработчиков (Internet Explorer);
• WEB Developer Toolbar - тулбар для Internet Explorer и FireFox. Есть несколько полезных функций;
• WEB Accessibility Toolbar - тулбар для Internet Explorer. Ничего интересного.

Если есть дополнения, о которых я не упомянул, а стоило бы, или есть функции у упомянутых расширений, которые я упустил, пишите.

Пользуйтесь на здоровье!

Много существует статей на Хабре, описывающих интересные и сложные аспекты веб-разработки, но много существует читателей, которые, находясь в начале своей карьеры веб-разработчика, хотели бы видеть материал, который позволил бы сделать первый шаг от «PHP за 24 часа» до разработки на серьезном уровне, и я хотел бы поделиться своим опытом в этом деле.

Особенности веб-приложения делают его разделенным на две части: клиентскую и серверную. На стороне клиента работает код на JavaScript (может быть, где-то можно найти и VBScript, но мы, пожалуй, не будем рассматривать этот случай), на серверной же - много что, в принципе, но мы рассмотрим PHP, наиболее популярный язык для серверной части веб-приложений. Так же интересно было бы поговорить об отладке и профилировании Flash-приложений на клиентской стороне, но затронутая тема и так обширна, так что пока оставим это.

Так же можно отнести к задачам отладки клиентского кода анализ и валидацию HTML кода. Это, вроде бы, задача не совсем из области программирования, но также немаловажная.

Некоторые части рассмотренных задач уже рассматривались в других статьях, и я предоставил на них ссылки.

Отладка и профилирование клиентского кода

«Классическим» способом отладки кода на JavaScript является использование функции alert и ее производные. Помнится, в начале своей карьеры лично я написал функцию print_r для JavaScript, так как не видел возможности для вывода отладочной информации по массивам и объектам. Выглядело это примерно так:
function print_r(variable) { if (variable instanceof Array || variable instanceof Object) { var key; for (key in variable) alert(key + " => " + variable); } else { alert(variable); } }

О каком-либо профилировании речи, конечно, не велось совсем.

При таком подходе даже информация об объекте console производит революцию.

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

Mozilla Firefox

Наверно, именно Firefox можно назвать пионером отладки клиентского кода. Долгое время его указывали как браузер, наиболее подходящий для разработки, а все благодаря расширению Firebug , которое содержит, наверно, все нужные возможности, кроме валидации HTML кода.

Так же, начиная с версии 4, появилась встроенная Веб-консоль, которая реализует часть функций вкладки «Консоль» и «Сеть» Firebug"а, а так же некоторые возможности по отладке CSS.

Начиная с версии 6, появился Простой редактор JavaScript, который так же реализует одну из функций Firebug"а, и позволяет писать и выполнять код прямо в браузере.

Начиная с версии 10 появился Инспектор страниц, который позволяет изучать HTML код и CSS свойства, то есть, реализует функции вкладки «HTML».

За валидацию HTML кода как правило отвечает расширение Html Validator . Как раз его иконку, указывающую на количество ошибок на главной странице сайта habrahabr.ru, можно видеть в правом нижнем углу браузера на картинке с Инспектором страниц.

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

Google Chrome и Safari

Эти браузеры, основанные на WebKit, обладают встроенным инструментом разработки Web Inspector, который очень хорошо развит и реализует практически те же функции, что и Firebug. При этом, надо отдать ему должное, он не замедляет работы браузера, что водится за «старшим братом».

В Chrome он может быть вызван по нажатию клавиш Ctrl+Shift+I или просто по F12 . В Safari он хорошо спрятан, и для его использования нужно включить возможности разработки в настройках браузера. Позже инструменты разработчика станут доступными из пункта «Разработка» главного меню или по сочетанию клавиш Ctrl+Alt+I .

Для валидации HTML кода так же нужно устанавливать сторонние расширения. К примеру, для Chrome, это может быть Validity . Для Safari пока не удалось подобрать ничего подходящего.

Opera

Opera так же имеет встроенный инструмент для разработчиков, который называется «Opera Dragonfly», и может быть вызван в любой момент по сочетанию клавиш Ctrl+Shift+I . Он похож на то, что нам представляет WebKit, и имеет подобные возможности и плюсы, хотя, на мой лично взгляд, менее удобен.

Отладка и профилирование серверного кода

Xdebug

Как мы договорились в начале, мы рассматриваем случай, когда на сервере используется PHP. Тут «классическим» методом отладки являются echo , print_r и var_dump , но есть так же и средство для отладки, как в лучших домах - Xdebug . Лично для меня, в связи со спецификой обучения в институте, это выглядело «прямо как в Delphi».

Расширение xdebug позволяет как минимум прогонять код по шагам и просматривать значения переменных, что поднимает программирование на PHP на новый уровень. О тонкостях работы с xdebug была соответствующая . XDebug обычно доступен в репозиториях GNU/Linux, в Windows его так же не слишком сложно установить, скопировав dll файл.

При использовании этого расширения, с сервера на компьютер разработчика поступает входящее соединение (по умолчанию на порт 9000), которое он должен обработать. Для этого необходимо соответствующим образом настроить свою IDE.

Кстати говоря, использование IDE так же является непременным условием движения вперед. Некоторые программисты считают, что разницу между программированием в блокноте с подсветкой кода и в IDE можно увидеть только на крупных проектах, но лично я придерживаюсь мнения, что разница видна даже на программе «Hello world!» - одна автоподстановка имен и аргументов стандартных функций чего стоит.

XHProf

О расширении

Да, xdebug предоставляет возможности по профилированию, но разработка Facebook"а для этих целей, XHProf , лично мне больше нравится. Я, сказать честно, не проводил никаких тестов, но считается, что данное расширение гораздо лучше подходит для production-серверов и для профилирования при реальных нагрузках.

Установка

К сожалению, это расширение не входит ни в какие репозитории. Оно входит в PECL, но по какой-то причине его установка штатным путем часто вызывает проблемы. По этой причине приходится проводить установку из исходников.

# Получаем исходники wget http://pecl.php.net/get/xhprof-0.9.2.tgz # Распаковываем исходники tar -xvf xhprof-0.9.2.tgz # Переходим в каталог, где содержится код расширения cd xhprof-0.9.2/extension/ # Проводим компиляцию и тест phpize ./configure make make test # Проводим установку цивилизованно checkinstall
Файл конфигурации xhprof.ini предоставляет нам примерно такие возможности:

extension=/usr/local/lib/php/extensions/no-debug-non-zts-20090626/xhprof.so
; Каталог для логов
xhprof.output_dir="/var/log/xhprof/"

Профилирование

Каталог, который мы получаем, распаковав архив, содержит помимо исходников расширения так же и веб-интерфейс для изучения результатов профилирования, и библиотеки для профилирования приложения.

Приведем пример профилирования. В код приложения нужно включить следующие элементы:
// Начало скрипта, включаем профилирование // как нагрузки на процессор, так и на память xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY); /* * Основной код приложения */ // Конец скрипта, завершаем профилирование, // записываем результат в лог $xhprofData = xhprof_disable(); include_once XHPROF_DIR."/xhprof_lib/utils/xhprof_lib.php"; include_once XHPROF_DIR."/xhprof_lib/utils/xhprof_runs.php"; $xhprofRuns = new XHProfRuns_Default(); $namespace = "some-unique-name"; $runId = $xhprofRuns->save_run($xhprofData, $namespace); echo "\n";
Здесь константа XHPROF_DIR указывает на каталог, куда мы распаковали скачанный архив.

Для анализа результатов нужен тот самый веб-интерфейс. Его можно взять в каталоге $XHPROF_DIR/xhprof_html/ - условно обозначим его так. К примеру, мы расположили его в доступном веб-серверу месте, и он доступен по адресу example.com/system/xhprof/ , тогда для анализа результата работы нам нужно обратиться к нему следующим образом:

Example.com/system/xhprof/?run=%runId%&source=%namespace%

Мы получим подобный результат:

Профилирование можно включать в код приложения на постоянной основе или, например, сделать так, чтобы оно запускалось случайно с определенной вероятностью или по наличию определенного условия. Например, так:

$needProfiler = (mt_rand(0, 100) < 10 or isset($_COOKIE["xhprof"])); if ($needProfiler) xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
В таком случае можно, имея жалобы от клиентов или подозрения, обратиться к результатам профилирования за определенный временной промежуток. С помощью параметра namespace можно определить, какая именно часть приложения (какой скрипт, контроллер, экшн) профилировались.

Профилирование SQL запросов

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

/** * Запрос * @param string $sql Запрос * @param array $params Параметры * @param string $query Скомпилированный запрос * @return array Результат */ public function query($sql, array $params = array(), &$query = "") { $start = microtime(TRUE); // Проведение запроса, включая "защиту" параметров $stop = microtime(TRUE); $time = $stop - $start; $this->_addProfilerData($sql, $time); // Возврат результата } private function _addProfilerData($query, $time) { if (is_array(self::$profilerData)) { self::$profilerData = array("query" => $query, "time" => $time); } } public function __destruct() { if (is_array(self::$profilerData)) { $this->_writeProfilerData(); self::$profilerData = FALSE; } // Отключение от БД } private function _writeProfilerData() { $values = array(); foreach (self::$profilerData as $row) { $query = mysql_real_escape_string($row["query"], $this->con); $time = (float)$row["time"]; $hash = crc32($row["query"]); $values = "($hash, "$query", $time)"; } if ($values) { $strValues = implode(", ", $values); $sql = "INSERT DELAYED INTO `profiler_queries` (`query_hash`, `query`, `work_time`) VALUES $strValues"; @mysql_query($sql, $this->con); } }
Здесь данные профилирования запросов хранятся в таблице profiler_queries . Эта таблица может иметь тип MyISAM или Archive, так как они предоставляют возможность совершать отложенные вставки, что не создает излишней задержки ответа при профилировании. Так же для лучшего поиска запросов в таблице лучше создать столбец типа INT , куда будет писаться crc32-хеш запроса, по которому нужно создать индекс.

Заключение

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