Используем функционал браузера как Senior-developer

Где проходит почти вся отладка кода, создаваемого Frontend-разработчиками? Конечно, в Google Chrome, популярнейшем браузере с мощным и очень продвинутым инструментарием для работы с кодом — DevTools или «Инструментами разработчика». Перейти к ним можно, вызвав контекстное меню правой клавишей мыши (пункт «Посмотреть код») или сочетанием клавиш «Ctrl+Shift+I».



Расскажем о 5 функциях Chrome DevTools, облегчающих жизнь Frontend-разработчикам.

Увидеть мобильную версию страницы

Работая над интерфейсом приложения или адаптивного сайта, Frontend-разработчику необходимо видеть, как выглядят созданные им страницы на устройствах с экранами разных размеров. В DevTools для этого нужно нажать всего одно сочетание клавиш «Ctrl+Shift+M». А можно поступить еще проще и нажать в левом верхнем углу отладчика иконку «Показать или скрыть панель инструментов устройства» или по-английски «Toggle device toolbar».

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

Редактировать CSS-стили элементов

В процессе работы на страницей можно редактировать CSS-стили элементов интерфейса, не выходя из браузера. Для этого переходим на вкладку «Элементы» или «Element» в Chrome DevTools и выбираем элемент для редактирования (в дереве DOM). Либо можете кликнуть по иконке выбора фрагмента для редактирования слева от кнопки для просмотра мобильной версии страницы, а затем навести курсор на нужный элемент прямо в рабочей области и кликнуть по нему левой клавишей мыши.

Следующим шагом редактируем правила CSS для выделенного элемента на вкладке «Стили» или «Styles» в соседнем окне отладчика. Также здесь можно редактировать, удалять и добавлять CSS-правила для псевдоклассов вроде :focus, :hover, :active.

Проверить верстку на переполнение

При помощи Chrome DevTools легко проверить, как будет выглядеть страница и ее отдельные элементы при добавлении нового контента, не выйдет ли он за границы отведенного ему блока, сохранится ли верстка.

Ведь вы уже знаете, что верстка должна оставаться безупречной даже если меняется размер страницы или шрифтов, добавляется новый текст или изображения, верно?

1. Проверить блок на переполнение текстом легко. Выбираем нужный элемент в дереве DOM, кликаем по нему дважды и вводим текст, который надо добавить. Кликаем один раз в любом месте экрана — готово! Изменения отобразятся на экране.
2. Тестируйте на переполнение и родительские блоки, содержащие несколько дочерних элементов. Для этого дублируйте несколько раз любой из дочерних элементов (пункт «Дублировать элемент» или «Duplicate Element» в его контекстном меню). Если элементы выходят за пределы родительского блока, это нужно исправить.

Повысить доступность сайта

Обратите внимание на раздел Accessibility в инспекторе элементов (активируется при нажатии на иконку «Выбрать элемент на странице для проверки») и проверьте в нем все поля:

• Contrast (контрастность цвета текста и фона) — самая важная метрика для повышения доступности сайта. Google рекомендует делать ее минимум 3,0 а лучше — 4,5 или больше
• Name – текст, который произнесет экранный диктор при озвучке выбранного тега
• Role – тип выбранного тега (ссылка, текст, изображение, форма)
• Keyboard-focusable — зеленая галочка рядом с этим пунктом подскажет, можно ли сфокусироваться на выбранном элементе, используя клавиатуру

Просмотреть подключенные файлы

Чтобы проверить, все ли необходимые файлы подключены к разрабатываемому решению и увидеть их содержимое, используйте вкладку «Источники» или «Sources» в верхнем окне с инструментами разработчика.
Окно вкладки «Источники» разделено на 2 области:

• В левой части виден список всех загруженные ресурсов.
• С правой стороны находится редактор, в котором можно увидеть содержимое подключенных файлов. Тут же можно сразу отредактировать скрипты и стилевые правила. Учтите, что изменения для скриптов надо сохранять через Control/Command+S.

Заключение

Мы рассмотрели всего 5 опций, которые есть в инструментах разработчика браузера Google Chrome. Но в действительности функционал DevTools постоянно развивается и открывает Frontend-разработчикам все новые и новые возможности для создания, отладки и постоянного совершенствования своих IT-продуктов. Советуем как можно глубже изучить возможности браузера Chrome, ведь по факту это один из важнейших рабочих инструментов любого современного Frontend-разработчика, независимо от стека технологий, которые он использует для реализации своих проектов. А если вам недостаточно встроенного функционала DevTools Google Chrome, его всегда можно дополнить и расширить с помощью специальных плагинов.