11 фішок Chrome Devtools, які полегшать роботу

Майже кожному фронтенд-розробнику доводилося працювати у браузері Google Chrome — переглядати мережеві запити, аналізувати продуктивність вебсторінки, робити відладку тощо. Фронтенд-інженер з Alibaba поділилася прийомами для швидкої та ефективної роботи з цим інструментом у блозі на Medium.

1. Додайте умовну точку зупинки (брейкпоінт)

Коли коду для перевірки об’єктів або випадків занадто багато, потрібні вже не стандартні, а умовні брейкпоінти. Вони позбавлять необхідності проганяти через дебаггер кожен об’єкт, а лише вибірку тих, які викликають найбільші підозри.

Так процес розробки йтиме швидше та ефективніше.

2. Використовуйте $i, щоб встановити пакет npm у браузер

Якщо потрібно використовувати API, наприклад dayjs або lodash, необов’язково йти на офіційний сайт бібліотеки. Можна використовувати його прямо в консолі браузера:

1. встановіть плагін Console Importer;
2. введіть $i(‘ім’я’) та встановіть пакет npm.

3. Повторне надсилання запиту XHR

Лайфхак для тих, кому часто доводиться налагоджувати інтерфейс із back-end розробниками — використання цієї функції може підвищити ефективність стикування:

• виберіть панель Network;
• натисніть Fetch/XHR ;
• виберіть запит, який хочете надіслати повторно;
• клацніть правою кнопкою миші та виберіть Replay XHR.

4. Швидко перемикайте кольори теми

Якщо ви часто змінюєте темну і темну теми в консолі Chrome залежно від настрою та освітлення, то ця комбінація прийде на допомогу:

• натисніть cmd + shift + p, щоб відкрився командний рядок;
• введіть Switch to dark theme або Switch to light theme, щоб перемикати тему.

5. Швидко надсилайте запити в консолі

Для одного і того самого запиту іноді необхідно змінити вхідні параметри та відправити його повторно. Ось як це можна зробити швидше:

1. виберіть панель Network;
2. клацніть Fetch/XHR;
3. виберіть запит, який бажаєте повторити;
4. оберіть панель Copy as fetch;
5. змініть вхідний параметр і надішліть його повторно.

   Як швидко надсилати запити до консолі

6. Скопіюйте змінні JavaScript

Відмінна фішка, яка допомагає скопіювати складні дані у буфер обміну. Для цього потрібно використовувати функцію Copy, яку надає браузер Chrome.

7. Отримуйте вибраний елемент DOM у консолі

У панелі «Елементи» виберіть елемент DOM, атрибути якого вам необхідні (ширина, висота, положення та інше). Потім використовуйте $0 для доступу до елемента консолі.

8. Робіть повнорозмірні скриншоти

Якщо потрібно зробити скриншот довгої сторінки, що складається з більш ніж одного екрана (тобто до кінця сторінки ще потрібно прокручувати вниз), то:

1. підготуйте вміст сторінки, скриншот якої хочете зробити;
2. натисніть сmd + shift + p, щоб відкрився командний рядок;
3. введіть Capture full size screenshot та натисніть Enter.

Якщо вам потрібна лише частина скриншота сторінки, на третьому кроці введіть Capture node screenshot.

9. Розгорніть усі дочірні вузли

Щоб розгорнути всі дочірні вузли елемента DOM одночасно, а не по одному, використовуйте комбінацію клавіш Alt + click на панелі елементів.

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

Ви виконали різні операції над рядком і бажаєте дізнатися результат. Найпростіший спосіб це зробити – використовувати $.

11. Використовуйте $ та $$ для швидкого вибору елементів DOM

Використання document.querySelector і document.querySelectorAll для вибору елементів поточної сторінки в консолі є найпоширенішою вимогою, але вона занадто довга. Натомість спробуйте використовувати $ і $$: