5 343 
Оставить комментарий
Сохранить статью:
Что это? Консоль разработчика – это инструмент, позволяющий взаимодействовать с тем или иным объектом напрямую. Такие бывают в играх, но чаще всего речь идет про интерфейс в браузере.
Зачем нужна? С помощью данной консоли можно исправить различные ошибки сайта, оценить изменения и протестировать гипотезы. Одна проблема – интерфейс очень непростой, и самостоятельно в нем разобраться проблематично.
В статье рассказывается:
- Понятие консоли разработчика
- Как включить консоль разработчика в разных браузерах
- Вкладки и панели консоли разработчика
- Отладка ошибок с помощью консоли разработчика
-
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.Бесплатно от Geekbrains
Понятие консоли разработчика
Консолью разработчика в браузере, будь это Google Chrome, Mozilla Firefox, Yandex или любой другой, называется сервис, с помощью которого пользователь может:
- изучить структуру и содержимое веб-страницы;
- найти и устранить ошибки или неполадки в работе сайта;
- ознакомиться с различными показателями и, при наличии определенных навыков, произвести некоторые полезные действия со страницей.
Данный инструмент позволяет работать с сайтом прямо в браузере, что очень удобно, потому как пользователю предоставляется множество преимуществ, например:
- он видит веб-страницу именно такой, какой она является в данный момент времени;
- он оперативно корректирует работу страницы без использования сторонних ресурсов и вспомогательных средств;
- после внесения изменений он сразу может протестировать их работу в браузере.
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Скачивайте и используйте уже сегодня:
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
Пользу функциональных возможностей консоли разработчика по достоинству оценят как IT-специалисты, так и представители других профессий, в частности, дизайнеры, маркетологи, верстальщики и т.п. Главное — знать, как правильно использовать данный инструмент.
Очевидно, что для привлечения внимания пользователей к интерфейсу любой программы используются такие важнейшие характеристики, как удобство, простота, примечательный внешний вид. Но ни один программист на этом не остановится, а продолжит анализировать и совершенствовать уже имеющиеся элементы. Консоль разработчика – это одно из наиболее полезных универсальных средств управления объектами.
При первом знакомстве с данным инструментом можно немного растеряться от многообразия элементов и панелей, особенно учитывая еще и тот факт, что интерфейс представлен в англоязычном варианте. Однако все не так сложно, как кажется на первый взгляд. Через какое-то время станут очевидны порядок и логика представления сведений.
Как включить консоль разработчика в разных браузерах
Google Chrome
Открываем страницу bug.html. На ней есть ошибка в скрипте, которую обычный пользователь увидеть не сможет. Найти ее поможет Google консоль разработчика. Вот как это работает:
Нажимаем клавишу F12 или комбинацию клавиш Cmd+Opt+J при использовании Mac.
Автоматически открывается соответствующая вкладка Console.
В зависимости от того, какая версия Chrome установлена, будет представлен внешний вид инструментов. Как правило, значительных различий нет, однако некоторые характерные особенности все же имеются.
При открытии консоли разработчика пользователь сразу увидит сообщение о наличии ошибки, выделенное красным цветом. Например, о том, что в скрипте содержится неизвестная команда.
Справа имеется ссылка на исходный код bug.html:12 с указанием номера строки, в которой и есть место ошибки.
Ниже под информационным сообщением можно увидеть символ >, представленный в синем цвете. Он направляет пользователя к командной строке, в которой производится редактирование и запуск команд JavaScript нажатием кнопки Enter. Выполнение происходит мгновенно.
Скачать файлДля переноса строки необходимо использовать сочетание клавиш Shift+Enter, это позволяет применять более длинный код JavaScript.
Firefox, Edge и другие
Открыть консоль разработчика практически в каждом браузере можно с помощью F12.
Схожесть инструментов дает возможность пользователю освоить принцип работы консоли одного обозревателя, а в других уже действовать по аналогии.
Safari
Safari – это браузер, который не поддерживается Windows или Linux, а работает лишь на операционной системе Mac. Консоль разработчика в нем немного отличается от всех остальных. Для ее запуска, прежде всего, открываем «Меню разработки» (Developer menu).
Далее переходим в «Настройки» (Preferences) и находим раздел «Продвинутые» (Advanced). Опустившись в самый низ, мы увидим соответствующий флажок.
Используя сочетание клавиш Cmd+Opt+C, запускаем работу консоли. Особое внимание советуем уделить относительно недавно появившейся области меню, именуемой «Разработка» (Develop). Это раздел, содержащий в себе множество полезных настроек и команд.
Вкладки и панели консоли разработчика
Панель Elements
В ней представлено дерево элементов сайта, что позволяет ознакомиться с его внутренней структурой более тщательно. Здесь визуально отображены стандартные элементы страницы, такие как <head>, <body> и скрипты.
Данный инструмент предоставляет гораздо больше информации, чем может увидеть пользователь при открытии кода с помощью клавиш CTRL + U. Это объясняется тем, что в нем содержится только базовый HTML-документ, в то время как при работе с консолью разработчика движок сайта производит автоматическую подгрузку большинства элементов.
Не растеряться в многообразии представленной информации можно с помощью цветных подсказок. Так, объявленные элементы обозначены фиолетовым цветом, их свойства и характеристики – коричневым, содержание – синим, комментарии разработчика – зеленым. Подчеркнутые элементы – это ссылки.
Раздел Elements наиболее полезен для работы маркетологов.
Панель Console
Она является копией панели, расположенной в нижней части консоли разработчика. Когда пользователь выбирает ее из основного раздела, то получает возможность изучить структуру и работу сайта, развернув консоль на все рабочее пространство.
В режиме реального времени он будет видеть происходящие на странице события и возникающие ошибки. Путем их ручной либо автоматической регистрации можно оперативно вносить коррективы в работу сайта, улучшая его производительность в целом и отдельных элементов в частности.
Панель Sources
Данный инструмент позволяет наглядно отобразить взаимодействие сайта с другими ресурсами, внешними и внутренними. Например, можно увидеть, как связана работа страницы с API, виджетами социальных сетей или счетчиками аналитики.
Панель Network
Работая с этой панелью, пользователь сможет проанализировать влияние элементов сайта и его модулей на загрузку сетевого соединения. Консоль разработчика предоставляет возможность ознакомиться с записями сетевого журнала, которые помогут понять, какие элементы страницы нуждаются в оптимизации.
Пользователь видит запросы, поступающие на сервер, и ответы по ним. Исходя из этих наблюдений, определяет, какие ресурсы обеспечивают максимальную нагрузку сети. Вся представленная информация упорядочена: каждому запросу присваивается тип и статус, есть сведения об инициаторе, объеме и скорости передачи данных.
Панель Performance
Панель нужна, чтобы можно было эффективно отследить этапы взаимодействия пользователей со страницей. С помощью ее инструментов производится оценка времени, которое требуется для работы с элементами сайта.
Для этого нужно активировать режим записи и выполнить все требующиеся действия на странице. После этого станет доступен просмотр, позволяющий изучить все этапы процесса: сколько времени занимает загрузка того или иного элемента, какие ресурсы и в каком объеме при этом используются и т.д.
Эта опция поможет определить отклонения полученных значений от оптимальных и произвести оптимизацию сайта или его отдельных частей.
Панель Memory
Она используется для управления памятью ресурса и позволяет определить, какие из частей сайта или приложения более всего нагружают систему. С помощью инструмента создается снимок памяти, так называемый «снэпшот», содержимое которого наглядно демонстрирует работу той или иной страницы.
ТОП-100 площадок для поиска работы от GeekBrains
20 профессий 2023 года, с доходом от 150 000 рублей
Чек-лист «Как успешно пройти собеседование»
Панель Application
Не смотря на свое название, эта панель помогает в работе не только с приложениями, но и с различными элементами загрузки, такими как база данных, кэш или файлы cookie.
Панель Security
Содержит сведения о степени надежности сайта, включая данные по защищенным соединениям HTTPS. Пользователю, работающему с данным инструментом, предоставлены доступы к сертификатам безопасности.
Панель Lighthouse
Прежнее название панели – Audits, а направленность действия – проверка качества страниц. Консоль разработчика анализирует сайт в автоматическом режиме, учитывая его представление не только для персонального компьютера, но и мобильных устройств. По завершении дает рекомендации по повышению качества отдельных аспектов работы.
Вкладка Styles
Вкладка нужна при работе с файлами стилей CSS, которые, в свою очередь, используются для придания уникального вида внешним элементам сайта. Styles наглядно демонстрирует выбранные стили и отражает структуру их применения.
Вкладка Computed
Ее предназначение – отображение модели выбранного элемента. При этом вкладка повторяет визуальное представление с предыдущей, а перечень стилей представлен списком.
Вкладка Layout
На ней содержатся элементы сайта типа CSS Grid в виде двухмерной сетки.
Вкладка Event Listeners
Показывает все события, связанные с определенным элементом сайта. Сюда относятся: наведение курсора мыши, клик, скроллинг, загрузка, изменения и пр. Сбор этих сведений осуществляется с помощью счетчиков аналитики или сервиса работы с тегами, например, Google Tag Manager. Вкладка позволяет выяснить, целесообразна ли настройка тегов, потому как показывает наличие либо отсутствие необходимого обработчика на выбранном элементе страницы.
Вкладка DOM Breakpoints
Данная вкладка консоли разработчика является эффективным вспомогательным средством для пользователя, который устанавливает breakpoint (точку остановки срабатывания кода сайта) на нужном элементе. Проще говоря, с помощью DOM Breakpoints можно проверить внешний вид и работу сайта после внесенных изменений.
Вкладка Properties
В ней видны все свойства определенного элемента.
Вкладка Accessibility
Применяется в основном только разработчиками, целью которых становится просмотр дерева уровней доступа для конкретного элемента.
Отладка ошибок с помощью консоли разработчика
Консоль разработчика в браузере оповещает пользователя об имеющихся ошибках, показывая соответствующее уведомление во вкладке Console, выглядящее как текстовая строка красного цвета. Ниже перечислены наиболее часто возникающие ошибки в Google Chrome, Safari и Internet Explorer:
- Uncaught TypeError: Cannot read property. Применима для Chrome и может произойти при вызове метода или чтении свойства в рамках определенного объекта.
- TypeError: ‘undefined’ is not an object (evaluating). Ошибка, аналогичная той, что и в предыдущем пункте, только характерна она для браузера Safari.
- TypeError: null is not an object (evaluating). Отражает ошибки в Safari при вызове метода либо чтении свойства для нулевого объекта.
- (unknown): Script error. Ошибка скрипта.
- TypeError: ‘undefined’ is not a function. Служит указанием на неопределенную функцию (Chrome).
- Uncaught RangeError: Maximum call stack. Сообщение в браузере Chrome сигнализирует о превышении максимально допустимого размера стека.
- TypeError: Cannot read property ‘length’. Нечитаемое свойство.
- Uncaught TypeError: Cannot set property. Ошибка получения доступа скрипта к неопределенной переменной.
- ReferenceError: event is not defined. Ошибка получения доступа к переменной, которая не является частью выбранной области.
Не стоит думать, что консоль разработчика – это сервис, необходимый исключительно профессионалам. На самом деле даже новичок может найти в ней массу интересного и полезного. Допустим, перед вами стоит необходимость просмотреть мобильную версию сайта или узнать, какой шрифт на нем применяется. Или вам нужно изучить его содержимое и проанализировать потребление памяти.
Разберем 11 самых важных жизненных вопросов
Только до 
Эксклюзивные лекции по основам программирования
