Консоль разработчика – инструмент, встроенный в браузер, который позволяет отлаживать, тестировать и анализировать веб-приложения. Помогает улучшить производительность и качество кода. В статье рассказываем, как использовать в разных браузерах, перечисляем частые ошибки и как их исправить.
Зачем нужна консоль разработчика
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’. Показывает, что нельзя прочитать свойство.
