Использование инструмента "Инспектор" в Google Chrome для диагностики веб-сайтов

Google Chrome — это не только быстрый браузер для потребителей, но и скрывает множество функций для разработчиков. Вы можете раскрыть часть этой мощности с помощью инструмента “Инспектор“. Хотя он изначально может показаться сложным, этот инструмент дает вам представление о том, как создаются веб-сайты, и может помочь вам отладить ваши собственные сайты.

Доступ к инструменту Инспектор

Инструмент Инспектор можно найти в контекстном меню Chrome.

Щелкните правой кнопкой мыши на любом элементе в вашем браузере и выберите “Инспектор“ в контекстном меню.

Окно появится сбоку от браузера Chrome, как показано ниже. Это называется панелью DevTools. Если вы когда-либо использовали Firebug в Firefox, вы можете узнать некоторые его части.

Здесь много информации, поэтому давайте рассмотрим отдельные части.

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

Панель инспектора разделена на несколько различных вкладок, которые видны в верхней части окна. Мы сосредоточимся на вкладке “Элементы” по умолчанию.

Рядом с этими вкладками находятся две полезные кнопки. Первая — это инструмент “Инспектировать элемент”.

Этот инструмент позволяет вам наводить курсор и выбирать различные элементы DOM для инспекции.

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

Если вы нажмете на эту кнопку, вы увидите, как ваша веб-страница переключается в новый вид.

Затем вы можете использовать выпадающее меню над предварительным просмотром страницы или ручки по бокам предварительного просмотра страницы, чтобы изменить размер окна предварительного просмотра устройства.

HTML Вид

Большая часть вкладки DevTools занимает панель HTML.

Эта панель похожа на супер-усиленный “Просмотр кода”. Она структурирована в соответствии с DOM, с элементами, вложенными внутри их родительских элементов.

Вы увидите, что элемент, который вы “инспектировали” в начале, автоматически выделен серым или синим фоном. Здесь я инспектировал изображение, которое содержится в ссылке. Как и ожидалось, я вижу выделенный тег якоря.

Но где мое изображение? Я могу раскрыть любые элементы DOM, вложенные в тег якоря, щелкнув на треугольник раскрытия рядом с ним. В этом случае стрелка раскрывает тег , который я ожидал найти.

Вы также заметите небольшую панель меню внизу панели HTML.

Это называется “хлебные крошки”, и оно показывает вам все родительские элементы выбранного элемента. Чтобы перейти к одному из этих элементов, просто щелкните по нему.

Стили

Под панелью HTML мы также видим панель, которая показывает любые CSS-правила, применимые к нашему элементу. Это называется панелью Стили, и в данном случае мы видим все правила, которые применяются к тегу якоря, который я инспектировал ранее.

Вы можете включать и выключать правило, наведя на него курсор и щелкнув по флажку рядом с ним.

Вы увидите это изменение, отраженное в предварительном просмотре страницы немедленно. И если вы щелкнете прямо по правилу, вы можете изменить его имя и значение.

Вы также можете искать определенные правила, используя поле поиска Фильтр.

Тем не менее, панель Стили способна на гораздо большее. Ознакомьтесь с документацией Google для полного объяснения множества функций панели Стили.

Модель коробки и вычисленный стиль

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

В данном случае я вижу, что мой элемент имеет основной размер 461 x 209 пикселей. Он не содержит правил отступа, границы или внутреннего отступа, поэтому эти поля пусты.

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

Вы также можете увидеть in situ модель коробки, если наведете курсор на элементы DOM с включенным инструментом “Инспектировать элемент”.

Под моделью коробки находится список всех правил стилей, которые применяются к этому конкретному элементу. Это немного отличается от панели Стили. Она не отображает фактические строки CSS — только эффекты этих правил. Это называется “вычисленный стиль” объекта, и это комбинированный результат вашего CSS.

Наконец, вы можете искать определенные правила, вводя их в поле Фильтр.

Заключение

Если вы часто работаете с веб-страницами, инструмент Инспектор в Chrome стоит того, чтобы его изучить. А другие вкладки в DevTools, такие как Консоль и Сеть, могут быть неоценимы для разработчиков. Есть еще много чего, что мы не можем охватить прямо сейчас, но документация Google сама по себе является исчерпывающей и полезной.