Посты с тагом букмарклеты
15
декабря
2007

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

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

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

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