Инструменты веб-разработчика (DevTools) — это встроенные в современные браузеры средства для отладки и анализа веб-страницы. 3 Они позволяют анализировать, отлаживать и оптимизировать веб-страницы. 2

Инструменты DevTools состоят из нескольких панелей, каждая из которых выполняет определённые функции: 2

• Elements. 24 Позволяет просматривать и редактировать элементы DOM-дерева страницы. 4 Работает так: пользователь наводит курсор на строчку кода, а браузер подсвечивает элемент страницы, за который он отвечает. 4
• Console. 24 Консоль используется для выполнения JavaScript-кода и отладки. 2 Здесь можно видеть ошибки, предупреждения и выводить сообщения для отладки. 2 Консоль поддерживает различные команды и функции, которые помогают в разработке. 2
• Network. 24 Показывает все сетевые запросы, сделанные страницей, включая загрузку ресурсов, таких как изображения, стили и скрипты. 2 Это помогает анализировать производительность и выявлять проблемы с загрузкой. 2
• Performance. 24 Предоставляет визуализацию различных этапов загрузки и рендеринга страницы. 2 Можно видеть, сколько времени занимает каждый этап и какие ресурсы потребляют больше всего времени. 2
• Memory. 14 Используется для проверки использования памяти веб-страницы и поиска потенциальных утечек памяти. 1 По умолчанию показывает, сколько памяти потребляет страница, но можно запросить детальный отчёт по каждому элементу. 4
• Security. 14 Отображает информацию о безопасности веб-страницы, то есть проверяет допустимый HTTPS, используемый сервером. 1 Также предоставляет сведения о сертификате, шифровании и аутентификации различных источников ресурсов, используемых веб-страницей. 1

Хотя DevTools есть в каждом браузере, инструменты могут немного отличаться по функциональности. 3