Принуждение расширения Vue.js devtools для работы в рабочем режиме на любом веб-сайте
TLDR: вот то, что вы ищете: https://chrome.google.com/webstore/detail/vue-force-dev/oohfffedbkbjnbpbbedapppafmlnccmb
В наши дни любой разработчик внешнего интерфейса, работающий с фреймворком Vue.js, знаком (или должен быть) с его ближайшей экосистемой. Он включает в себя множество полезных библиотек и инструментов, таких как расширение Vue.js devtools для браузеров.
Это поможет вам в проверке и отладке ваших компонентов, хранилища Vuex, генерируемых событий и прочего на локальном хосте. Поскольку все современные веб-приложения Javascript объединяются, минимизируются или изменяются перед отправкой в производственную среду, ваша возможность использовать это полезное расширение обычно заканчивается этой фразой: «Vue.js обнаружен… но проверка недоступна».
Здесь вступает в игру очень простое и все же умное решение от @hzmming, завернутое в расширение Chrome ниже.
В двух словах, он пытается обнаружить Vue.js на любой загруженной странице, используя перегрузку стандартного встроенного метода «Object.defineProperty», проверяя все связанные признаки основного объекта Vue, такие как $on, $watch, $emit. , $forceUpdate и т.п. определенные на нем.
Когда свойство «config» найдено, расширение перезаписывает его дочерние реквизиты в соответствии с нашими потребностями.
Vue.config.devtools = true; Vue.config.productionTip = true;
Вот и все. Теперь вы можете проверить любой веб-сайт, разработанный с помощью Vue.js.
Если вам не нравится использовать сторонние расширения для браузера, тем более от анонимного разработчика, по соображениям безопасности или по другим причинам, вы все равно можете помочь себе с классической точкой останова javascript, установленной в строке инициализации кода Vue.js, и изменить значения вручную, как предлагает эта запись в блоге.
К вашему сведению, код с открытым исходным кодом и может быть найден здесь, надеюсь, тогда вы будете спать лучше.
Эта статья была написана главным образом потому, что я действительно ценю ежедневное использование этого расширения. Поэтому я хотел привлечь больше внимания и привлечь внимание общественности к такому удобному инструменту, который еще не получил широкого распространения в сообществе Vue.