Как использовать инструменты разработчика Chrome для улучшения вашего сайта WordPress

Инструменты разработчика Chrome (DevTools) — это удивительный набор инструментов для веб-разработки и отладки для Google Chrome. DevTools предоставляют доступ к элементам, которые создают веб-страницы. Вы можете использовать DevTools для устранения проблем с макетом, просмотра и изменения CSS, установки точек останова JavaScript, проверки кода на предмет оптимизации и многого другого. DevTools бесплатны и уже встроены в ваш браузер Chrome. Так что если у вас есть Chrome, то они у вас уже есть.

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

Открытие инструментов

Есть несколько способов открыть инструменты:

1. Откройте меню Chrome, выберите «Инструменты», а затем выберите «Инструменты разработчика».
2. Щелкните правой кнопкой мыши любой элемент на экране и выберите «Проверить элемент» (мой предпочтительный метод).
3. Ctrl + Shift + I (для ПК) | Cmd + Opt + I (для Mac)

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

Окно инструментов содержит две панели. Они оба содержат инструменты, которые можно использовать вместе. Вот посмотрите на инструменты.

Первая содержит 8 групп инструментов. Инструменты включают в себя:

• Элементы
• Сеть
• Источники
• Лента новостей
• Профили
• Ресурсы
• Аудиты
• Приставка

Второй раздел содержит:

• Стили
• Вычислено
• Слушатели событий
• DOM (объектная модель документа) Точки останова
• Характеристики

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

Элементы

Эта панель показывает вам дерево DOM, которое представляет HTML-элементы вашей страницы, и позволяет вам просматривать или редактировать любой из элементов. Вы можете видеть настройки CSS в режиме реального времени.

Вы можете открыть и свернуть любую из панелей, чтобы упростить просмотр и навигацию, нажав на узлы (они выглядят как стрелки или треугольники). Представление дерева DOM показывает текущее состояние дерева, а не исходный HTML (например, он мог быть изменен с помощью JavaScript).

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

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

В нижнем колонтитуле вы увидите «хлебные крошки», чтобы при необходимости можно было вернуться назад. Вы можете редактировать любой из элементов, просто щелкнув их и введя свои изменения. Когда вы нажмете Enter, вы увидите, что изменения произошли.

Например, это изображение в настоящее время имеет ширину 600 пикселей. Я могу выбрать ширину, ввести новое значение и нажать Enter.

Изображение немедленно изменится на новый размер.

Чтобы изменить стиль шрифта, просто выберите шрифт и выберите то, что вы хотите изменить, в окне стилей справа.

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

Я перемещаю последние комментарии над последними сообщениями, просто перетаскивая div.

Щелчок правой кнопкой мыши дает вам новый набор функций. Вы можете видеть различные состояния элементов, изменять их как HTML, устанавливать разрывы, копировать путь CSS и многое другое. Вы также можете щелкнуть правой кнопкой мыши и удалить узел. Это так просто, что почти страшно.

Я использовал этот инструмент для поиска размеров изображений и проверки фрагментов кода.

Сеть

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

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

Вы можете просмотреть подробную информацию о ресурсах. Подробности включают:

• Заголовки HTTP-запроса и ответа — здесь отображается URL-адрес запроса, метод HTTP, коды состояния ответа, а также перечислены заголовки HTTP-запроса и ответа с их значениями и параметрами строки запроса.
• Предварительный просмотр ресурсов — показывает предварительный просмотр изображений и ресурсов JSON.
• Ответ HTTP — показывает неформатированное содержимое ресурса.
• Имена и значения файлов cookie — это показывает файлы cookie, которые передаются в заголовках HTTP-запроса и ответа ресурса, а также очищает файлы cookie.
• Сообщения WebSocket — здесь отображаются сообщения, отправленные или полученные через соединение WebSocket.
• Время сети ресурса — это показывает график времени, затрачиваемого на фазы сети, которые участвуют в загрузке ресурса.

Представление «водопад» — отличный способ увидеть время, необходимое для загрузки каждого элемента с начала запроса до доставки последнего байта элемента. Увидев, какие элементы занимают больше всего времени, вы сможете лучше понять, где нужно внести коррективы.

Вы можете сохранить сетевые данные для последующего анализа.

Источники

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

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

Лента новостей

Панель «Временная шкала» показывает, где время затрачивается на загрузку страниц и их использование. Он будет рисовать и отображать каждое событие на временной шкале. Он покажет такие ресурсы, как JavaScript, расчет стилей и перерисовка. Вы можете записывать события и анализировать их пошагово. Есть три режима:

