Сегодня я расскажу, что такое панель разработчика в браузере, зачем она нужна, её возможности. Обзор я буду проводить на примере браузера Microsoft Edge. В других браузерах, особенно в браузерах от Google, расклад не будет сильно отличаться.
Для тех, кто не знал, панель разработчика в браузере, вызывается клавишей F12. Она появится именно на том сайте, на котором вы её вызовете.
Как вы уже догадались, панель находится справа. Сначала нас встречает страница приветствия, в которой написаны новости о последних обновлениях, изменениях и просто какая-то интересная информация.
Мы разберем три полезные функции панели, которые пригодятся веб-разработчику в его деятельности.
Консоль
Чтобы отрыть консоль, нажмите на двойную стрелку около вкладок панели:
В открывшемся меню вкладок, выбираем "консоль". После нажатия на вкладку, у вас должен появится подобный экран:
Для чего нужна консоль? - Это инструмент браузера, позволяющий увидеть, какие ошибки возникали в процессе отображения сайта.
Её действия мы можем увидеть в процессе разработки сайта на JavaScript, давайте разберем пример.
Я создал новый html документ, в котором написал скрипт отображения переменной "x" в консоле:
А теперь посмотрим как в консоле отобразится наша переменная:
Отлично, ошибок в нашем коде нет. А что будет, если мы немного изменим наш код на неправильный:
Убираем кавычки у значения нашей переменной, а это нарушение синтаксиса JS:
В итоге, получаем ошибку в консоле:
Надеюсь, что вы поняли, что консоль нужна для обнаружения ошибок в написание кода вашего сайта.
Элементы
Второй наш инструмент разработчика - это элементы. С помощью этой функции можно открыть исходный код вашего сайта и выбрать любой элемент, узнать о нем информацию, а также посмотреть, как будет выглядеть этот элемент без того или иного стиля.
Это очень удобный инструмент для просмотра кода в браузере. Может пригодится во многих ситуациях.
А еще, с помощью инструмента выбора элементов, возможно посмотреть расположение элемента в коде, наведя курсором мыши на него в самом сайте:
Эмуляция устройства
Это очень полезный инструмент в плане тестирования сайта на адаптивность к различным разрешениям экрана.
С помощью этого устройства можно посмотреть как сайт будет выглядеть на телефонах и планшетах с разными размерами экранов. Согласитесь, это намного лучше, чем постоянно сворачивать экран браузера до минимальных размеров!
На этом краткий обзор панели разработчика в браузере подошел к концу, позже мы подробнее разберем все инструменты, а их достаточное количество и все они полезны для веб-разработки.
Спасибо за внимание, до встречи!
