В каждый современный браузер встроены инструменты разработчика — они позволяют быстро отловить и исправить ошибки в разметке или в коде. С их помощью можно узнать, как построилось DOM-дерево, какие теги и атрибуты есть на странице, почему не подгрузились шрифты и многое другое.
Для тестировщика, который тестирует web так-же есть много полезных функций, вы можете увидеть элементы веб страницы, увидеть их свойства(цвет, шрифт), посмотреть есть ли ошибки в консоли, увидеть сетевые запросы( что, куда, как ушло), поработать с куки и кэш, ну и очень полезная функция это режим эмуляции - позволяет увидеть как будет выглядеть веб в мобильной версии сайта.
Как открыть инструменты разработчика
OS X — Ctrl+Cmd+I.
Windows — F12.
Linux — Ctrl+Shift+I.
Вкладка Elements
отслеживание элементов и их свойств на странице. Можно редактировать как свойства так и html код, смотреть что изменилось. Проверка верстки (например цвет кнопок, расположение блоков). Так же удобно использовать для поиска селекторов для элементов в автотестах.
Вкладка Console
В консоли отображается информация об ошибках в коде, а ещё туда можно ввести команду, и она выполнится. Если на странице не подгрузились шрифты, картинки или стили, то сообщения об ошибках выводятся именно сюда.
Вкладка Network
В Network можно увидеть все запросы которые были отправлены при загрузке страницы, статус ответа, тело запроса, сам ответ, вообщем иногда можно посомтреть прямо в браузере что и куда ушло. Так-же отображается время затраченное на загрузку страницы.
Проверка вёрстки на мобильных
Режим эмуляции включается по нажатию на кнопку с изображением смартфона в девтулзе открытом. Предоставляет возможно выбора различных мобильных устройств с различными расширениями экрана и проверить мобильную верстку, проверить как работает адаптивная верстка при разной ширине экрана.