Веб-компоненти DevTools в Chrome за допомогою OffiDocs

ОПИС

Інструменти розробника для веб-компонентів і бібліотек веб-компонентів Web Component DevTools призначені для всіх розробників, які працюють з веб-компонентами.

Надані інструменти створюють нову панель Chrome Devtools, яка дає змогу швидко переглянути спеціальні елементи на поточній сторінці та дає змогу змінювати атрибути та властивості зазначених компонентів.

Web Component DevTools використовує маніфест спеціальних елементів (https://github.

com/webcomponents/custom-elements-manifest), щоб проаналізувати веб-компоненти.

Функції: Web Component DevTools надає розробнику розширені функції безпосередньо з інтерфейсу користувача веб-переглядача, щоб, наприклад: - розміщувати користувацькі елементи на сторінці та доступні iframe всередині сторінки - фільтрувати користувацькі елементи в списку - перевіряти та змінювати атрибути користувальницькі елементи - Перевірка та зміна властивостей (навіть об'єктів і масивів) користувацьких елементів - Спостереження за відправленими подіями - Виклик функцій користувацького елемента та реєстрація повернених значень - Перегляд вихідного коду веб-компонентів на сторінці - Взаємодія безпосередньо з веб-компонентами через консоль Чому? У процесі розробки веб-компонентів, чи то з бібліотекою, як Lit, чи без будь-якої бібліотеки, трапляються ситуації, коли вам може знадобитися трохи більше контролювати свої компоненти, ніж те, що дають вам звичайні інструменти розробника браузера.

Ви можете, наприклад, захотіти: Перемикати атрибути елемента Перемикати властивості елемента Відстежувати, коли події надсилаються з елемента Викликати функції. А коли ви працюєте з веб-компонентами, зазвичай присутній Shadow DOM, що ускладнює знайти шлях до елемента.

І навіть якщо ви отримали шлях, доведеться писати документ.

querySelector("my-selector-string > element-name").

setAttribute("my-attr", "foo") щоразу, коли ви хочете змінити значення, досить громіздко.

Для цього випадку використання було створено Web Components DevTools: щоб дозволити розробнику легко змінювати атрибути, властивості та, отже, стан свого елемента прямо з вікна devtools одним натисканням кнопки.

Проблеми: будь-які проблеми, з якими ви зіткнулися під час використання DevTools, слід надсилати до репозиторію GitHub (https://github.

com/Matsuuu/web-component-devtools/issues).

Додаткова інформація:

– Запропонував Мацууу
- Середня оцінка: 5 зірок (сподобалось)
- Розробник Ця електронна адреса захищена від спам-ботів. Ботів, для його перегляду включений JavaScript.

Веб-компонент DevTools web extension інтегровано з OffiDocs Chromium онлайн