11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком

Предисловие

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

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

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

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

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

Вам просто нужно сделать эти шаги:

1. Выберите вкладку Network

2. НажмитеFetch/XHR

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

4. Щелкните правой кнопкой мыши и выберитеReplay XHR

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

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

Вам просто нужно сделать эти шаги:

1. Выберите вкладку Network.

2. Щелкните Fetch/XHR.

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

4. Выберите Copy затем Copy as fetch.

5. Измените входной параметр и отправьте его повторно.

3. Переменные JavaScript можно копировать

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

Примечание переводчика: также можно копировать JSON-объекты возвращаемые сервером (на вкладке Network -> Preview) если нажать правую кнопку мыши и copy object

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

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

1. Выберите элемент DOM через вкладку Elements.

2. Напишите в консоли $0для доступа к элементу

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

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

1. Подготовьте содержимое страницы, которую вы хотите захватить

2. Откройте средства разработчика и нажмите комбинацию клавиш - на Windows/Unix Ctrl + Shift + P на MacOS CMD + Shift + P откроется консольCommand

3. Введите Сделать полноразмерный скриншот (если язык ОС английский, то Capture full size screenshot ) и нажмите Enter

Ух ты, круто!

А если мы хотим сделать скриншот части страницы, что нам делать?

Это также очень просто, просто введите «Сделать скриншот узла» (Capture node screenshot если ОС на англ.языке) на третьем шаге:

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

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

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

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

'fatfish'.split('').reverse().join('') // hsiftaf

Вы можете сделать что-то вроде этого

// шаг 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// шаг 2
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// шаг 3
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf

Более простой способ:

Используйте $ чтобы получить результат последней операции

// шаг 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// шаг 2
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// шаг 3
$_.join('') // hsiftaf

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

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

1. cmd + shift + pвыполнить командную команду

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

Примечание от переводчика: светлая тема хороша когда на экран попадает много яркого света, например если Вы работаете на пляже в солнечный день

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

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

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

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

1. Установите плагин импорта консоли

2. $i('имя') установить пакет npm

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

Мы хотим приостановить выполнение кода, когда при переборе объекта столкнёмся с едой, которая называется 🍫 Как это сделать?

const foods = [
  {
    name: '🍔',
    price: 10
  },
  {
    name: '🍫',
    price: 15
  },
  {
    name: '🍵',
    price: 20
  },
]
foods.forEach((v) => {
  // debugger
  console.log(v.name, v.price)
})

А вот как:

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

Спасибо за внимание!

От переводчика: я случайно наткнулся на эту статью, и счёл её полезной для себя. Очень рад, если этот перевод кому то оказался полезным 🤠