От автора: на пути к тому, чтобы стать мастером CSS, вам нужно знать, как делается отладка и оптимизация CSS. Как вы диагностируете и устраняете проблемы с рендерингом? Как вы обеспечиваете, чтобы CSS не вызывал проблем с производительностью для конечных пользователей? И как вы обеспечиваете качество кода?
Знание того, какие инструменты использовать, поможет вам обеспечить, чтобы front-end работал оптимально. В этой статье мы рассмотрим браузерные инструменты для разработчиков Chrome, Safari, Firefox и Microsoft Edge.
Инструменты для разработчиков на базе браузера
Большинство настольных браузеров включают функцию инспекции элементов, которую вы можете использовать для отладки CSS. Активировать эту опцию вы можете, кликнув правой кнопкой мыши и выбрав пункт «Просмотреть элемент». Пользователи Mac также могут инспектировать элемент, кликнув на нем, удерживая клавишу Ctrl. На приведенном ниже рисунке показано, что вы можете видеть в Firefox Developer Edition.
Инструменты для разработчиков Firefox Developer Edition
В Firefox, Chrome и Safari вы также можете нажать Ctrl + Shift + I (Windows / Linux) или Cmd + Option + I (macOS), чтобы открыть панель инструментов разработчика. На приведенном ниже рисунке представлены инструменты для разработчиков Chrome.
Инструменты для разработчиков Chrome
В Microsoft Edge вы можете открыть инструменты для разработчиков, нажав клавишу F12, как показано ниже.
Инструменты для разработчиков Microsoft Edge
Вы также можете открыть инструменты для разработчиков каждого браузера, используя меню приложения:
Microsoft Edge: Инструменты > Инструменты для разработчиков
Firefox: Инструменты > Веб-разработчик
Chrome: Вид > Разработчикам
Safari: Разработка > Показать веб-инспектор
В Safari вам может потребоваться сначала включить меню «Разработка», перейдя Safari > Настройки > Дополнительно и установив флажок «Показать меню» в строке меню. Ниже приведено представление для инструментов разработчика Safari.
Инструменты для разработчиков Safari 11
После открытия интерфейса инструментов для разработчиков вам может понадобиться выбрать нужную панель:
Microsoft Edge: Проводник DOM
Firefox: Инспектор
Chrome: Элементы
Safari: Элементы
Вы поймете, что открыли нужную панель, когда вы увидите HTML с одной стороны панели, а правила CSS — с другой.
Примечание. Разметка, которую вы увидите в панели HTML, является представлением DOM. Оно генерируется, когда браузер завершает анализ документа и может отличаться от исходной разметки. Использовав «Просмотр исходного кола» вы можете увидеть исходную разметку, но имейте в виду, что для приложений JavaScript такой исходной разметки может не быть.
Использование панели стилей
Иногда элемент не выглядит так, как ожидалось. Возможно, не применилось типографическое изменение, или отступ вокруг абзаца меньше, чем вы хотели. Вы можете определить, какие правила влияют на элемент, используя панель веб-инспектора «Стили».
Панель «Стили» организована в различных браузерах вполне согласовано. В первую очередь перечисляются стандартные стили, если они есть. Это стили, заданные с помощью атрибута style HTML, будь то автором CSS или программно с помощью скриптов.
За списком правил стилей, применяемых автором CSS следуют встроенные стили. Стили в этом списке сгруппированы по медиа-запросу и / или имени файла.
Авторские правила стилей предшествуют стилям агента пользователя. Стилями агента пользователя являются стили браузера по умолчанию. Они также оказывают влияние на внешний вид вашего сайта. (В Firefox вам может потребоваться выбрать параметр «Показать параметры браузера», чтобы просмотреть стили агента пользователя. Этот параметр можно найти в панели «Параметры панели инструментов».)
Свойства и значения сгруппированы по селектору. Рядом с каждым свойством установлен флажок, позволяющий включать или отключать определенные правила. Нажав на свойство или значение, вы можете изменить его, чтобы избежать необходимости редактировать, сохранять и перезагружать код.
Определение проблем каскада и наследования
Когда вы проверяете стили, вы можете заметить, что некоторые свойства вычеркнуты. Эти свойства были отменены либо правилом каскада, либо конфликтующим правилом, либо более специфичным селектором, как показано ниже.
Определение пар свойств и значений, которые были заменены другим объявлением
На изображении выше цвет фона, границы и размер шрифта блока [type = button] отображаются перечеркнутыми. Эти объявления были переопределены теми, что находятся в блоке .close, который является приритетным для [type = button] в нашем CSS.
Определение недействительных свойств и значений
Вы также можете использовать инспектор элементов для обнаружения недействительных или неподдерживаемых свойств и значений свойств. В Chromium-браузерах неверные правила CSS отображаются перечеркнутыми, а рядом выводится иконка предупреждения:
Определение недопустимого значения свойства CSS с помощью Chrome
Firefox также вычеркивает недействительные или неподдерживаемые свойства и значения. Firefox Developer Edition также использует иконку предупреждения, как показано ниже. Стандартный Firefox отображает ошибки аналогично, но не включает значок предупреждения.
Как Firefox Developer Edition отображает недопустимые свойства и значения
На скриншоте ниже в Safari перечеркнуты красной линией и выделены желтым фоном и иконкой предупреждения неподдерживаемые правила.
Недопустимое значение свойства CSS в Safari
Microsoft Edge вместо этого использует для указания неподдерживаемых свойств или значений волнистое подчеркивание.
Неподтвержденное значение свойства CSS в Microsoft Edge
Когда речь идет об основных конфликтах отладки и наследования, какой бы браузер вы ни выбрали, это не имеет значения. Однако рекомендую вам ознакомиться со всеми ними для тех редких случаях, когда вам нужно диагностировать проблему, специфичную для браузера.
Отладка адаптивных макетов
Лучше всего проводить тестирование на устройстве. Однако во время разработки полезно имитировать мобильные устройства с помощью настольного браузера. Все основные настольные браузеры включают режим адаптивной отладки.
Chrome
Chrome в инструментах для разработчиков предлагает функцию панели инструментов устройства. Чтобы использовать ее, кликните иконку устройства (на фото ниже) в верхнем левом углу рядом с иконкой «Выбрать элемент».
Иконка режима адаптивного дизайна Chrome
Режим устройства позволяет имитировать несколько видов устройств Android и iOS, включая более старые устройства, такие как iPhone 5 и Galaxy S5. Режим устройства также включает функцию дросселирования сети для приближения к разным скоростям соединения и возможность имитировать оффлайн режим.
Firefox
В Firefox аналогичный режим называется Режимом адаптивного дизайна. Его иконка напоминает ранние iPod. Вы найдете ее в правой части экрана в панели инструментов для разработчиков, как показано ниже.
Иконка режима адаптивного дизайна Firefox
В адаптивном режиме вы можете переключаться между портретной и альбомной ориентациями, имитировать события касания и делать скриншоты. Подобно Chrome, Firefox также позволяет разработчикам моделировать медленные соединения посредством дросселирования.
Microsoft Edge
Microsoft Edge позволяет имитировать мобильные устройства на Windows, такие как вкладка Surface — для этого используется вкладка «Эмуляция». Выберите «Телефон на Windows» в меню «Профиль браузера», как показано ниже.
SitePoint.com с использованием режима эмуляции устройства Microsoft Edge
В дополнение к выбору ориентации и разрешения режим эмуляции позволяет тестировать функции геолокации. Однако вы не можете использовать режим эмуляции для имитации условий различных сетевых соединений.
Safari
Режим адаптивного дизайна Safari находится в инструментах разработчиков. Он похож на режим эмуляции Firefox, но добавляет возможность имитировать iOS-устройства, как показано ниже.
SitePoint.com при просмотре с использованием режима адаптивного дизайна Safari
Чтобы войти в режим адаптивного дизайна Safari, выберите Разработка > Войти в режим адаптивного дизайна или Cmd + Ctrl + R.
Автор: Tiffany Brown
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.