webfansplz / vite-plugin-vue-devtools Goto Github PK
View Code? Open in Web Editor NEWVite + Vue DevTools = DX 🔥
License: MIT License
Vite + Vue DevTools = DX 🔥
License: MIT License
First of all, thanks for building this extension!
In our project we are using unplugin-vue-router
which generates pages according to a folder/file structure and syntax, much like it does for Nuxt. This does not get picked up by the tools (router tab says router is not installed). Is there anything you could do on your side to support this?
dev mode occur this error:
10:06:44 [vite] Internal server error: plugin.load.call is not a function
at Object.load (D:\lt\lt_tqt_front\node_modules\vite\dist\node\chunks\dep-689425f3.js:39293:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async doTransform (D:\lt\lt_tqt_front\node_modules\vite\dist\node\chunks\dep-689425f3.js:49982:24)
10:06:44 [vite] Internal server error: plugin.load.call is not a function
at Object.load (D:\lt\lt_tqt_front\node_modules\vite\dist\node\chunks\dep-689425f3.js:39293:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async doTransform (D:\lt\lt_tqt_front\node_modules\vite\dist\node\chunks\dep-689425f3.js:49982:24)
10:06:45 [vite] Internal server error: plugin.load.call is not a function
at Object.load (D:\lt\lt_tqt_front\node_modules\vite\dist\node\chunks\dep-689425f3.js:39293:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async doTransform (D:\lt\lt_tqt_front\node_modules\vite\dist\node\chunks\dep-689425f3.js:49982:24)
10:06:45 [vite] Internal server error: plugin.load.call is not a function
at Object.load (D:\lt\lt_tqt_front\node_modules\vite\dist\node\chunks\dep-689425f3.js:39293:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async doTransform (D:\lt\lt_tqt_front\node_modules\vite\dist\node\chunks\dep-689425f3.js:49982:24)
vite.config.ts config below:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
const path = require('path');
const { ENV } = process.env;
export default defineConfig({
server: {
port: 3012,
},
resolve: {
alias: {
"@": path.resolve(__dirname, 'src')
},
},
plugins: [
VueDevTools(),
vue()
],
})
dependencies:
If the information above cannot be reproduced the error, I can provide an example for this error.
vue2.7目前也是支持setup的,理论上是可以支持的
Be related to #1 (comment) and inspired by nuxt/devtools#282
Tracking of performance-related issues:
Per title, click on EyeDropper button and there will be a blank div with message Launching EyeDropper
prompted, checking console, saw following error message:
__eyedropper-9aeb7406.js:37 Uncaught (in promise) ReferenceError: EyeDropper is not defined
at open (__eyedropper-9aeb7406.js:37:26)
at __eyedropper-9aeb7406.js:47:7
at index-793e4620.js:3451:88
at callWithErrorHandling (index-793e4620.js:1386:18)
at callWithAsyncErrorHandling (index-793e4620.js:1394:17)
at hook.__weh.hook.__weh (index-793e4620.js:3436:19)
at flushPostFlushCbs (index-793e4620.js:1526:41)
at flushJobs (index-793e4620.js:1559:5)
If possible, vite-plugin-vue-devtools
will be very extensible in the future, and so far it is quite feature-rich
Like vue devtools
, Toggle Component Inspector
- locates the DOM and modifies the component's value, as does pinia
Add component doc tab to show the Vue SFC details in the project.
使用 vite Node.js API 启动服务时,会有 resolveConfig.inlineConfig 属性,process.env.NODE_ENV 被替换了导致错误,问题同 #54
stackblitz: https://stackblitz.com/edit/vitejs-vite-z88y1g?file=config%2Fcommon.js
不如把console,network等常用功能也加进来,这样我就省了按F12了。两个都开的话,岂不是很麻烦?
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/runner/work/WeakAuras-Companion/WeakAuras-Companion/node_modules/execa/index.js from /home/runner/work/WeakAuras-Companion/WeakAuras-Companion/node_modules/vite-plugin-vue-devtools/dist/index.cjs not supported.
Anything in this release that would require a docs update maybe? If something was changed to ESM that would be good to know.
bug report :
There is a console warning error when switching components in dev mode
reproduce: https://github.com/xxholly32/vite-plugin-vue-devtools-bug
i think sth wrong with [this code line] (https://github.com/webfansplz/vite-plugin-vue-devtools/blob/main/src/client/logic/pinia.ts#L244)
I don't understand the purpose of this pstore variable. Can remove it ?
Originally posted by Stanzilla May 8, 2023
Hey there! First, thank you so much for making this plugin.
I've been trying to migrate our Vue + Vite + Electron app to it but getting the following error:
16:21:22.925 › App starting...
Illegal tag name. Use '<' to print '<'.
Illegal tag name. Use '<' to print '<'. (x2)
4:21:24 PM [vite] Internal server error: Illegal tag name. Use '<' to print '<'.
Plugin: vite-plugin-vue-inspector
File: /Users/stan/projects/personal/WeakAuras-Companion/src/components/LandingPage.vue?vue&type=script&lang.js
at createCompilerError (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:19:19)
at emitError (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1613:29)
at parseChildren (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:959:21)
at Object.baseParse (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:858:23)
at parse (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:3119:25)
at result (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/vite-plugin-vue-inspector/dist/index.cjs:65:51)
at new Promise (<anonymous>)
at compileSFCTemplate (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/vite-plugin-vue-inspector/dist/index.cjs:62:24)
at TransformContext.transform (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/vite-plugin-vue-inspector/dist/index.cjs:221:16)
at /Users/stan/projects/personal/WeakAuras-Companion/node_modules/vite-plugin-inspect/dist/index.cjs:878:32
I googled a bit and found threads were people were able to solve this but none of the solutions seemed to apply to us.
The code is here https://github.com/WeakAuras/WeakAuras-Companion/tree/devtools
Any idea as to what we are doing wrong?
Cheers!
It appears the component inspector tool (click on a component) doesn't work correctly in our project. The following short gif illustrates the issue, where no matter which component I click it always selects the main App.vue
component:
Another thing I've noticed is that, unlike the Vue Devtools, the component inspector is unable to select deep components, for example an icon component within a button within another component. It always selects the outer component. This is also illustrated in the gif above.
It pains me that I am unable to provide the code for reproduction, it is a closed source project. It does work in the Chrome devtools if that is any indication.
EDIT: I also just noticed VSCode's terminal is showing these errors whenever I click on a component to inspect:
Could not open DateFormat.vue in the editor. The editor process exited with an error: spawn code-insiders ENOENT.
Hey there!
First of all, huge kudos for developing this tool. It works really great!
I am experiencing an issue however that this package only works with Vite 3.0.0 and higher.
I tried to use this package in my project where I am using vite 2.9.X and it results in a problem:
[vite] Internal server error: plugin.load.call is not a function
When I bump to 3.0.0 it works as expected. However due to other deps, unit tests, and others I cannot bump the vite version higher.
Would you be able to provide some backward compatibility to vite 2.9.X?
I can help with that if needed :)
Display components events/emits in timeline.
I would like to use this package instead of the nuxt devtools primarily for the ability to see component tree & state (as an alternative to browser based vue-devtools extension).
Are you able to advise why your plugin wouldn't work for Nuxt SSR apps? As in, I did look into the code and didn't find anything specific that makes it incompatible with Nuxt SSR apps. I would like to learn what I missed looking.
Thanks in advance.
We are using Laravel and InertiaJs so our 'index.js' html page is currently loaded by vite in index.blade.php
I see you provided an appendTo if you don't use a html file.. How does that work ? Are there any examples for using that?
index.blade.php
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project</title>
@vite('scripts/index.ts')
</head>
<body>
<div id="container">
@inertia
</div>
</body>
</html>
Thanks for your work on this! It's really an incredible tool 🙌
Our apps have a requirement that they need to integrate with legacy code, so our setup imports main.ts as a module from a separate html file built by a django server, and the transformIndexHtml method of injection doesn't properly inject the devtools.
I noticed that the vite-plugin-vue-inspector project supports an appendTo config option, which supports our configuration.
Would it be possible for this project to support this config option as well?
RT
Currently opening an array or list of objects just shows a basic list all named the same - I propose adding a textbox somewhere where a field or jpath name can be written to use as the actual name of the object.
So for example, instead of just showing Users > User 1, User 2 - you could put "firstName" in the box and it would display Users > John, Jane, Danny
I cannot get this to load in my current setup. Below is a snippet from my vite.config.ts
plugins (note I tried to disable all except Vue and it still wouldn't load).
Also, we are not currently hiding devtools on our app. Let me know what other information I can provide to help figure this out, as I LOVE the power this plugin offers 🎉
Vue: 3.3.2
Vite: 4.3.5
vue-plugin-devtools: 0.0.21
plugins: [
vueDevTools(),
chunkSplitPlugin({
// custom config for our chunks
}),
symfonyPlugin(),
vueJsx(),
vue({
template: {
compilerOptions: {
whitespace: 'preserve',
},
},
}),
createSvgIconsPlugin({
iconDirs: [resolve(__dirname, 'assets/icons/')],
symbolId: '[name]',
inject: 'body-first',
}),
sentryVitePlugin({
// custom config for our sentry setup
}),
],
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
This repository currently has no open or pending branches.
.github/workflows/ci.yml
actions/checkout v3
actions/setup-node v3
package.json
@vueuse/core ^10.2.1
@vueuse/integrations ^10.2.1
@webfansplz/vuedoc-parser ^0.0.3
algoliasearch ^4.18.0
birpc ^0.2.12
execa ^7.1.1
json-editor-vue ^0.10.6
nanoid ^4.0.2
sirv ^2.0.3
splitpanes ^3.1.5
vanilla-jsoneditor ^0.17.8
vite-hot-client ^0.2.1
vite-plugin-inspect ^0.7.32
vite-plugin-vue-inspector ^3.4.2
vue-router ^4.2.2
vuedraggable ^4.1.0
xterm ^5.2.1
xterm-addon-fit ^0.7.0
@algolia/client-search ^4.18.0
@antfu/eslint-config ^0.39.6
@antfu/ni ^0.21.4
@iconify/json ^2.2.85
@nuxt/devtools-ui-kit ^0.6.6
@types/codemirror ^5.60.8
@types/node ^20.3.3
@types/splitpanes ^2.2.1
@unocss/eslint-config ^0.53.4
@unocss/reset ^0.53.4
@vitejs/plugin-vue ^4.2.3
bumpp ^9.1.1
codemirror ^6.0.1
codemirror-theme-vars ^0.1.2
dayjs ^1.11.9
eslint 8.44.0
fast-glob ^3.3.0
floating-vue 2.0.0-beta.24
fuse.js ^6.6.2
image-meta ^0.1.1
lint-staged ^13.2.3
npm-run-all ^4.1.5
ohash ^1.1.2
pathe ^1.1.1
pinia ^2.1.4
pnpm ^8.6.5
rimraf ^5.0.1
simple-git-hooks ^2.8.1
taze ^0.11.2
typescript ^5.1.6
unbuild ^1.2.1
unocss ^0.53.4
unplugin-auto-import ^0.16.4
unplugin-vue-components ^0.25.1
vis-data ^7.1.6
vis-network ^9.1.6
vite ^4.3.9
vite-dev-rpc ^0.1.2
vite-plugin-pages ^0.31.0
vue ^3.3.4
vue-virtual-scroller 2.0.0-beta.8
pnpm 8.6.5
playground/package.json
@vueuse/core ^10.2.1
pinia ^2.1.4
vue ^3.3.4
vue-router ^4.2.2
@vitejs/plugin-vue ^4.2.3
serve ^14.2.0
typescript ^5.1.6
vite ^4.3.9
vite-plugin-inspect ^0.7.32
My routes are dynamically added by router.addRoute()
, but them cannot be displayed.
This is a comparison with the VueDevtool of the browser:
reproduce: https://github.com/hooray/fantastic-admin-devtools
Search and install JavaScript package.
assets don't show all the images in the system,
Files in src/assets will not be scanned
virtual:vue-devtools-options 模块中 vite 配置 define process.env.NODE_ENV 被替换了,见下图:
stackblitz: https://stackblitz.com/edit/vitejs-vite-z88y1g?file=vite.config.js
add vue.js,vue-router,pinia,vueuse documentation card.
I was playing with some options, this is one: https://stackblitz.com/edit/vue-web-component-wrapper-iduyws?file=demo-app-vite%2Fvite.config.ts&startScript=vite-demo. We are working with https://github.com/EranGrin/vue-web-component-wrapper
It needs manually set width, height and top values via devtools, you know, because we are working in swampy land with styles 😁
Devtools extension doesn't works too, icon is light up but tab is not visible and it doesn't load at all.
error when starting dev server:
TypeError: ws.on is not a function
at createRPCServer (/Users/haomo/codes/block-design-components/block-design-jeecg/node_modules/vite-plugin-vue-devtools/dist/index.cjs:77:6)
at configureServer (/Users/haomo/codes/block-design-components/block-design-jeecg/node_modules/vite-plugin-vue-devtools/dist/index.cjs:13722:17)
at Object.configureServer (/Users/haomo/codes/block-design-components/block-design-jeecg/node_modules/vite-plugin-vue-devtools/dist/index.cjs:13763:7)
at createServer (/Users/haomo/codes/block-design-components/block-design-jeecg/node_modules/vite/dist/node/chunks/dep-66eb515d.js:69245:41)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async CAC.<anonymous> (/Users/haomo/codes/block-design-components/block-design-jeecg/node_modules/vite/dist/node/cli.js:14037:24)
Same with @vue/devtools
Extraneous non-props attributes (data-v-inspector) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
I'm sure I'm not leaving an issue properly, but this line is throwing an error for me:
If I update a store while running in vite dev
, the console shows Error: timeApi is not defined
. If I refresh the page, the store is updated.
I am not able to expand the tree list after a certain depth prob after 3 levels.
Is there any reason for this? Is there any other workaround to view objects on all depths?
EDIT: Upon looking I found out that the StateFieldsTree component has the condition to allow depth <= 2. So was this a design decision?
Other frameworks have the same problems, which has been the reason for creating these devtools. Maybe it is possible to make the vite-plugin-vue-devtools modular so that other frameworks can adopt them. Maybe you can work on it too.
Hello,
I'm facing an issue from 0.1.2.
When I try to update with npm, install was stuck.
To repro, I take your playground and I change
"vite-plugin-vue-devtools": "workspace:*"
by "vite-plugin-vue-devtools": "0.2.0"
I continue with version 0.1.1,
Best regards and good job anyway,
Shaenn
Support for copying or editing component setup, pinia state getter data, routes options
我在vite版uniapp使用插件,button标签导致编译出错,换成div后可正常运行
Just ran into this when trying to add this to a project that already had vite-plugin-inspect
installed.
Console output:
VITE v4.3.5 ready in 2273 ms
➜ Local: http://localhost:5174/
➜ Network: http://172.23.48.1:5174/
➜ Network: http://192.168.10.69:5174/
➜ Inspect: http://localhost:5174/__inspect/
➜ Inspect: http://localhost:5174/__inspect/
➜ press h to show help
版本 [email protected]
代码
<template>
<router-view v-slot="{ Component }">
<keep-alive :include="cacheRoutingList">
<component :is="Component" :key="$route.name" />
</keep-alive>
</router-view>
</template>
macOS Ventura 13.3.1
Arc
Vue 3.2.47
Vue DevTools v0.0.4
When opened, the browser is very clunky,The web page is in a crash state
Whether the icon can be displayed only by pressing the shortcut key
Be related to nuxt/devtools#266.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.