5 полезных советов по Chrome DevTools для разработчиков

Google Chrome поставляется с удобным набором инструментов веб-разработки в форме DevTools (Инструменты разработчика Chrome). В предыдущем посте мы показали вам несколько основных советов по использованию DevTools, таких как изменение Строка агента пользователя, Редактирование CSS, изменение формата цвета и перемещение DOM,

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

Рекомендуемое чтение: полезные расширения Google Chrome для веб-дизайнеров

1. приведите в порядок JavaScript
   Сокращение JavaScript — хороший способ уменьшить размер файла и сократить время загрузки веб-сайта. Однако минимизированный код очень трудно читать и отлаживать. Если у вас возникла эта проблема, вы можете использовать функцию PrettyPrint в DevTools, чтобы «минимизировать» JavaScript.

Перейдите на панель «Источники» в DevTools, и внизу слева вы найдете массив значков (скриншот).
Выберите минимизированный источник JavaScript, а затем щелкните значок фигурной скобки {} в массиве значков (снимок экрана).
И как вы можете видеть на скриншоте выше, JavaScript теперь более аккуратный и более читаемый.
2. Фрагменты
Используя фрагменты кода, сниппеты кода могут сэкономить много времени и значительно ускорить процесс отладки.

Сначала перейдите в раздел «Источники> Фрагменты» (подпанель). Затем щелкните правой кнопкой мыши и выберите «Создать», чтобы создать новый фрагмент, введите код, который вы часто используете, и сохраните его.
Чтобы вставить фрагмент, просто откройте один из ваших исходных кодов — это может быть HTML, CSS или JS. Затем перетащите фрагмент в исходный код (скриншот).
3. Отменить геолокацию
В предыдущем уроке мы показали, как получить местоположение пользователя с помощью геолокации HTML5. При разработке веб-сайта или приложения, в котором вы используете HTML5 Geolocation, вы можете захотеть отобразить местоположение, отличное от вашего. С DevTools вы можете сделать это довольно легко.

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

1. Затем перейдите в Настройки> Переопределить.
2. Проверьте / отметьте опцию Override Geolocation.
3. Введите координаты долготы и широты.

Теперь обновите страницу, и вы должны увидеть местоположение на основе введенных вами координат (скриншоты).
4. Аудит эффективности
Ваши посетители или клиенты, скорее всего, покинут ваш сайт, если он загружается ужасно медленно. Чтобы измерить эффективность вашего веб-сайта с помощью Google Chrome, вы можете перейти на панель «Аудиты» в DevTools и нажать кнопку «Выполнить» (снимок экрана).
Он сгенерирует отчет, показывающий, какие части вашего сайта должны быть оптимизированы (скриншот).
5. Скопируйте текстовый документ
С DevTools вы также можете копировать контент с веб-страницы. Это может быть полезно, когда вам нужен реальный контент для тестирования вашего сайта вместо обычного Лорем Ипсум, Для этого просто перейдите на панель консоли и выполните следующую команду.

копия (document.getElementById ( ‘содержание’). InnerText)

Команда предполагает, что содержимое вложено в элемент с идентификатором содержимого. В зависимости от веб-страницы, идентификатор может отличаться. Итак, перед запуском этой команды copy () вам необходимо выяснить, куда вложен контент (который вы намереваетесь скопировать).

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