Деякі функції крос-браузерних DevTools, про які ви могли не знати

Я проводжу багато часу в DevTools, і я впевнений, що ви теж. Іноді я навіть перескакую між ними, особливо коли вирішую проблеми з кросбраузерністю. DevTools дуже схожий на самі веб-переглядачі — не всі функції в DevTools одного веб-переглядача будуть однаковими чи підтримуватимуться в DevTools іншого браузера.

Але є чимало функцій DevTools, які сумісні, навіть деякі менш відомі, якими я збираюся поділитися з вами.

Заради стислості я використовую «Chromium» для позначення всіх браузерів на основі Chromium, як-от Chrome, Edge і Opera, у статті. Багато з DevTools у них пропонують ті самі функції та можливості, тому це лише моє скорочення для посилань на всі з них одночасно.

Пошук вузлів у дереві DOM

Іноді дерево DOM повне вузлів, вкладених у вузли, які вкладені в інші вузли, і так далі. Через це досить важко знайти саме те, що ви шукаєте, але ви можете швидко шукати в дереві DOM за допомогою Cmd + F (macOS) або Ctrl + F (Windows).

Крім того, ви також можете шукати за допомогою дійсного селектора CSS, наприклад .redабо за допомогою XPath, наприклад //div/h1.

У браузерах Chromium під час введення тексту фокус автоматично переходить до вузла, який відповідає критеріям пошуку, що може дратувати, якщо ви працюєте з довшими пошуковими запитами або великим деревом DOM. На щастя, ви можете вимкнути цю поведінку, перейшовши до Налаштування (F1) → переваги → Глобальний → Шукайте під час набору тексту → Забороняти.

Після того як ви знайшли вузол у дереві DOM, ви можете прокрутити сторінку, щоб перемістити вузол у вікно перегляду, клацнувши вузол правою кнопкою миші та вибравши «Прокрутити до перегляду».

Доступ до вузлів з консолі

DevTools надає багато різних способів доступу до вузла DOM безпосередньо з консолі.

Наприклад, ви можете використовувати $0 щоб отримати доступ до поточного вибраного вузла в дереві DOM. Браузери Chromium роблять ще один крок далі, дозволяючи вам отримувати доступ до вузлів, вибраних у зворотному хронологічному порядку історичного вибору за допомогою, $1, $2, $3, І т.д.

Інша річ, яку дозволяють браузери Chromium, це копіювати шлях до вузла як вираз JavaScript у формі document.querySelector клацнувши вузол правою кнопкою миші та вибравши Скопіювати → Скопіюйте шлях JS, який потім можна використовувати для доступу до вузла в консолі.

Ось ще один спосіб отримати доступ до вузла DOM безпосередньо з консолі: як тимчасова змінна. Цей параметр доступний, клацнувши вузол правою кнопкою миші та вибравши параметр. Цей параметр позначається по-різному в DevTools кожного браузера:

• Хром: Клацніть правою кнопкою миші → «Зберегти як глобальну змінну»
• Firefox: Клацніть правою кнопкою миші → «Використати в консолі»
• Safari: Клацніть правою кнопкою миші → «Елемент журналу»

Візуалізуйте елементи за допомогою значків

Інструменти розробника можуть допомогти візуалізувати елементи, які відповідають певним властивостям, відображаючи позначку поруч із вузлом. Значки можна натискати, а різні веб-переглядачі пропонують різноманітні значки.

In Safari, на панелі інструментів панелі «Елементи» є кнопка значка, за допомогою якої можна перемикати видимість певних значків. Наприклад, якщо вузол має a display: grid or display: inline-grid Оголошення CSS, застосоване до нього, a grid біля нього відображається значок. Якщо натиснути на значок, на сторінці буде виділено області сітки, розміри доріжок, номери рядків тощо.

Значки, які зараз підтримуються в FirefoxDevTools перераховані у Firefox вихідні документи. Наприклад, a scroll значок вказує на елемент, який можна прокручувати. Натискання значка виділяє елемент, який викликає переповнення, за допомогою overflow значок поруч із ним.

In Хром браузерів, ви можете клацнути правою кнопкою миші будь-який вузол і вибрати «Налаштування значка…» щоб відкрити контейнер зі списком усіх доступних значків. Наприклад, елементи с scroll-snap-type буде мати scroll-snap значок поруч із ним, який після натискання перемикає scroll-snap накладання на цей елемент.

Зробіть скріншоти

Ми вже деякий час можемо робити знімки екрана з деяких DevTools, але тепер вони доступні в усіх із них і включають нові способи робити знімки повної сторінки.

Процес починається з клацання правою кнопкою миші на вузлі DOM, який ви хочете захопити. Потім виберіть опцію для захоплення вузла, який позначається по-різному залежно від того, які DevTools ви використовуєте.

Повторіть ті самі кроки на html вузол, щоб зробити знімок екрана на всю сторінку. Але коли ви це зробите, варто зауважити, що Safari зберігає прозорість фонового кольору елемента — Chromium і Firefox захоплять його як білий фон.

Є інший варіант! Ви можете зробити «адаптивний» знімок екрана сторінки, що дає змогу захопити сторінку з певною шириною вікна перегляду. Як і слід було очікувати, кожен браузер має різні способи потрапити туди.

• Хром: Cmd + Shift + M (macOS) або Ctrl + Shift + M (Windows). Або натисніть піктограму «Пристрої» поруч із піктограмою «Перевірити».
• Firefox: Інструменти → Інструменти браузера → «Режим адаптивного дизайну»
• Safari: Розробити → «Увійти в режим адаптивного дизайну»

Порада Chrome: перевірте верхній шар

Chrome дозволяє візуалізувати та перевіряти елементи верхнього рівня, як-от діалогове вікно, сповіщення або модальне вікно. Коли елемент додається до #top-layer, він отримує a top-layer значок поруч із ним, який після клацання перемикає вас до контейнера верхнього рівня, розташованого одразу після </html> бирка.

Порядок елементів у top-layer контейнер дотримується порядку укладання, тобто останній знаходиться зверху. Натисніть на reveal значок, щоб повернутися до вузла.

Порада Firefox: перейдіть до ID

Firefox пов’язує елемент, що посилається на атрибут ID, із його цільовим елементом у тому самому DOM і виділяє його підкресленням. використання CMD + Click (macOS) або CTRL + Click (Windows) ), щоб перейти до цільового елемента з ідентифікатором.

Підводячи підсумок

Багато речей, чи не так? Чудово, що є кілька неймовірно корисних функцій DevTools, які підтримуються в Chromium, Firefox і Safari. Чи є інші менш відомі функції, які підтримуються всіма трьома, які вам подобаються?

Є кілька ресурсів, які я тримаю поруч, щоб бути в курсі новинок. Я думав поділитися ними тут:

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
• джерело: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/