Paradigm.ru » букмарклеты http://paradigm.ru Блог Александра Мусаева Sat, 08 May 2010 16:13:13 +0000 en hourly 1 http://wordpress.org/?v=3.0 XRAY: HTML-штангельциркуль http://paradigm.ru/2007/12/xray http://paradigm.ru/2007/12/xray#comments Fri, 14 Dec 2007 21:55:38 +0000 admin http://www.paradigm.ru/2007/12/15/xray/ Пиксельная линейка — довольно полезный инструмент, используемый при «отладке» кода веб-страниц. С ее помощью можно проверять размеры различных блоков, правильность их позиционирования и другие подобные детали. На свете существует множество реализаций этого средства, как в виде встроенной фичи специализированных редакторов, так и в виде stand-alone утилиты. В качестве примера первого варианта можно привести Dreamweaver, о котором шла речь в одном из недавних постов. Что же касается отдельных программ — ни одна из них сейчас не приходит на ум. У меня на компьютере когда-то была установлена «линейка», но давным-давно потерялась из-за общей склонности к этому всех мелких программ (особенно под Windows, когда раз в год-два возникает необходимость профилактической переустановки ОС и всего софта заодно). Найти линейку снова — несложно (и гугл в помощь тем, кто захочет это сделать), но сейчас я бы хотел рассказать об одной более удобной и гораздо более функциональной альтернативе, которую нашел на прошлой неделе.

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

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

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

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

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

]]> http://paradigm.ru/2007/12/xray/feed 3