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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

windows:Ctrl + Shift + P

macOS:Cmd + Shift + P

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

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

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

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

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

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

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

Точно захватить содержимое элемента DOM

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

Screenshot Capture full size screenshot

Screenshot Capture node screenshot

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

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

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

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

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

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

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

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

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

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

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

JavaScript
‘abcde’.split(»).reverse().join(»)

1 ‘abcde’.split(»).reverse().join(»)

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

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

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

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

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

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

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

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

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

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

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

Откройте «Сеть»

Нажмите кнопку XHR

Выберите запрос XHR, который хотите отправить

Повторите XHR

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Вот пример GIF:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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>

123456789101112131415161718192021222324252627 <!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>

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

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

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

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

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

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

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

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

выбрать элемент

кликнуть правой кнопкой мыши

сохранить, как глобальную переменную

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

Просмотров:

Добавить комментарий