Дванадцять корисних Chrome DevTools Tips

У даній статті ми розглянемо деякі функції інструментів розробника Chrome. Конкретно я використовую Chrome Canary і вам раджу. І не тому, що це відсилання на маленьких милих птахів, які пожертвували своїми життями, щоб ми могли добувати свіжий вугілля.

Деякі з DevTools функцій ви можливо не знали. Я буду дуже щасливий, якщо хоча б одну з них ви знайдете для себе корисною.

(У статті нижче присутні анімовані гифги, які починають дратувати після першого циклу. Тому я раджу відкрити dev tools і видалити DOM ноди, які відповідають за зображення.)

Отже, поїхали:

Копіюємо змінну в буфер обміну
Про цю можливість я дізнався з коментарів, і вважаю її досить корисною щоб бути описаною в початку. Іноді буває потрібно скопіювати вміст змінної в буфер обміну. Наприклад html код або json об'єкт. Для цього можна використовувати copy функцію.

copy (someVariable)

Тепер текстове представлення змінної скопійовано в буфер обміну.

1. Інспектуємо анімацію
Анімації прекрасні. Вони радують користувачів, і що більш важливо, вони радують мене. Меню анімацій в DevTools дозволить вам уповільнити всі анімації на сторінці до 25% або до 10% (побачити світ очима кролика), або посувати конкретну анімацію.


2. Зручні скріншоти
Коли ви перебуваєте в режимі емуляції пристроїв, ви можете включити device frame і коли ви натиснете на capture screenshot отримаєте знімок екрана разом з рамкою пристрою.


Отримане зображення буде виглядати приблизно так:


3. $0 в консолі
Надрукувавши $0 консолі, ви отримаєте посилання на поточну виділену в панелі елементів DOM ноду.

Це реальна посилання на елемент, і як приклад, ви можете зробити $0.classList.add('touch-of') або $0.getBoundingClientRect() щоб дізнатися розмір, або якщо ви використовуєте jQuery на сторінці, ви можете надрукувати що-то таке $($0).data() щоб отримати дані елемента.

За замовчуванням Chrome просто покаже вам об'єкт у вигляді DOM елемента. Якщо ви хочете побачити як елемент JavaScript об'єкт, можете надрукувати console.dir($0)

Ось різниця:


Якщо ви досить круті, і використовуєте React і React dev tools, то $r покаже вам посилання на react компонент. Щоб побачити proprs компонента, просто введіть $r.props.


Бонус: ви можете ввести ID елемента в консолі і також отримати посилання на елемент, хоча він і не є реальною глобальної змінної.

4. Стрілочні функції в консолі
Це не зовсім DevTools Tip, але я впевнений що ви їх любите. З появою стрілочних функцій стало зручно використовувати їх в одному рядку. Наприклад вираз performance.getEntries().filter(entry => entry.name.includes('static')) виведе деяку інформацію про моїх запитах з доменів, що містять «static» в імені.

Звичайно, якщо вам потрібно написати більше одного рядка, ви можете натиснути shift+enter, щоб перейти на новий рядок без виконання коду.

5. Пошук по селектору
Поле пошуку в панелі елементів шукає не тільки текст (ось це поворот, що ж воно ще він шукає?!), але і збігаються селектори. Це може бути особливо корисно для веб-розробників, яким потрібно підібрати селектори, наприклад, для автотестів.

Тут я шукаю збігу .section-inner p:nth-of-type(2)


6. Експериментуючи з квітами
Коли ви експериментуєте з квітами, ви можете використовувати пипеткущоб вибрати будь-який елемент на сторінці або вибрати з палітри кольорів, які вже використовуються на сторінці. Або вибрати один з кольорів material design.


7. Перегляд відрендерених шрифтів
Іноді дуже складно сказати, який шрифт насправді був отрендерен. У нижній частині Computed вкладки панелі інструментів, ви можете побачити який шрифт використовується, навіть якщо його немає назви в списку font-family.


8. Редагуємо будь-який текст на сторінці
Якщо у вас є меню фіксованої ширини і ви хочете дізнатися, наскільки довгий текст туди поміститься і побачити переноси слів. Відкрийте документ у режим дизайну! (document.designMode = 'on')

Після цього ви зможете редагувати всі елементи мають текстовий контент.


Якщо ви та людина, який вирішив використовувати on/off замість true/false, я б хотів поговорити з вами в моєму офісі.

9. Діафільм
Дуже хорошим інструментом налаштування продуктивності є режим діафільму на вкладці Network. Він дозволить вам зосередити увагу на візуальної складової а не на неясних події начебто domContentLoaded.

Або ви можете просто з іронією подивитися як вантажаться шрифти Adobe.


Я дивлюся на це кожен раз, коли мені сумно. Моя улюблена частина, коли весь текст зникає.

10. Фільтри на вкладці Network
Яку б роботу по продуктивності ви не робили, вам потрібно знати що приходить до вас в браузер. Якщо ви розміщуєте рекламу на сайті, то приходить багато чого. Для скорочення списку, ви можете відфільтрувати ресурси за типами (утримуйте cmd/ctrl мультівибора) і також по доменах.


11. Темна тема
Бо темна тема.


Включити можна спочатку сторінки налаштувань

12. Chrome фрагменти
Я люблю сніппети. (шкода, що вони не синхронізуються між браузерами з іншими моїми Chrome налаштуваннями).


Круто що вони виконуються в контексті сторінки. Щодо доступу до DOM, відносними посиланнями, кукам, і іншим речам, ваші фрагменти будуть мати таку ж поведінку, як і звичайний код.



Кінець
Дізнатися більше інформації про можливості панелі розробника ви можете відвідавши документацію. Не пошкодуйте трохи часу для її вивчення, щоб підвищити ефективність своєї роботи. Поділиться своїми корисними знахідками можна в коментарях.



І ще одне. При установці Chrome Canary, увійдіть і синхронізуйте ваш обліковий запис Google, але у додаткових налаштуваннях синхронізації приберіть галочку з «Extensions». Так ви отримаєте вашу історію, закладки і всі інші речі, крім розширень, які засмічують ваш робочий простір своїм кодом.


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.