Как инспектировать код страницы блога в браузере

503 views
Skip to first unread message

Aldous

unread,
Sep 24, 2013, 8:19:22 AM9/24/13
to

Инспектирование кода веб-страницы есть во всех передовых браузерах: в Firefox, Chrome, Opera. В данной заметке остановимся на браузере Mozilla Firefox, так как в нём изучать код немного удобнее, чем в выше перечисленных браузерах.

В Firefox вы можете воспользоваться стандартным инспектором, либо дополнением Firebug, которое выполняет ту же функцию, только изящнее. Все картинки кликабельны.

Пример. Как узнать, в каком теге у вашего блога заголовок.

Открываем внутреннюю страницу со статьёй.  Нажимаем правой кнопкой мыши на любой части страницы (аналог - горячие клавиши shift-control-i) и выбираем пункт "исследовать элемент" (либо "Инспектировать элемент с помощью Firebug"):

Браузер Mozilla Firefox

После чего страница обработается инспектором и примет вот такой вид:

Инспектирование кода в Mozilla Firefox

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

Если вы будете передвигаться по элементам HTML поля, браузер покажет непосредственно на странице, какой элемент вы затрагиваете.

И самая важная функция - это автофокусировка элемента при помощи вот этой кнопки:

Как инспектировать элементы страницы в браузере Firefox

Нажмите на неё и захватите заголовок страницы. В поле HTML увидите соответствующий заголовку статьи html-код:

Firefox инспектор

Как можно увидеть на скриншоте, заголовок в примере имеет код:

<h2 class="title" itemprop="name">Плагин Seo Blogger для анализа статей</h2>

Соответственно, в коде шаблона Blogger мы можем найти заголовок по ближайшим ориентирам: class="title", class="post-header", class="published".

Ссылка на этот топик - http://goo.gl/tnjZLT

Нина

unread,
Sep 27, 2013, 11:27:25 AM9/27/13
to blog...@googlegroups.com
Попробовала, спасибо - очень полезно. Только в сообщении в почте у меня почему-то не выводится ссылка на топик ...

Aldous

unread,
Sep 27, 2013, 3:08:49 PM9/27/13
to blog...@googlegroups.com
Да, это самое важное при вёрстке в шаблоне - умение находить нужные фрагменты кода. Аналогичным способом воруются, точнее, "заимствуются" друг у друга разные кнопки, рамки и т.д.
Про ссылку на почте я тоже думал, надо как-то пофиксить
Reply all
Reply to author
Forward
0 new messages