• События — список всех событий, организованных по типам. Это показывает, какие задачи занимают больше всего времени.
• Кадры — это показывает работу, которая должна быть выполнена в каждом кадре производительности рендеринга вашего веб-сайта. Например, если ваш сайт отображается со скоростью 60 кадров в секунду, он покажет вам работу, выполненную за 1/60 секунды. Это включает в себя загрузку сценариев, рисование макета, обработку событий и т. д. Вы можете использовать это для просмотра любых ненормальных действий при загрузке страницы.
• Память — это график использования вашей памяти с течением времени. Он показывает вам все документы, узлы и прослушиватели событий, которые хранятся в памяти. Это помогает выяснить, что вызывает утечку памяти.

Профили

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

Он будет записывать три типа профиля:

• Соберите профиль процессора JavaScript — это показывает время выполнения ваших функций JavaScript.
• Сделайте снимок кучи — это показывает использование памяти и распределение ваших объектов JavaScript.
• Запись распределения кучи — это записывает выделение ваших объектов, чтобы показать утечки памяти с течением времени.

Ресурсы

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

Вкладка IndexedDB позволяет просматривать базы данных и хранилища объектов IndexedDB, а также просматривать и удалять записи.

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

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

Chrome кэширует ресурсы приложения. Вкладка кэша приложений позволяет просматривать состояние этих ресурсов. Он также покажет вам URL-адрес ресурса, тип ресурса и его размер.

Локальный и сеансовый Панель хранилища позволяет просматривать, создавать, удалять и редактировать пары ключ/значение локального хранилища и хранилища сеанса, созданные с помощью API хранилища.

Аудиты

Панель «Аудит» анализирует страницу по мере ее загрузки и предлагает исправления для оптимизации загрузки страницы. Он имеет два аудита, которые разделяют информацию на две категории: использование сети и производительность веб-страницы. Вы можете запустить оба аудита или только тот, который вам нужен. Вы можете запустить аудит в текущем состоянии страницы или перезагрузить страницу и выполнить аудит при загрузке.

Он не вдается в такие подробности, как Google PageSpeed ​​Insights, но дает вам достаточно информации, чтобы исправить ситуацию. После прохождения PageSpeed ​​Insights моя страница была в приличном состоянии, но она дала мне некоторую информацию о моем сайте, которую не предоставила Insights.

Приставка

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

Режим устройства

Одна из моих любимых функций — режим устройства. Вы можете получить к нему доступ с помощью маленькой кнопки слева от Элементов в меню. Режим устройства позволяет вам выбрать одно из 23 различных популярных мобильных устройств (Kindle Fire, несколько iPhone, несколько Galaxy, ноутбуки и т. д.) и посмотреть, как ваш веб-сайт выглядит и реагирует на этом устройстве.

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

Вы также можете выбрать тип сети (3G, 4G, Wi-Fi и т. д.), чтобы анализировать, как сайт выглядит и реагирует на разные сети и скорости.

Выдвижной ящик

В нижней части экрана вы найдете ящик. Это можно включить или выключить с помощью кнопки >_ в правой части панели инструментов. Ящик содержит:

• Консоль – консольная командная строка. Это делает консоль доступной при использовании других панелей.
• Поиск – найти любой источник. Вы можете игнорировать регистр и искать регулярные выражения.
• Эмуляция – инструменты и настройки режима устройства. Он включает в себя такие функции, как акселерометр и координаты геолокации.
• Рендеринг — показывает функции рендеринга, такие как счетчик кадров в секунду, составные многослойные границы и т. Д. Самое приятное в этом — то, что он показывает потенциальные узкие места.

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

Последние мысли

Инструменты разработчика Chrome (DevTools) — это удивительный набор инструментов для веб-разработки и отладки, которые помогут вам улучшить свой веб-сайт. Вы можете быстро перетаскивать элементы, чтобы изменить макет вашего сайта, устранять утечки памяти, устранять проблемы с загрузкой страниц, просматривать свой веб-сайт практически на любом мобильном устройстве и с любым размером экрана и многое другое. Этот обзор лишь поверхностно показывает, насколько мощными являются эти инструменты. Самое лучшее в нем то, что оно уже встроено в Google Chrome, поэтому вам не нужно ничего скачивать.

Я хотел бы услышать от вас. Используете ли вы инструменты разработчика Chrome? Какие ваши любимые функции? Что вы используете чаще всего? Есть ли у вас какие-либо советы по использованию инструментов? Расскажите нам об этом в комментариях.