Инструменты разработчика веб-компонентов в Chrome с ОфиДокс

ОПИСАНИЕ

Инструменты разработчика для веб-компонентов и библиотек веб-компонентов Web Component DevTools предназначены для всех разработчиков, работающих с веб-компонентами.

Предоставленный инструментарий создает новую панель Chrome Devtools, которая позволяет быстро просматривать пользовательские элементы на текущей странице и позволяет изменять атрибуты и свойства указанных компонентов.

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

com/webcomponents/custom-elements-manifest) для анализа веб-компонентов.

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

Например, вы можете захотеть: Переключить атрибуты элемента. Переключить свойства элемента. Отслеживать, когда события отправляются из элемента. Вызывать функции. Когда вы работаете с веб-компонентами, обычно присутствует Shadow DOM, что довольно найти путь к элементу.

И даже если вы получили путь, вам нужно написать document.

querySelector("строка-селектора > имя-элемента").

setAttribute("my-attr", "foo") каждый раз, когда вы хотите изменить значение, довольно громоздко.

Для этого варианта использования были созданы DevTools для веб-компонентов: чтобы разработчик мог легко изменять атрибуты, свойства и, следовательно, состояние своего элемента прямо из окна devtools одним нажатием кнопки.

Проблемы: любые проблемы, с которыми вы сталкиваетесь при использовании DevTools, должны быть отправлены в репозиторий GitHub (https://github.

com/Matsuuu/веб-компонент-devtools/issues).

Дополнительная информация:

- Предложено Мацууу
- Средняя оценка: 5 звезд (очень понравилось)
- разработчик Этот адрес электронной почты защищен от спам-ботов. Ботов, для его просмотра включен JavaScript.

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