webfansplz / vite-plugin-vue-devtools Goto Github PK

View Code? Open in Web Editor NEW

1.6K 12.0 72.0 3.45 MB

Vite + Vue DevTools = DX 🔥

License: MIT License

TypeScript 50.06% CSS 1.44% HTML 0.32% Vue 48.13% JavaScript 0.05%

dx vue-devtools vite-plugin

vite-plugin-vue-devtools's Introduction

💡 Project Moved to vuejs/devtools-next

vite-plugin-vue-devtools's People

Contributors

Stargazers

Watchers

vite-plugin-vue-devtools's Issues

Whether the icon can be displayed only by pressing the shortcut key

Support for copying or editing component setup, pinia state getter data

Support for copying or editing component setup, pinia state getter data， routes options

When opened, the browser is very clunky

When opened, the browser is very clunky，The web page is in a crash state

Suggestion - possibility to add dynamic field to a list of object to show instead of just plain "Item #"

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

Perhaps most people prefer sorting custom feature items, such as placing insectors at the top or left, and so on

[Bug] Does not work on vite 2.9.X

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 :)

feat: npm module

Search and install JavaScript package.

希望属性可以复制，目前双击、右击、按下鼠标滑动选择都无法进行选中复制

Support for unplugin-vue-router

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?

`vite-plugin-inspect` gets installed twice if it has already been added to the project

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

when remove group ,the console get error

$G_ H(H%L9 ){I@)QP} L`0A$

Devtools not showing/loading

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>

pstore warning is reported by the console when using vitepress

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 ?

feat: popup devtools as Picture-in-Picture

Be related to #1 (comment) and inspired by nuxt/devtools#282

EyeDropper is not working with `Uncaught (in promise) ReferenceError: EyeDropper is not defined` error

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)

希望把main.vue里的button标签换成div，兼容uniapp

我在vite版uniapp使用插件，button标签导致编译出错，换成div后可正常运行

feat: eyedropper

[vite] Internal server error: Illegal tag name. Use '<' to print '<'.

Discussed in #5

^{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 '&lt;' to print '<'.
Illegal tag name. Use '&lt;' to print '<'. (x2)
4:21:24 PM [vite] Internal server error: Illegal tag name. Use '&lt;' 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!

feat: new floating panel

Be related to nuxt/devtools#266.

希望支持谷歌F12功能

不如把console，network等常用功能也加进来，这样我就省了按F12了。两个都开的话，岂不是很麻烦？

feat: component doc

Add component doc tab to show the Vue SFC details in the project.

Custom Elements (Web Components) support

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.

Cannot navigate tree after certain depth level.

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?

太卡了，能不能配置关闭某些功能

Impressive, but until 0.1.1

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

feat: documentations tab

add vue.js,vue-router,pinia,vueuse documentation card.

`timeApi` throwing error

I'm sure I'm not leaving an issue properly, but this line is throwing an error for me:

vite-plugin-vue-devtools/src/client/logic/pinia.ts

Line 191 in 5afc926

timeApi.addTimelineEvent({

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.

Does not support projects without index.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?

vite config define process.env.NODE_ENV

virtual:vue-devtools-options 模块中 vite 配置 define process.env.NODE_ENV 被替换了，见下图：

stackblitz: https://stackblitz.com/edit/vitejs-vite-z88y1g?file=vite.config.js

ui: devtools get covered by `top-layer`

原生的所写的弹窗打开后,因为出现了遮罩,没办法再去点击打开工具

Uncaught SyntaxError: Unexpected identifier 'development'

使用 vite Node.js API 启动服务时，会有 resolveConfig.inlineConfig 属性，process.env.NODE_ENV 被替换了导致错误，问题同 #54

stackblitz: https://stackblitz.com/edit/vitejs-vite-z88y1g?file=config%2Fcommon.js

Dynamically added routes cannot be displayed

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

components面板点击组件后，右侧状态不能刷新！

Can vite-plugin-vue-devtools be used to modify values in the interface?

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

The toggle DevTools shortcut is not working

macOS Ventura 13.3.1
Arc
Vue 3.2.47
Vue DevTools v0.0.4

Need a component tree inspector

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.

0.0.17 broke my build

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.

[vite] Internal server error: plugin.load.call is not a function

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：

"vue": "^3.2.25"

If the information above cannot be reproduced the error， I can provide an example for this error.

Cannot get devtools to load

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 🎉

Package versions

Vue: 3.3.2
Vite: 4.3.5
vue-plugin-devtools: 0.0.21

vite.config.ts

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
    }),
],

Performance Tracking

Tracking of performance-related issues:

Timeline
Graph(re-render, search)

Add support for other frameworks

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.

router-view中显示两个 component ？

版本 [email protected]

代码

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cacheRoutingList">
      <component :is="Component" :key="$route.name" />
    </keep-alive>
  </router-view>
</template>

在工具里面显示两个 component，如下图

因为在浏览器插件Vue Devtools 里面是正常的，如下图

The plugin encountered a warning during execution

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.

error when starting dev server: TypeError: ws.on is not a function

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)

assets don't show all the images in the system,

Files in src/assets will not be scanned

Support for Nuxt SSR apps

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.

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v3

actions/setup-node v3

npm

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

Check this box to trigger a request for Renovate to run again on this repository

Component emit events

Display components events/emits in timeline.