11 фішок Chrome Devtools, які полегшать роботу
Майже кожному фронтенд-розробнику доводилося працювати у браузері Google Chrome — переглядати мережеві запити, аналізувати продуктивність вебсторінки, робити відладку тощо. Фронтенд-інженер з Alibaba поділилася прийомами для швидкої та ефективної роботи з цим інструментом у блозі на Medium.
- Додайте умовну точку зупинки (брейкпоінт)
Коли коду для перевірки об’єктів або випадків занадто багато, потрібні вже не стандартні, а умовні брейкпоінти. Вони позбавлять необхідності проганяти через дебаггер кожен об’єкт, а лише вибірку тих, які викликають найбільші підозри.
Так процес розробки йтиме швидше та ефективніше.
- Використовуйте $i, щоб встановити пакет npm у браузер
Якщо потрібно використовувати API, наприклад dayjs або lodash, необов’язково йти на офіційний сайт бібліотеки. Можна використовувати його прямо в консолі браузера:
- встановіть плагін Console Importer;
- введіть $i(‘ім’я’) та встановіть пакет npm.
- Повторне надсилання запиту XHR
Лайфхак для тих, кому часто доводиться налагоджувати інтерфейс із back-end розробниками — використання цієї функції може підвищити ефективність стикування:
- виберіть панель Network;
- натисніть Fetch/XHR ;
- виберіть запит, який хочете надіслати повторно;
- клацніть правою кнопкою миші та виберіть Replay XHR.
- Швидко перемикайте кольори теми
Якщо ви часто змінюєте темну і темну теми в консолі Chrome залежно від настрою та освітлення, то ця комбінація прийде на допомогу:
- натисніть cmd + shift + p, щоб відкрився командний рядок;
- введіть Switch to dark theme або Switch to light theme, щоб перемикати тему.
- Швидко надсилайте запити в консолі
Для одного і того самого запиту іноді необхідно змінити вхідні параметри та відправити його повторно. Ось як це можна зробити швидше:
- виберіть панель Network;
- клацніть Fetch/XHR;
- виберіть запит, який бажаєте повторити;
- оберіть панель Copy as fetch;
- змініть вхідний параметр і надішліть його повторно.
- Скопіюйте змінні JavaScript
Відмінна фішка, яка допомагає скопіювати складні дані у буфер обміну. Для цього потрібно використовувати функцію Copy, яку надає браузер Chrome.
- Отримуйте вибраний елемент DOM у консолі
У панелі «Елементи» виберіть елемент DOM, атрибути якого вам необхідні (ширина, висота, положення та інше). Потім використовуйте $0 для доступу до елемента консолі.
- Робіть повнорозмірні скриншоти
Якщо потрібно зробити скриншот довгої сторінки, що складається з більш ніж одного екрана (тобто до кінця сторінки ще потрібно прокручувати вниз), то:
- підготуйте вміст сторінки, скриншот якої хочете зробити;
- натисніть сmd + shift + p, щоб відкрився командний рядок;
- введіть Capture full size screenshot та натисніть Enter.
Якщо вам потрібна лише частина скриншота сторінки, на третьому кроці введіть Capture node screenshot.
- Розгорніть усі дочірні вузли
Щоб розгорнути всі дочірні вузли елемента DOM одночасно, а не по одному, використовуйте комбінацію клавіш Alt + click на панелі елементів.
- Використовуйте $ для посилання на результат останнього виконання
Ви виконали різні операції над рядком і бажаєте дізнатися результат. Найпростіший спосіб це зробити – використовувати $.
- Використовуйте $ та $$ для швидкого вибору елементів DOM
Використання document.querySelector і document.querySelectorAll для вибору елементів поточної сторінки в консолі є найпоширенішою вимогою, але вона занадто довга. Натомість спробуйте використовувати $ і $$:
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: