11 крутых советов и приемов Chrome Devtools, которые я хотел бы уже знать

11 хитростей, которые вы должны знать, если выбираете Chrome в качестве инструмента разработки

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

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

Давайте посмотрим.

1. Добавьте условную точку останова

С помощью следующего кода мы надеемся, что название еды 🍫 Когда срабатывает точка останова, как я могу это сделать?

В случае больших объемов данных использование условных точек останова будет очень полезно для разработки и значительно повысит эффективность.

2. Используйте ` $ I ', чтобы установить пакет npm на консоль.

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

1. Установите плагин Импорт консоли
2. $i(‘имя’) установить пакет npm

3. Повторно отправить запрос XHR

В нашей работе нам часто приходится отлаживать интерфейс с back-end разработчиками. Использование этой функции может повысить эффективность нашей стыковки.

Вам просто нужно выполнить следующие действия：

1. Выберите панель Network
2. Нажмите Fetch/XHR
3. Выберите запрос, который хотите отправить повторно
4. Щелкните правой кнопкой мыши и выберите Replay XHR

4. Быстро переключайте цвета темы

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

1. cmd + shift + p выполнить командную команду
2. Введите «Переключиться на темную тему» ​​или «Переключиться на светлую тему», чтобы переключить тему.

5. Быстро отправлять запросы в консоли

Для одного и того же запроса иногда необходимо изменить входные параметры и отправить его повторно. Что такое ярлык?

Вам просто нужно выполнить следующие действия：

1. Выберите панель Network.
2. Нажмите Fetch/XHR.
3. Выберите запрос, который хотите отправить повторно.
4. Выберите панель Copy as fetch.
5. Измените входной параметр и отправьте его повторно.

6. Скопируйте переменные JavaScript

Как мы можем скопировать сложные данные в буфер обмена?

Это потрясающе. Вы можете сделать это с помощью функции Copy браузера Chrome.

7. Получить выбранный элемент DOM в консоли

Когда мы выбираем элемент через панель «Элементы», что нам делать, если мы хотим напечатать некоторые из его атрибутов через JavaScript, такие как ширина, высота, положение и т. д.?

1. Выберите элемент DOM через Elements panel.
2. Используйте $0 для доступа к элементу в консоли.

8. Делайте полноразмерные скриншоты

Если мы хотим сделать скриншот страницы, состоящей из более чем одного экрана, есть ли хороший способ?

Мощный браузер Chrome может сделать это легко.

1. Подготовьте содержимое страницы, которую вы хотите захватить
2. CMD + Shift + P выполнить Command
3. Введите Capture full size screenshot и нажмите Enter

Ух ты, круто!!!

Теперь новый вопрос. Мы просто хотим взять часть скриншота страницы. Что нам делать?

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

9. Разверните все дочерние узлы

Как развернуть все дочерние узлы элемента DOM одновременно? Не по одному?

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

10. Используйте «$» для ссылки на результат последнего выполнения

Давайте посмотрим на эту сцену, мы выполнили различные операции над строкой, а затем мы хотим узнать результат каждого шага, что нам делать?

Вы можете сделать что-то подобное

Легкий способ

Использовать «$» Получить результат последней операции, не копируя его каждый раз.

11. Используйте «$» и «$$» для быстрого выбора элементов DOM

Использование document.querySelector и document.querySelectorAll для выбора элементов текущей страницы в консоли является наиболее распространенным требованием, но это слишком долго, вместо этого мы можем использовать $ и $$.

Окончательно

Спасибо, что прочитали. Я с нетерпением ждувашей подписки и новых качественных статей.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.