Для того, чтобы попасть в консоль, откройте ваш сайт в Google Chrome, щелкните правой кнопкой мыши в любом месте web страницы, и выберите Просмотр кода страницы в контекстном выпадающем меню, или же по конкретному элементу для исследования, выбрав Просмотр кода элемента. Вверху у вас будет перечислено несколько вкладок. Сегодня мы поговорим о вкладке Elements, на которой представлены элементы web страницы с подсветкой тегов, свойств, выделением вложенности элементов, представлением иерархии элемента в дереве DOM (подсказка внизу, от корневого родительского к текущему исследуемому), возможностью редактирования элементов, перечень их свойств, рассмотрим поиск по элементам, а также познакомимся с просмотром связанных с элементами стилей css и т.п..

Как просмотреть все стили, которые связаны с определенным элементом? Какой из них применяется сейчас? В каких файлах они расположены?

   Итак, нет ничего проще! Открываем браузер Google Chrome, открываем наш сайт – источник вопросов, щелкаем по нужному элементу правой кнопкой мыши, если он виден в контексте страницы, и выбираем в контекстном меню пункт Просмотр кода элемента. Внизу у нас появляется консоль с выделенной вкладкой слева Elements и всеми, связанными с элементом стилями справа, где: Computed Styles – это общие «сводные» стили, которые были назначены элементу из правил css и настроек браузера пользователя (его среды окружения), и при этом вкладка свернута. Но нас интересует вкладка Styles, развернутая под ней, в которой поочередно перечислены все стили, назначенные элементу, а также файлы, где данные правила указаны для этого элемента по его типу, id, классу, имени, свойству, атрибуту и т.п. При этом, если css правило перечеркнуто, значит оно было переопределено ранее/далее (что позволяет легко отследить, какое из css правил является приоритетным и применяется в данном случае к элементу).

Внизу под консолью расположена строка, которая показывает элемент в иерархии документа, легко позволяет просмотреть весь список родительских элементов от корневого до выбранного элемента. Что-то наподобие «хлебных крошек».

Html тег не виден в контексте страницы? Или нужно найти все теги, например, по определенному классу, имени, свойству, типу?

   Открываем сайт в Google Chrome, щелкаем правой кнопкой мыши, вызываем контекстное меню, выбираем Просмотр кода страницы. Нажимаем сочетание клавиш CTRL + F одновременно, вводим нужную нам фразу (например: class="padding") и перемещаемся по списку найденных результатов, попутно просматривая все стили, связанные с нужными элементами в правой части страницы.

   Но верстка web сайтов бывает делом утомительным, рекомендуем Вам время от времени прерываться на отдых, например, за чашкой кофе с бутербродом, особенно, если хлеб вкусный, например из хлебопечки lg (не то, что магазинный).

Как просмотреть код html элемента (элементов), подгружаемых динамически (например: по Ajax).

   Ждем загрузки страницы в Google Chrome. Выполняем нужные действия, чтобы сработал Ajax. Щелкаем правой кнопкой мыши по загруженным данным, выбираем в контекстном меню Просмотр кода элемента, исследуем результат в консоли на вкладке Elements слева.

Просмотр изменения css стилей в режиме реального времени.

   Кстати, также удобно бывает наблюдать при необходимости: какие стили назначаются элементу налету, например, при прокрутке галереи и других событий по таймеру. Все назначенные через javascript стили в реальном времени будут отображены в свойстве style выделенного элемента в окне на вкладке Elements.

Интерактивный просмотр влияния правил css на представление html тегов.

   Google Chrome предоставляет интерактивную консоль для css стилей. А это значит, что Вы можете не только просмотреть, какие стили применяются к элементу, но, и подвести курсор мыши на определенное из свойств css, включить при помощи всплывающей галочки справа, или отключить его, сняв флаг, и просмотрев получившийся результат на странице.

Изменяем структуру представления html элементов налету (прямо в браузере).

   Итак, исследовать структуру web документа в Google Chrome мы уже научились, теперь рассмотрим вкратце редактирование элементов налету. Переходим в консоль любым удобным для нас способом. Находим нужный элемент во вкладке Elements, щелкаем по нему правой кнопкой мыши, вызываем тем самым всплывающее контекстное меню:

   Add attribute – добавляет атрибут для указанного элемента. Как только станет активным курсор, начинаем задавать нужное свойство. Например: напишем name="itemImage", которое будет незамедлительно добавлено к нашему элементу.

   Edit attribute – если щелкнуть по атрибуту элемента правой кнопкой мыши, становится доступным пункт edit attribute. Щелкаем, редактируем.

   Пример использования: мы забыли пароль, сохраненный под звездочками в Google Chrome (если пароль был сохранен в этом браузере). Щелкаем правой кнопкой мыши по элементу с вводом пароля, щелкаем по Просмотр Кода Элемента, в консоли слева на вкладке Elements щелкаем по атрибуту type="password" правой кнопкой мыши, левый щелчок мышью по Edit attribute, меняем атрибут type="password" на type="text", и вот у нас уже вместо звездочек отображается тот самый пароль в виде текста.

   Edit html – щелкаем правой кнопкой мыши по элементу в консоли Elements, выбираем Edit html, меняем код по своему вкусу.

   Copy as HTML – копируем нужную нам порцию HTML для дальнейшего исследования, скажем, в блокноте, или для других целей, где нам нужно применить точно такую же верстку. Экономим время.

   Copy XPATH – копирует XPATH представление структуры от корня родительского элемента до выделенного элемента.

   Delete node – если нужно удалить текущий выделенный элемент и все его дочерние из контекста web страницы, и посмотреть результат.

   Word wrap – сделает представление web страницы в контексте консоли Elements более читаемым.

   В следующих статьях мы продолжим рассмотрение средств для web-мастера, и в частности познакомимся с остальными вкладками инструментов для web-мастера в Google Chrome, а также рассмотрим отладку ошибок javascript средствами разных браузеров

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

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


Яндекс.Метрика