jump to local IDE source code while click the element of browser automatically.

Overview

vite-plugin-vue-inspector

📖 Introduction

A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3.

vite-plugin-vue-inspector

📦 Installation

# pnpm 
pnpm install vite-plugin-vue-inspector -D

# yarn
yarn add vite-plugin-vue-inspector -D

# npm
npm install vite-plugin-vue-inspector -D

🦄 Usage

Configuration Vite

// for vue2

import { defineConfig } from "vite"
import { createVuePlugin } from "vite-plugin-vue2"
import Inspector from "vite-plugin-vue-inspector"

export default defineConfig({
  plugins: [
    createVuePlugin(),
    Inspector({
      vue: 2,
    }),
  ],
})
// for vue3

import { defineConfig } from "vite"
import Vue from "@vitejs/plugin-vue"
import Inspector from "vite-plugin-vue-inspector"

export default defineConfig({
  plugins: [Vue(), Inspector()],
})

Example

🔌 Configuration IDE / Editor

It uses an environment variable named VUE_EDITOR to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.

For example, if you want it always open VSCode when inspection clicked, set export VUE_EDITOR=code in your shell.

VSCode

  • install VSCode command line tools, see the official docs install-vscode-cli

  • set env to shell, like .bashrc or .zshrc

    export VUE_EDITOR=code

WebStorm

  • just set env with an absolute path to shell, like .bashrc or .zshrc (only MacOS)

    export VUE_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'

OR

  • install WebStorm command line tools

  • then set env to shell, like .bashrc or .zshrc

    export VUE_EDITOR=webstorm

Vim

Yes! you can also use vim if you want, just set env to shell

export VUE_EDITOR=vim

💡 Notice

  • It only work in develop mode .
  • It does not currently support SSR and Template Engine (e.g. pug) .

🌸 Thanks

This project is inspired by react-dev-inspector .

🤖️ Analysis of Theory

[Chinese] 点击页面元素,这个Vite插件帮我打开了Vue组件

📄 License

MIT LICENSE

