Dum docemus, discimus
— Не отображается, исправляй ошибку!
— А что в консоли?
У любого менеджера был такой разговор с разработчиком. Давайте разберёмся, что такое DevTools и как ими пользоваться. Статья больше для начинающих.
Я уже вскрывал тему в статье о взаимодействии клиента и сервера. Ознакомьтесь с ней, пожалуйста, там больше о сетевых аспектах.
Здесь поговорим о более прикладных вопросах. Начнём с консоли.
Консоль вызывается F12. Если у вас макбук, то Fn+F12.
Вы можете видеть в консоли три ошибки от разных плагинов, хромовских и вордпрессовских:
Разработчики очень часто в процессе отладки выводят туда всякую отладочную информацию о работе кода. Её можно копировать и отправлять им.
Теперь поговорим об элементах DOM. Браузер грузит страницу как раскрывающееся дерево HTML-элементов, которое можно изучить на вкладке «Элементы». Именно она открывается, когда вы щёлкаете правой кнопкой по странице и выбираете «Просмотреть код».
Хинт. Если это сделать, потом кликнуть правой кнопкой мыши по браузерной кнопке перезагрузки страницы и выбрать «Очистка кэша и жёсткая перезагрузка», вы сбросите кэш страницы, это очень важная манипуляция. Когда разраб спрашивает: «Кэш сбрасывал?», нужно делать именно это.
Давайте покажу, как посмотреть стили, применённые к конкретному элементу, например, заголовку блока у меня на главной странице. И что-нибудь поменяем в этом заголовке на горячую.
На видео я открываю «Элементы», при помощи пикера выбираю заголовок блока, докручиваю до стиля высоты линии и меняю его на другие значения. Потом пробую выключить вообще.
Ещё один момент. А как посмотреть, какие стили применяются, когда вы наводите мышь на элемент? Вот так:
Всё, теперь вы анализируете стили, применяемые по ховеру.
И последняя хитрость. Как посмотреть, где именно лежат стили, применённые в данном селекторе:
Как видите, там в тултипе был полный путь к файлу стилей, это стиль плагина гутенверс.
Что ещё можно интересного сделать с консолью.
Консоль позволяет вводить простые команды прямо в браузере. Например, можно ввести localStorage и посмотреть, какие данные сохраняются в браузере для текущего сайта. Это помогает проверить, сохранились ли настройки интерфейса (например, выбранная тема) или убедиться, что данные верно записываются при действиях пользователя.
Всё, в целом, это все манипуляции, которые могут пригодиться менеджеру с инспектором и консолью. Дальше изучайте, как работают HTML-теги и CSS-свойства и всё станет понятнее.
