Инструменты для тестирования и отладки в IE

Очень часто, при разработке проекта, его тестирование в Internet Explorer откладывают до последнего. И это вполне нормально, если ваши проблемы в основном связаны с версткой страницы.

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

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

Сборки браузеров

В первую очередь конечно же нужно установить все популярные версии Internet Explorer (IE6, IE7, IE8). Для этого существует множество различных решений, я расскажу о четырех из них.

Internet Explorer Collection

Лично я рекомендую использовать – Internet Explorer Collection. Не пугайтесь, это очень надежный инструмент (несмотря на внешний вид их сайта). Internet Explorer Collection содержит множество версий IE, совершенно независимых друг от друга, так что их можно использовать одновременно.

Я рекомендую эту сборку главным образом потому, что их браузеры весьма стабильны. Кроме того, Internet Explorer Collection содержит Internet Explorer Developer Toolbar.

BrowserSeal.BrowserPack

Если вам требуются более старые версии других браузеров, я рекомендую установить BrowserSeal.BrowserPack. Он использует, упомянутый выше Internet Explorer Collection, и кроме того, позволяет установить браузеры типа Safari3 и Opera 9.

Браузеры, входящие в состав BrowserSeal.BrowserPack стабильны и не имеют никаких выявленных проблем.

IETester

IETester имеет некоторые преимущества в сравнении с другими сборками, например такие как открытие разных версий IE в табах.

IETester разрабатывается командой DebugBar, которая так же предоставляет замечательные инструменты отладки DebugBar и Companion.js (оба рассмотрены в сегодняшней статье).

К сожалению, IETester (версии 0.4.2) остается весьма ненадежным приложением, к тому же во время отладки находятся некоторые несоответствия. Будем надеяться, что рано или поздно эти проблемы будут исправлены, и мы сможем взять IETester на вооружение.

Microsoft Expression Web SuperPreview

Microsoft Expression Web SuperPreview – это полноценное приложение и часть продукта Microsoft Expression Web 3. Главное его назначение – это возможность сравнить одну и ту же страницу одновременно в IE6, IE7 и IE8.

На мой взгляд, это приложение не предназначено для отладки и тестирования.

Основные инструменты отладки

Скорее всего, для отладки в Firefox, вы используете Firebug. И возможно, вы также слышали о Firebug Lite и даже использовали его. Далее, вы узнаете какие еще способы можно использовать для отладки кода под Internet Explorer.

Firebug Lite

Конечно же, вы уже знакомы с Firebug Lite. Если нет, читайте далее. Firebug Lite – это javascript-файл, который можно подключить к странице, чтобы получить возможность использовать некоторые функции Firebug, в других браузерах.

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

IE Developer Toolbar

Возможно, вы знакомы с инструментами разработчика под IE8. IE Developer Toolbar – практически тот же самый инструмент для IE6 и IE7. И кроме того, он поставляется вместе со сборкой IE Collection, по умолчанию.

IE Developer Toolbar прост в использовании и предоставляет широкий набор средств для отладки. По функциональности, его можно сравнить с Web Developer – дополнением для Firefox.

DebugBar

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

Если бы требовалось описать DebugBar в двух словах, то достаточно сказать “он работает!”.

CompanionJS

Companion.js интегрируется с IE, и вполне может быть назван простейшей версией Firebug. В отличие от Firebug Lite, Companion.js, имеет более удобную консоль и отчеты об ошибках.

К сожалению, в Companion.js есть два серьезных недостатка: 1) он пока не поддерживает методы типа console.dir(); и 2) иногда вываливается в ошибку, при совместном использовании с другими инструментами разработчика для IE.

Инструменты тестирования производительности

Клиентское тестирование производительности и оптимизация – это практика, которая долгое время “не существовала” в веб-разработке. Я имею в виду, что ей долгое время не уделяли должного внимания.

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

Далее рассмотрены некоторые инструменты тестирования производительности, которые можно использовать в любом браузере, не столько в Internet Exploer.

dynaTrace AJAX

Если вы используете Speed Tracer в Google Chrome, тогда вы полюбите dyna Trace AJAX. Название говорит само за себя – он используется для диагностики и отслеживания AJAX, а также проблем с производительностью клиентских скриптов. Кроме того, в дополнение, он предоставляет инструменты для отслеживания проблем рендера (отрисовки) и сетевой загрузки.

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

MySpace’s Perfomance Tracker

MySpace’s Perfomance Tracker или “msfast” – это плагин для браузера, который помогает разработчикам улучшить производительность кода, путем сбора и измерения возможных “узких мест”, на веб-странице.

У меня возникли небольшие проблемы, при установке бета-версии. Но после того, как была установлена альфа-версия и произведено обновление до бета-версии, все заработало.

JSLitmus

JSLitmus – это простой инструмент для создания специализированных JavaScript-тестов. Я особенно рекомендую использовать JSLitmus для тестирования производительности всего вашего JavaScript-кода.

JSLitmus предоставляет дополнительные преимущества в Internet Explorer. Как известно, в IE, существуют  проблемы с JavaScript, способные нанести серьезный удар по производительности. Но если вы заранее создадите несколько простых тестов, то времени на поиск и решение этих проблем уйдет гораздо меньше.

Fiddler2

Fiddler – это отладочный прокси-сервер, ведущий логи всего HTTP(S) трафика. Fiddler позволяет вам проверить весь HTTP(S) трафик, установить точки прерывания и “играть” с исходящими и входящими данными. Fiddler включает мощную скриптовую подсистему, и может быть расширен с помощью любого .NET языка.

Если честно, я практически не использую Fiddler. В основном потому, что проблемы производительности связанные с трафиком сайта, всегда решаются с помощью другого инструмента (в другом браузере). Но Fiddler на самом деле дает отличное понимание того, что действительно происходит между браузером и сервером, и кроме того предоставляет большое количество настроек.

Другие ресурсы

Во время написания статьи, мне попался инструмент под названием IEInspector. Инструмент платный, но есть бесплатная демо-версия. У меня не было времени рассмотреть его подробнее, возможно вы захотите попробовать его.

Кроме того, на сайте Microsoft Windows, есть список, в котором перечислены полезные инструменты для тестирования и разработки приложений под Internet Explorer 8.

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

Перевод статьи «Debugging and Testing in Internet Explorer Made Easy«, автор Samuli Hakoniemi