Comments
  • Windows Usage

    Windows Usage

    How to use this vite plugin in windows OS ?

    I tried both ways

    1. command line set env
    2. Edit the system environment variables

    Screenshot (120)


    defaultEditor option in vite would be so helpfull instead of setting env

    Inspector({
        enabled: true,
        defaultEditor: 'code'
    })
    

    Thanks

    opened by sadeghbarati 16
  • fix(launch-editor): ignore output to stderr

    fix(launch-editor): ignore output to stderr

    Hi @webfansplz 👋 !

    I love this plugin, and also the fact that you can just click a button to crack open a StackBlitz 🔥 !

    However, I was a bit annoyed by the output it rendered on StackBlitz when clicking a component

    image

    The reason is that the ps command does not exist (yet) on StackBlitz and thus renders jsh: command not found: ps on the stderr stream. Because we're only interested in what's being rendered on stdout, we can ignore that stream.

    I've sent the same PR to the launch-editor package https://github.com/yyx990803/launch-editor/pull/41.

    I'm pretty sure the changes should be ok, although I can't test what's being rendered on Windows but I did notice that the launch-editor also ignores stderr for Windows. However, they seem to be using a powershell command.


    We can make opening a file on StackBlitz even faster. But that's entirely your call if you want to add this code block or not. But by adding this at the top of guessEditor(), will make opening the file noticeably faster.

    if (process.versions.webcontainer) {
        return [process.env.EDITOR];
    }
    

    The reason is that spawning the ps command takes a bit of compute while we already know it's going to fail. You can compare the project with this project where I've used the VUE_EDITOR environment variable.

    Kind regards Sam

    opened by SamVerschueren 6
  • Disable button

    Disable button

    Hey!

    Is there a way to disable the button functionality by default, everytime I refresh the page, the button is enable so I have to manually disable it so I can interact with my app

    opened by dajpes 4
  • Cannot read properties of undefined (reading 'browserHash')

    Cannot read properties of undefined (reading 'browserHash')

    I have just tried using the latest version 0.2.5, but got the following error:

    3:26:36 PM [vite] Internal server error: Cannot read properties of undefined (reading 'browserHash')
          at transformIndexHtml (/home/bodo/proj/node_modules/vite-plugin-vue-inspector/dist/index.js:538:48)
          at applyHtmlTransforms (/home/bodo/proj/node_modules/vite/dist/node/chunks/dep-611778e0.js:27150:27)
          at processTicksAndRejections (node:internal/process/task_queues:96:5)
          at async viteIndexHtmlMiddleware (/home/bodo/proj/node_modules/vite/dist/node/chunks/dep-611778e0.js:55903:28)
    

    I am also using vite-plugin-html-2.1.2. Maybe there is a conflict?

    opened by bodograumann 3
  • Issue to add plugin

    Issue to add plugin

    Hi, on a project ts vite v2.9 vue v.3.2 adding the plugin on vite.config.ts as is :

     plugins: createVitePlugins(viteEnv, isBuild, prodMock),
    

    where createVitePlugins is

    import Inspector from "vite-plugin-vue-inspector"
    export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock) {
    ...
        const vitePlugins: (Plugin | Plugin[])[] = [
        vue(),
        vueJsx(),
    ...
        Inspector()        < here the problem 
     ];
     ...
    

    I have this error :

    (alias) Inspector(options?: VitePluginInspectorOptions | undefined): PluginOption
    import Inspector
    Type 'PluginOption' is not assignable to type 'Plugin | Plugin[]'.
      Type 'undefined' is not assignable to type 'Plugin | Plugin[]'.ts(2322)
    

    How to add the plugin using this mode ?

    Thanks in advance

    opened by clabnet 2
  • feat(launch-editor): add short path for WebContainer

    feat(launch-editor): add short path for WebContainer

    Small PR to improve performance on StackBlitz WebContainer. Currently when clicking a component you notice a small delay (~0.5 - 1s is my gutfeeling) because it spins up the ps command. With this short path it feels quite instant.

    opened by SamVerschueren 2
  • 请问一下这个依赖是在哪里声明的?

    请问一下这个依赖是在哪里声明的?

    import inspectorOptions from "virtual:vue-inspector-options"
    

    下面是具体文件的链接 https://github.com/webfansplz/vite-plugin-vue-inspector/blob/8de93d8f22717b1178eefa835ede7ee70883f9c4/src/Overlay.vue#L40

    virtual:vue-inspector-options 这个依赖是在哪里声明的呢? 只见过node:path这种内置模块的导入, 这个virtual语法有相关的文档吗? 谢谢

    opened by dengshenkk 1
  • Network Error

    Network Error

    Because inspectorOptions.serverOptions?.host can be true,so the final baseUrl will be something like https://true:3000/open-stack-frame-in-editor, then lead to a network error:

    const isClient = typeof window !== "undefined"
    const importMetaUrl = isClient ? new URL(import.meta.url) : {}
    const protocol = inspectorOptions.serverOptions?.https ? "https:" : importMetaUrl?.protocol
    const host = inspectorOptions.serverOptions?.host ?? importMetaUrl?.hostname
    const port = inspectorOptions.serverOptions?.port ?? importMetaUrl?.port
    const baseUrl = isClient ? `${protocol}//${host}:${port}` : ""
    

    image

    opened by jiyingzhi 1
  • some suggestion

    some suggestion

    I've been using it for a while and have some experience suggestions

    1. The operation button is too big, please make it smaller. It would be better to have a little transparency in disabled state
    2. The image used for the button is from Github, but sometimes the connection is not smooth, so it cannot be loaded

    Thanks for developing this plugin

    opened by a145789 1
  • fix: Vite should be devDependencies

    fix: Vite should be devDependencies

    vite 在 dependencies 中会造成重复下载,导致 import { Plugin } from 'vite'; 引用路径不一致,ts 效验出错

    "import("node_modules/vite-plugin-vue-inspector/node_modules/vite/dist/node/index").Plugin" 到类型 "import("node_modules/vite/dist/node/index").Plugin" 的转换可能是错误的,因为两种类型不能充分重叠。如果这是有意的,请先将表达式转换为 "unknown"

    opened by a145789 1
  • Failed to start Vite dev server

    Failed to start Vite dev server

    Error log:

    failed to load config from /root/dev/web/daotl-vitesse/vite.config.ts
    error when starting dev server:
    file:///root/dev/web/daotl-vitesse/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-vue-inspector/dist/index.mjs:32
    import { parse as babelParse, traverse as babelTraverse } from "@babel/core";
                                  ^^^^^^^^
    SyntaxError: Named export 'traverse' not found. The requested module '@babel/core' is a CommonJS module, which may not support all module.exports as named exports.
    CommonJS modules can always be imported via the default export, for example using:
    
    import pkg from '@babel/core';
    const { parse: babelParse, traverse: babelTraverse } = pkg;
    
        at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
        at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
        at async Promise.all (index 0)
        at async ESMLoader.import (node:internal/modules/esm/loader:527:24)
        at async loadConfigFromBundledFile (file:///root/dev/web/daotl-vitesse/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-c842e491.js:64010:21)
        at async loadConfigFromFile (file:///root/dev/web/daotl-vitesse/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-c842e491.js:63895:28)
        at async resolveConfig (file:///root/dev/web/daotl-vitesse/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-c842e491.js:63519:28)
        at async createServer (file:///root/dev/web/daotl-vitesse/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-c842e491.js:62819:20)
        at async CAC.<anonymous> (file:///root/dev/web/daotl-vitesse/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/cli.js:707:24)
     ELIFECYCLE  Command failed with exit code 1.
    
    opened by NexZhu 2
  • support reverse proxies

    support reverse proxies

    hi, we really liked your plugin and wanted do use it in our setup.

    We are using devspace for development, which we use to setup a reverse-proxy and development container with our application.

    The application container is running under port 80 (http) and on localhost. vite.config.ts:

        server: {
            host: true,
            port: 80,
            open: 'https://mengencloud.swp.localhost:8443',
        },
    

    The nginx reverse proxy is running on https://mengencloud.swp.localhost:8443

    This leads to the following error: image

    The inspector uses the (wrong) port from the vite.config.ts and not from import.meta.url.

    This pull-request uses the import.meta.url in a browser-context and ignores any other urls from vite. Which works for us, but leads maybe to problems in other use-cases.

    We would like to know how a fix like this could be integrated into vite-plugin-vue-inspector.

    opened by frank-swp 3
  • does not provide an export named 'render'

    does not provide an export named 'render'

    环境win10,vue2,vite3

    • vite:3.1.3
    • vite-plugin-vue2:2.0.2 配置文件如下,
    const config = (mode) => {
      const envConfig = loadEnv(mode, process.cwd());
      return defineConfig({
        resolve: {
          plugins: [
            createVuePlugin({ jsx: true }),
            Inspector({
              vue: 2,
            }),
          ],
        }
      });
    };
    

    启动后打开页面,控制台有如下报错 65473B8E-7578-47ef-A6FF-3603FDA2EB10 我试了一下vite2是正常的,在3里面会有这个报错

    opened by sxuan11 0
  • Unquoted attribute error

    Unquoted attribute error

    This is a really nice looking plugin, but it does not work for me.

    I have tried adding it to my vite (v2.9.5) vue3 app and to storybook (vite then webpack), and both return the following error:

    [vite] Internal server error: Unquoted attribute value cannot contain U+0022 ("), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).
    Plugin: vite-plugin-vue-inspector
    File: @vue/compiler-core/dist/compiler-core.cjs.js:19:19
    
    opened by stephenhebert 1
  • feat: add disableOnKeyup option

    feat: add disableOnKeyup option

    normally, we don't want to keep the effect after navigating to code editor, this PR adds the option disableOnKeyup that can disable the plugin after keyup

    opened by lil-000 0
Owner
webfansplz
webfansplz
This package allows you to show a placeholder-component while inertia fetches the content of ne new page while routing

inertia vue placeholder middleware This package adds a component placeholder middleware for inertia vue. instead of the InertiaProgressBar you can sho

null 6 Jul 24, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

雪月欧巴 84 Nov 28, 2022
Stale-while-revalidate data fetching for Vue

swrv swrv (pronounced "swerve") is a library using the @vue/composition-api for remote data fetching. It is largely a port of swr. Documentation The n

Kong 1.8k Dec 29, 2022
:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台 客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter

花裤衩 80.1k Dec 31, 2022
🎉 A Vue.js 3.0 UI Library made by Element team

Element Plus - A Vue.js 3.0 UI library ?? Vue 3.0 Composition API ?? Written in TypeScript Status: Beta This project is still under heavy development.

null 18.3k Jan 9, 2023
Everything you wish the HTML