Обзор инструментов разработчика браузера

Браузерные DevTools - это фундаментальный элемент в наборе инструментов внешнего интерфейса разработчика, и они доступны во всех современных браузерах. Откройте для себя основы того, что они могут для вас сделать

Инструменты разработчика для браузера

Я не думаю, что было время, когда веб-сайты и веб-приложения было легко создавать, что касается серверных технологий, но разработка на стороне клиента, безусловно, была проще, чем сейчас, вообще говоря.

Как только вы выяснили разницу между Internet Explored и Netscape Navigator и избежали проприетарных тегов и технологий, все, что вам нужно было использовать, - это HTML, а затем CSS.

JavaScriptбыла технологией для создания диалоговых окон и многого другого, но определенно не была такой распространенной, как сегодня.

Хотя многие веб-страницы по-прежнему представляют собой простой HTML + CSS, как эта страница, многие другие веб-сайты представляют собой настоящие приложения, которые запускаются в браузере.

Просто предоставить источник страницы, как когда-то делал браузер, было недостаточно.

Браузер должен был предоставить гораздо больше информации о том, как они отображали страницу и что она сейчас делает, поэтому они представилифункция для разработчиков: ихинструменты разработчика.

Все браузеры разные, поэтому их инструменты разработки немного отличаются. На момент написания моих любимых инструментов разработчика предоставляет Chrome, и именно об этом браузере мы поговорим здесь, хотя также у Firefox и Edge есть отличные инструменты.


HTML-структура и CSS

Самая простая и очень распространенная форма использования - это проверка содержимого веб-страницы. Когда вы открываете DevTools, это панель элементов, которую вы видите:

Elements panel of the Browser Dev Tools

Панель HTML

Слева HTML-код, из которого состоит страница.

При наведении курсора на элементы на панели HTML выделяется элемент на странице, а щелчок по первому значку на панели инструментов позволяет щелкнуть элемент на странице и проанализировать его в инспекторе.

Вы можете перетаскивать элементы в инспекторе, чтобы в реальном времени изменить их расположение на странице.

Панель стилей CSS

Справа - стили CSS, которые применяются к текущему выбранному элементу.

В дополнение к редактированию и отключению свойств вы можете добавить новое свойство CSS с любой желаемой целью, щелкнув значок+значок.

Также вы можете активировать состояние для выбранного элемента, чтобы вы могли видеть применяемые стили, когда он активен, зависает, находится в фокусе.

Внизукоробчатая модельвыбранного элемента поможет вам быстро определить поля, отступы, границу и размеры:

Box model in the CSS styles panel


Консоль

Второй по важности элемент DevTools - это консоль.

Консоль можно увидеть на отдельной панели или нажавEscна панели «Элементы» он появится внизу.

Консоль служит в основном двум целям:выполнение пользовательского JavaScriptиОтчет об ошибках.

Выполнение пользовательского JavaScript

Внизу консоли есть мигающий курсор. Вы можете ввести туда любой код JavaScript, и он будет незамедлительно выполнен. В качестве примера попробуйте запустить:

alert('test')

Специальный идентификатор$0позволяет ссылаться на элемент, выбранный в данный момент в инспекторе элементов. Если вы хотите ссылаться на это как на селектор jQuery, используйте$($0).

Вы можете написать более одной строки с помощьюshift-enter. Нажатие Enter в конце скрипта запускает его.

Отчет об ошибках

Здесь перечислены все ошибки, предупреждения или информация, возникающие при рендеринге страницы и последующем выполнении JavaScript.

Например, не удалось загрузить ресурс из сети с информацией оПочему, сообщается в консоли.

Console Error Reporting

В этом случае, щелкнув URL-адрес ресурса, вы попадете на панель «Сеть» с дополнительной информацией, которую вы можете использовать для определения причины проблемы.

Вы можете фильтровать эти сообщения по уровню (Ошибка / Предупреждение / Информация), а также фильтровать их по содержанию.

Эти сообщения могут быть созданы пользователем в вашем собственном JavaScript с помощьюКонсольный API:

console.log('Some info message')
console.warn('Some warning message')
console.error('Some error message')

