Используйте инструменты разработчика Chrome как синьор фронт-энд разработчик

От автора: 11 советов, которые вы должны знать, если вы выбираете Chrome в качестве среды разработки.

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

Иногда вы открываете панель «Консоль», чтобы проверить вывод программы, или панель «Элементы», чтобы проверить код CSS для элементов DOM.

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

Прежде чем мы начнем, я хотел бы представить меню команд. Меню команд для Chrome такое же, как для Linux. Оно позволяет ввести несколько команд для управления Chrome. Сначала мы открываем инструменты разработчика Chrome, затем меню команд с помощью следующего сочетания клавиш:

Или мы можем просто нажать кнопку ниже:

Затем мы можем перейти к панели команд, где есть множество команд для выполнения различных задач.

Продвинутые скриншоты

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

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

Теперь откройте любую веб-страницу, например, страницу популярных статей по JavaScript на Medium. И откройте меню команд и выполните Screenshot Capture full size screenshot

Теперь мы можем получить полный скриншот текущей страницы.

Точно так же, если вы хотите сделать снимок элемента DOM, вы можете использовать собственный системный инструмент для создания снимков экрана, но вы не можете точно захватить этот элемент. На данный момент, вы можете использовать Capture node screenshot.

Сначала мы выбираем элемент в панели «Элементы», а затем запускаем команду.

Это результат точного скриншота:

Ссылка на результат последней операции в консоли

Нам часто нужно отлаживать код в консоли. Предположим, вы хотите знать, как обернуть строку в JavaScript, а затем вы ищете в Интернете соответствующую информацию и находите следующую строку кода.

'abcde'.split('').reverse().join('')

Ну, приведенный выше код переворачивает строку. Но вы все еще не понимаете, что делают методы split() reverse() join() и результаты выполнения этих промежуточных шагов. Итак, теперь вы хотите выполнить вышеуказанный код шаг за шагом, вы можете написать что-то вроде этого:

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

$_ — это специальная переменная, значение которой всегда равно результату последней операции в консоли. Этот метод — удобный способ отладки кода.

Переслать запрос XHR

Во фронтенд-проектах нам часто нужно использовать XHR, чтобы выполнить запрос к серверу для получения данных. Что бы вы сделали, если бы хотели отправить запрос XHR?

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

Вот пример GIF:

Отслеживание статуса загрузки страницы

Для полной загрузки страницы с самого начала может потребоваться более десяти секунд. Здесь мы должны следить за тем, как страница загружается в разное время. В Chrome DevTools мы можем делать снимки экрана загрузки страницы, используя Capture Screenshots в панели «Сеть».

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

Копирование переменных

Можете ли вы скопировать значение переменной JavaScript в другое место? Это может показаться невыполнимой задачей, но в Chrome есть функция copy, которая помогает копировать переменную.

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

Скопировать изображение как URI данных

Существует два способа обработки изображений на странице: один — загрузить их по ссылкам на внешние ресурсы, а другой — закодировать изображения в URL-адреса данных.

URL-адреса данных, URL-адреса с префиксом по схеме data:, позволяют создателям контента встраивать в документы небольшие файлы. Ранее они назывались «URI-адресами данных», пока WHATWG не удалила это имя.

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

Итак, как в Chrome превратить изображение в URL-адрес данных? Вот как:

Массив табличных объектов

Предположим, у нас есть массив таких объектов:

let users = [{name: 'Jon', age: 22}, {name: 'bitfish', age: 30}, {name: 'Alice', age: 33}]

Такой массив не легко просмотреть в консоли. Если массив длиннее, а элементы сложнее, его становится еще сложнее понять. К счастью, Chrome предоставляет табличную функцию, которая табулирует массив объектов.

Во многих случаях эта функция очень полезна.

Перетаскивание на панель «Элементы»

Иногда мы хотим настроить местоположение определенных элементов DOM на странице, чтобы протестировать пользовательский интерфейс. В панели «Элементы» вы можете перетащить любой элемент HTML и изменить его положение на странице:

В git выше я перетащил расположение div на панель «Элементы», и его местоположение на веб-странице было изменено синхронно.

Ссылка на текущий выбранный элемент в консоли

$0 — это еще одна магическая переменная, которая ссылается на текущий выбранный элемент в панели «Элемент».

Вызов псевдо-классов CSS

Псевдо-классы позволяют применять стиль к элементу не только по отношению к содержимому дерева документа, но также по отношению к внешним факторам, таким как история посещений (например, :visited), статус содержимого (например, :checked для определенных элементов формы) или положение мыши (например :hover, которое позволяет узнать, находится ли мышь над элементом или нет).

Мы могли бы написать несколько псевдо-классов для одного элемента, и чтобы облегчить тестирование этих стилей, мы можем вызвать эти стили непосредственно в панели «Элементы».

Вот веб-страница:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ font-size: 150px; } div:hover{ color: red; } div:active{ color: blue; } div:focus{ color: brown; } </style> </head> <body> <div>hello world</div> </body> </html>

Затем мы открываем ее в браузере и отлаживаем стиль псевдо-класса через панель «Элементы».

Ярлык, чтобы скрыть элемент

При отладке стилей CSS нам часто нужно скрывать элемент. Если мы выберем элемент и нажмем H на клавиатуре, мы сможем быстро скрыть элемент.

Нажмите H на клавиатуре

Эта операция заключается в добавлении стиля visibility: hidden !important; к соответствующему элементу.

Сохранить элемент DOM в глобальной временной переменной

Если мы хотим быстро получить ссылку на элемент DOM в консоли, мы можем сделать это:

Источник: https://medium.com

Редакция: Команда webformyself.