XRAY: HTML-штангельциркуль

Пиксельная линейка — довольно полезный инструмент, используемый при «отладке» кода веб-страниц. С ее помощью можно проверять размеры различных блоков, правильность их позиционирования и другие подобные детали. На свете существует множество реализаций этого средства, как в виде встроенной фичи специализированных редакторов, так и в виде stand-alone утилиты. В качестве примера первого варианта можно привести Dreamweaver, о котором шла речь в одном из недавних постов. Что же касается отдельных программ — ни одна из них сейчас не приходит на ум. У меня на компьютере когда-то была установлена «линейка», но давным-давно потерялась из-за общей склонности к этому всех мелких программ (особенно под Windows, когда раз в год-два возникает необходимость профилактической переустановки ОС и всего софта заодно). Найти линейку снова — несложно (и гугл в помощь тем, кто захочет это сделать), но сейчас я бы хотел рассказать об одной более удобной и гораздо более функциональной альтернативе, которую нашел на прошлой неделе.

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

Ниже приведен скриншот главной страницы paradigm.ru в «просвеченном» виде:

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

По заявлению разработчиков, букмарклет дружит со всеми распространенными браузерами (Internet Explorer 6+, Safari, Firefox, Camino и Mozilla).

Ссылки на тему:

• XRAY: look beneath the skin

Комментарии к заметке «XRAY: HTML-штангельциркуль»

# larin: ^{(15 декабря, 2007 @ 14:32)}

До сих пор пользовался для этих целей расширением для FF, по названием Web Developer. За информацию спасибо! Попробовал – понравилось. Теперь в моем “ящике с инструментами” появилась еще одна “линейка”.

Кстати, советую всем, хотя бы попробовать =)

# admin: ^{(15 декабря, 2007 @ 15:16)}

larin: Да, тулбар Web Developer – хорошая вещь. Тоже его использую.

# zyll: ^{(17 декабря, 2007 @ 08:44)}

+Firebug +kruler Описание: a screen ruler and color measurement tool for KDE Kruler is a screen ruler (using pixels) and color measurement tool for KDE.

Написать комментарий