Эмулятор

В Chrome DevTools встроен очень полезный эмулятор устройства, который вы можете использовать для визуализации своей страницы на любом устройстве любого размера.

The device emulator

Вы можете выбрать из предустановок самые популярные мобильные устройства, включая iPhone, iPad, устройства Android и многое другое, или самостоятельно указать размеры в пикселях и разрешение экрана (1x, 2x retina, 3x retina HD).

На этой же панели вы можете настроитьрегулирование сетидля этой конкретной вкладки Chrome, чтобы имитировать низкоскоростное соединение и посмотреть, как загружается страница, а такжепоказать медиа-запросы»Показывает, как медиа-запросы изменяют CSS страницы.


Сетевая панель

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

The network panel

На мгновение на странице показано:

  • панель инструментов, где вы можете настроить некоторые параметры и фильтры
  • график загрузки страницы в целом
  • каждый запрос, с HTTP-методом, кодом ответа, размером и другими деталями
  • нижний колонтитул со сводкой общего количества запросов, общим размером страницы и некоторыми указателями времени.

Очень полезная опция на панели инструментов -сохранить журнал. Включив его, вы можете перейти на другую страницу, и журналы не будут очищены.

Еще один очень полезный инструмент для отслеживания времени загрузки - этоотключить кеш. Это также можно включить глобально в настройках DevTools, чтобы всегда отключать кеш, когда DevTools открыт.

При нажатии на конкретный запрос в списке отображается панель сведений с отчетом HTTP-заголовков:

The HTTP headers report in the network panel

И разбивка по времени загрузки:

The loading time breakdown


Отладчик JavaScript

Если вы щелкнете по сообщению об ошибке в консоли DevTools, откроется вкладка «Источники», и вы не только укажете файл и строку, в которой произошла ошибка, но и сможете использовать отладчик JavaScript.

The Javascript debugger

Это полнофункциональный отладчик. Вы можете устанавливать точки останова, смотреть переменные и слушатьДОМменяется или ломается по конкретнымXHR(AJAX) сетевые запросы или прослушиватели событий.


Применение и хранение

На вкладке «Приложение» содержится много информации о том, какая информация хранится в браузере относительно вашего веб-сайта.

Application and storage

Место хранения

Вы получаете доступ к подробным отчетам и инструментам для взаимодействия с хранилищем приложения:

и вы можете быстро стереть любую информацию, чтобы начать с чистого листа.

Заявление

На этой вкладке также есть инструменты для проверки и отладки прогрессивных веб-приложений.

Нажмитеманифестдля получения информации о манифесте веб-приложения, который позволяет мобильным пользователям добавлять приложение в свой дом и имитировать события «добавить на рабочий стол».

Сервисные работникипозволяют вам проверять ваших работников службы приложений. Если вы не знаете, что такое сервис-воркеры, короче говоря, они представляют собой фундаментальную технологию, которая поддерживает современные веб-приложения, предоставляя такие функции, как уведомление, возможность работы в автономном режиме и синхронизация между устройствами.


Вкладка Безопасность

Вкладка «Безопасность» предоставляет вам всю информацию, имеющуюся у браузера в отношении безопасности подключения к веб-сайту.

The Security Tab

Если есть какие-либо проблемы с HTTPS-соединением, если сайт обслуживается через TLS, он предоставит вам дополнительную информацию о том, что их вызывает.


Аудит

Вкладка «Аудит» поможет вам найти и решить некоторые проблемы, связанные с производительностью и в целом качеством работы пользователей при доступе к вашему веб-сайту.

В зависимости от типа веб-сайта вы можете проводить различные виды аудитов:

Audits by Lighthouse

Аудит проводитсяМаяк, автоматизированный инструмент проверки качества веб-сайтов с открытым исходным кодом. Для запуска требуется некоторое время, после чего вы получите очень хороший отчет с ключевыми действиями, которые нужно проверить.

Lighthouse audit report


Если вы хотите узнать больше о Chrome DevTools, ознакомьтесь с этимСписок советов по Chrome DevTools😀


Больше руководств по инструментам разработчика: