Microsoft Expression Web 4: SuperPreview. Отладка HTML.

Каждый верстальщик, как, впрочем, и каждый заказчик, знает, сколь трудно и сколь неудобно тестировать HTML верстку. Приходится открывать уйму браузеров, исхитряться со старыми версиями браузеров… Часть этих проблем теперь решается одним замечательным приложением. Имя ему — Microsoft Expression Web 4 SuperPreview.

Программа входит в комплект Microsoft Expression Web 4. Частично он уже был рассмотрен в статье «Лучшая IDE для веб-разработки«, но я счел программу достойной отдельной статьи. Не исключено, что и остальным компонентам будут посвящены более подробные обзоры. Итак, приступим.

Сама программа выглядит так:

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

В настоящий момент программа поддерживает следующие браузеры: IE 6,7,8,9 и 8 в режиме совместимости с 7, а так же Mozilla Firefox 3.6.xx.

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

Слева — основной браузер, справа — дополнительные. Разница в том, что программа будет сравнивать дополнительные с основным. Чуть ниже будут подробности.

Для подключения Firefox Вам придется установить себе на компьютер Firefox версии 3.6. Его можно скачать отсюда и установить в отдельную папку (Microsoft потом предложит указать путь к программе).

После выбора браузеров мы можем перейти к тестированию. Для этого в верхней части экрана в соответствующую адресную строку введем нужный нам URL — к примеру, http://google.ru

Мы получаем изображения сразу в двух браузерах — в моем случае, в Firefox 3.6.22 и Internet Explorer 6. Сразу видно, сколь существенна разница в отображении. Если навести мышку на элемент — он подсветится и в соседнем окне, очень удобно для сравнения интерпретации и положения элементов на экране. Если кликнуть мышкой по элементу — нам покажут код элемента, что сильно упрощает задачу, причем покажут сразу в обоих вариантах. Так же отображаются линейки (пиксельные, разумеется), и что тоже весьма кстати, есть возможность устанавливать направляющие простым перетаскиванием «линейки» вниз или в сторону (направляющие так же действуют сразу на 2 окна).

В правом нижнем углу окна можно выбрать размер «браузера» — от 640х480 до 2560х1600, так же возможно указать произвольный размер.

Теперь рассмотрим панель инструментов.

Первые две кнопки определяют действие курсора — просто перетаскивание изображение («рука») или выделение элемента страницы с демонстрацией его кода (стрелка).

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

5 и 6 кнопка отвечают за скрытиеотображение линеек по краям окон и за отображение миниатюры страницы  — очень удобно для больших страниц, позволяет быстро перемещаться по ним.

Назначение кнопки номер 7 мне не удалось выяснить, по крайней мере особого эффекта от ее активности или неактивности я не заметил)

8, 9, 10 и 11 кнопки просто замечательны. Они позволяют управлять положением «окон» браузеров. Можно смотреть их рядом, одно над другим, накладывать их друг на друга (это очень удобно для сравнения, особенно если отличия незначительны), а так же просматривать только 1 браузер (переключение производится выбором браузера в строке над кодом).

Так же имеется возможность изменять масштаб страницы.

Вот так. Все это делает данную программу незаменимой при тестировании верстки =) Она на самом деле очень удобна и полезна, надеюсь что и Вам она придется по душе.

 

 

comments powered by HyperComments