Консоль разработчика — инструмент, встроенный в браузер, который позволяет отлаживать, тестировать и анализировать веб-приложения. Помогает улучшить производительность и качество кода. В статье рассказываем, как использовать в разных браузерах, перечисляем частые ошибки и как их исправить.
Зачем нужна консоль разработчика
Google Chrome DevTools — это интегрированный в браузер инструмент, предоставляющий фронтендерам средства для отладки, тестирования, анализа кода, что помогает специалистам выполнить работу быстрее и удобнее.
Девтулс полезны для разработчиков, верстальщиков, тестировщиков. С их помощью они могут:
- Прописать разметку, стили, выбрать анимацию прямо в браузере.
- Отследить и исправить ошибки в исходном коде сайта.
- Отладить работу frontend: HTML, CSS, JavaScript.
- Провести тестирование, улучшить пользовательский опыт, настроить мобильную версию.
- Оптимизировать производительность приложения.
- Проверить сетевой трафик.
Для использования DevTools не требуется сверхмощный компьютер. Все работы можно провести в ноутбуке.
Как использовать DevTools
Как применять режим разработчика в browser extensions:
Шаг 1. Откройте браузер, зайдите на веб-страницу, с которой хотите работать.
Шаг 2. Выберит способ, чтобы перейти в панель разработчика:
- Нажмите кнопку F12.
- Используйте сочетание клавиш: Ctrl + Shift + I — для Windows, Command + Option + I — для macOS.
- Нажмите правой кнопкой мыши в любом месте веб-страницы, выберите в меню «Исследовать элемент», «Просмотреть код», Inspect element или «Проверить объект».
- В меню браузера нажмите на три точки, перейдите в «Дополнительные инструменты» — «Инструменты разработчика».
Эти методы помогут открыть режим разработчика в браузерах, которые используют Chrome Apps: Opera, Microsoft Edge, Mozilla, Brave, «Яндекс Браузер».
Шаг 3. Внизу или по бокам страницы откроются дев тулс с вкладками:
- Elements — чтобы изучать и редактировать HTML и CSS страницы. Блок Styles помогает изменить внешний вид элементов.
- Console — увидеть ошибки и предупреждения на веб-странице, запустить скрипт.
- Sources — посмотреть и отладить JavaScript-файлы, подключенные к веб-странице.
- Network— увидеть запросы, сделанные страницей к серверу. Главная функция нетворка — проанализировать время загрузки ресурсов, чтобы оптимизировать процессы.
- Security — определить, безопасна ли страница, какие протоколы шифрования применяются.
- Performance — оценить производительность сайта.
- Memory — запросить отчет, сколько памяти требует страница, включая хромовские расширения.
Полезность Dev Tools для чайников:
- Блок Console позволяет вводить строки на JavaScript и мгновенно видеть результат. Это помогает вносить изменения, оперативно отслеживать их влияние на итог.
- В разделе Elements — Styles можно добавить иные CSS-правила и отыскать проблемные зоны в верстке.
- Блок Styles дает возможность переключать светлую и темную версию страницы, чтобы учесть любые предпочтения пользователей.
Шаг 4. Используйте гугл-инструменты разработчика для улучшения сайта. После окончания работы закройте браузерную консоль, нажав на крестик в правом верхнем углу окна.
Примеры в разных браузерах
От браузера зависит, как открываются девтулс и где находятся.
Google Chrome
Чтобы вызвать консоль в хроме:
- Нажмите F12, или Fn + F12, или Ctrl + Shift + I.
- Кликните на страницы правой кнопкой мыши, выберите «Просмотр кода страницы»
- Перейдите в настройки в правом верхнем углу, выберите «Дополнительные инструменты» — «Инструменты разработчика»
Google Chrome DevTools можно включить снизу, справа, слева окна или разместить в отдельной вкладке. Источник: hermitagemuseum.org
Яндекс.Браузер:
- Кликните на меню в верхнем правом углу, зайдите в «Дополнительно» — «Дополнительные инструменты» — «Инструменты разработчика»
- Нажмите комбинацию Ctrl + Shift + I.
Расширения для фронтендера в Яндекс. Браузере размещаются в правой части окна. Источник: ras.ru
Mozilla Firefox:
- Кликните на меню верхнем углу экрана, нажмите «Дополнительные инструменты» — «Инструменты веб-разработчика».
- Используйте горячие клавиши Ctrl+Shift+I — для Windows или Command+option+I — для Mac.
Режим фронтендера в Firefox можно открыть снизу, справа, слева или разместить в отдельном окне. Источник: kunstkamera.ru
Opera:
- Наведите курсор на значок Opera, кликните «Разработчик» — «Инструменты разработчика».
- Нажмите сочетание клавиш Ctrl+Shift+I — для Windows или Command+option+I — для Mac.
Dev Tools в браузере Opera размещаются в правой части экрана. Источник: ethnomuseum.ru
Microsoft Edge:
- Выберите «Настройки и другое» — «Дополнительные инструменты» — «Инструменты разработчика».
- Примените клавиши Ctrl+Shift+ I или Command+option+I для Mac.
Режим фронтендера в Microsoft Edge открывается в правой части окна. Источник: synergy.ru
Safari:
- Кликните на меню в верхнем левом углу.
- Выберите «Настройки» — «Разработка» — «Показать веб-инспектор».
- Используйте горячие клавиши Command + option+ I.
Режим разработчика открывается в отдельном окне.
Типичные ошибки и как их исправить
Ошибки веб-страницы фронтендер видит в панели Console. Они отображаются красным цветом. Типичные проблемы:
- Uncaught TypeError: Cannot read property. Появляется, когда фронтендер пытается прочитать свойства неопределенного или нулевого предмета. В Safari отображается так — TypeError: ‘undefined' is not an object (evaluating) или TypeError: null is not an object (evaluating).
- (unknown): Script error. Показывает, что найдены неточности в скрипте.
- TypeError: ‘undefined' is not a function. В Chrome обозначает ненайденную функцию.
- Uncaught RangeError: Maximum call stack. В Chrome информирует, что превышен максимально допустимый размер стека.
- TypeError: Cannot read property ‘length'. Показывает, что нельзя прочитать свойство.
