Узнать всё об элементе страницы

Ситуация, когда нужно посмотреть код элемента, стили которые на него ложатся, — крайне частая в работе веб-разработчика, применяется обычно при отладке сайтов, к чужим сайтам, или когда надо найти в движке нужный фрагмент, который генерируется непонятно в каком файле.

Сегодня я расскажу о замечательном плагине для MozillaFireBug, который умеет это всё, а также показывает файлы, из которых берутся стили, возможность изменения «в прямом эфире» и многое другое. Об Опере расскажу вкратце, там тоже так можно ;) Однако менее удобно, поэтому пользуюсь Mozilla для этих целей, хотя для обычного сёрфинга использую Оперу.

Нам придётся скачать плагин FireBug с сайта https://addons.mozilla.org/ru/firefox/addon/firebug/

Устанавливается в 2 клика, затем нужно перезагрузить браузер, и при следующем запуске FireBug будет установлен.

Как пользоваться данным расширением? Есть 2 варианта — в нижней части сайта или в отдельном окне. Рекомендую пользоваться в нижней части сайта, хотя это дело вкуса.

Выглядит сия вкусняшка так:

Открывается FireBug по кнопке F12, но этот способ не особо интересен, и я даже не помнил этот хоткей, потому что пользуюсь вторым способом, который намного удобнее:

Подведите курсор к какой-либо части страницы и, после правого клика мыши, выберите:

FireBug, как и на первом скрине, откроется сразу в нужном месте кода, а также покажет все CSS-стили, которые присутствуют в данном элементе, а также из какого файла они берутся. Также все параметры можно поизменять, иногда, правда глючит, но всё реже и реже и только тогда когда слишком уж много наизменял в самом FireBug и лечится перезагрузкой страницы.

Ну и пара слов об Операманов, которые не поставят Mozilla даже ради такой крутой штуки. Плагин называется DragonFly и поставляется сразу с Opera. Принцип действия одинаковен, только надпись называется тут:

За сим всё, куда это всё применить, думаю, не надо обьяснять, имея FireBug или Opera DragonFly в арсенале, процесс разработки, а тем более отлаживания, начинает протекать очень и очень намного быстрее!

Где лучше firebug?
в Mozillaв Chrome

Оцените статью!

Понравилась статья? Поделиться с друзьями:
Комментариев: 5
  1. Sunnym@n

    Офигенная фишка) За бесплатность отличных плагинов файрфокс обожаю) Спасибо за статью, Опера действительно проигрывает.

  2. Аноним

    я бы не сказал что проигрывает, в опере очень удобный инспектор кода

  3. Аноним

    не спорю, здесь скорее дело привычки. + Dragonfly на слабых компьютерах подтормаживает.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Для отправки сообщения выберите лишнее изображение