LocatorJS — это расширение для браузера, которое позволяет пользователям щелкнуть любой компонент в браузере и просмотреть его в своем редакторе. Это ускорит разработку и облегчит отладку и разработку.
Настраивать
LocatorJS поддерживает React (подходы data-id и devtools), а также SolidJS, Preact, и они работают над Svelte и Vue, с которыми вы можете поэкспериментировать прямо сейчас.
Установка VueJs
Установите расширение для браузера (Chrome, Edge, Brave, Opera, Firefox) ИЛИ Установите Locator как пакет к вашему проекту.
pnpm add -D @locator/runtime
Добавьте это в main.js:
import setupLocatorUI from "@locator/runtime"
if (process.env. NODE_ENV === "development" ) { setupLocatorUI ( { adapter : "vue" , } ) }
Применение
Теперь все, что нам нужно сделать, это открыть наш браузер и удерживать Alt
или Option
при перемещении курсора, чтобы проверить все компоненты и элементы. Нажмите на компонент, который вы хотите, чтобы перейти к редактору! Удачного кодирования!
Открытый источник
Весь проект является проектом с открытым исходным кодом под лицензией MIT. Если вы найдете мой контент полезным, подписывайтесь на меня в Github или Twitter.
Первоначально опубликовано на https://www.blog.dayrakiarts.com 4 октября 2022 г.