Отладка виджетов VIS

Виджет работает в браузере, а не в Node.js. Поэтому отладчик принадлежит браузеру, а не используется для отладки . Путь к отладчику зависит от того, создан ли виджет для vis-2 или для более старой версии vis-1 .

вис-2

Виджеты для vis-2 представляют собой компоненты React и разрабатываются в отдельном пакете. Отправной точкой является шаблон ioBroker.vis-2-widgets-react-template .

Без запущенного ioBroker

Для работы над внешним видом и логикой вполне достаточно собственного сервера разработки. В исходном каталоге виджетов:

npm run start

После этого виджет находится в следующем месте:http://localhost:4173 Он отображается в демонстрационной среде, изменения появляются мгновенно, а инструменты разработчика браузера показывают нескомпилированный исходный код с точками останова и читаемыми именами.

При работающем ioBroker

Сервер разработки вступает в действие, как только виджету требуется реальное состояние:

  1. dev-server watch --noStart Начните с каталога адаптера.
  2. npm run start Начните с исходного каталога виджетов.
  3. В объектеsystem.adapter.<adaptername>.0 полеcommon.visWidgets.<widgetname>.url наhttp://localhost:4173/customWidgets.js набор.
  4. dev-server upload позвоните.
  5. Перезагрузите редактор vis-2 в браузере.

В этом случае vis-2 загружает виджеты с сервера разработки, а не с установленного адаптера. После каждого изменения достаточно перезагрузки страницы.

!> Измененное значениеcommon.visWidgets…url Перед публикацией выполните сброс настроек. В противном случае программа установки будет искать пользователя...localhost:4173 .

Вспомогательные классы и миграция старых виджетов описаны в пакете @iobroker/vis-2-widgets-react-dev .

вис 1

Виджеты для vis 1 представляют собой HTML-файлы, использующие jQuery. Они находятся в хранилище данных по адресуvis/widgets/ и доставляются оттуда, а не из каталога адаптера. Поэтому простого изменения файла в пакете недостаточно.

Путь:

  1. В адаптереweb Отключите кэширование в конфигурации экземпляра. Оно включено по умолчанию.
  2. Вiobroker-data/iobroker.json подobjects атрибутnoFileCache наtrue Настройка и использование ioBroker сiobroker restart начать заново.
  3. Измененный файл виджета сiobroker upload vis переместиться в хранилище данных.
  4. Перезагрузите страницу в браузере, удерживая клавишу Shift.

Виджеты загружаются динамически, поэтому этот файл изначально не отображается в исходном коде браузера.console.log или debuggerИнструкция `-instruction` в виджете помогает: вы можете перейти к файлу через вывод в консоли и установить там точки останова.

Инструкции по заменеindex.html черезindex.html.original и изменяющийсяvis/cache.manifest Эти описания устарели. Базовый кэш браузера (кэш приложения) был удален из всех браузеров в 2021 году.

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