Очередной блог фрилансера » IE

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

dreamhelg — Fri, 26 Mar 2010 05:00:02 +0000

Очень часто, при разработке проекта, его тестирование в 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

Как загружать дефолтную тему WordPress для IE6

dreamhelg — Fri, 18 Sep 2009 12:31:01 +0000

Снова и снова поднимается один и тот же вопрос… Что нам делать с проблемой IE6? Конечно, существует огромное количество различных средств, доступных вам: вы можете показывать пустую страницу для пользователей IE6, направить внимание на современные браузеры и вообще игнорировать IE6, или вы можете отображать небольшое сообщение для пользователей IE6, предлагающее обновить их браузер (делается очень просто, с помощью этого плагина). Но, если вы не хотите обижать пользователей IE6, однако, при этом, вам некогда отлавливать всевозможные глюки этого браузера, есть отличное решение, которое замечательно подойдет вам.

Определяем текущий браузер

Итак, нам нужно определить User Agent наших посетителей. Если посетитель использует браузер IE6, мы должны сообщить WordPress'у о загрузке дефолтной темы (Кубрик). Поэтому, для определения User Agent, мы используем, немного PHP-магии. [php] if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false) { // do something } [/php] Здесь, выражение if определяет, использует ли пользователь браузер IE6 в качестве User Agent. Следует заметить, что некоторые браузеры позволяют пользователям скрывать их User Agent. Так что, теоретически вполне возможно, что кто-нибудь скроет User Agent IE6, а потом забудет переключить обратно. Возможно, конечно, но маловероятно.

Сообщаем WordPress об использовании темы по умолчанию

Теперь, когда мы знаем с помощью какого браузера к нам пришел посетитель, нам следует сообщить WordPress’у, что нужно делать с этой информацией. К счастью, Wordpress предлагает некоторые фильтры для нашего использования. Код выглядит следующим образом (включая проверку браузера, указанную выше): [php] add_filter('template', 'serve_default_to_iesix'); add_filter('option_template', 'serve_default_to_iesix'); add_filter('option_stylesheet', 'serve_default_to_iesix'); function serve_default_to_iesix($theme) { if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false) $theme = 'default'; return $theme; } [/php]

Создаем плагин

Поскольку этот небольшой фрагмент функциональности используется для определения, какая из тем загружена, вы не можете использовать файл functions.php для выполнения этого кода. Но, вы вполне можете использовать плагин, не беспокойтесь, код достаточно простой: [php] [/php] Если не хотите скопировать код, и сохранить в качестве php-файла, можете скачать готовый плагин. Просто скачайте его и активируйте в панели управления.

Обратите внимание, что функциональность зависит от динамической загрузки шаблонов, так что плагин не будет работать одновременно с плагином, похожим на WP-Super-Cashe.

Вот и все. Теперь, пользователи IE6, увидят ваш блог в оформлении дефолтной темы. Но вам не обязательно останавливаться на этом. Если вы хотите использовать какую-либо другую тему, специально предназначенную для пользователей IE6, то это не проблема. Вам достаточно знать, как она называется, чтобы заменить в коде слово "default" на название вашей темы (чувствительно к регистру). Например, если вы хотите загружать для пользователей IE6 классическую тему, вам нужно изменить код, следующим образом: [php] ... if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false) $theme = 'classic'; ... [/php] Перевод статьи "Serve IE6 Visitors the Default WordPress Theme", автор Nathan Rice

Полное руководство по укрощению IE6

dreamhelg — Tue, 28 Jul 2009 17:55:54 +0000

На протяжении многих лет, Internet Explorer 6 (IE6) был несчастьем для веб-разработчиков во всем мире. Разработчики и пользователи стали использовать более предсказуемые, соответствующие стандартам, современные браузеры, такие как Firefox, Opera [...]

Еще раз о png в IE6

dreamhelg — Tue, 17 Feb 2009 10:55:00 +0000

Позволю себе внести посильный вклад в общечеловеческую проблему прозрачности .png-картинок во всеми любимом браузере Internet Explorer версии 6. Если вам пока не ясно в чем же состоит эта проблема, откройте [...]

Инструменты верстальщика

dreamhelg — Tue, 16 Dec 2008 08:02:26 +0000

Не сказать что слишком долго, но определенное время я размышляла, какая же запись должна быть следующей. Можно было бы сразу пуститься во все тяжкие, и начать рассказывать всем, о том [...]