Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
vite-plugin-vue-inspector
Advanced tools
jump to local IDE source code while click the element of browser automatically.
vite-plugin-vue-inspector is a Vite plugin that provides an inspector for Vue components. It allows developers to inspect and debug Vue components directly within the browser, making the development process more efficient and streamlined.
Component Inspection
This feature allows developers to inspect Vue components directly in the browser. By integrating the plugin into the Vite configuration, developers can click on components in the browser to see their details, such as props, data, and events.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueInspector from 'vite-plugin-vue-inspector';
export default defineConfig({
plugins: [vue(), VueInspector()]
});
Hot Module Replacement (HMR)
This feature enables Hot Module Replacement (HMR) for Vue components. When changes are made to a component, the inspector updates in real-time without requiring a full page reload, making the development process faster and more efficient.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueInspector from 'vite-plugin-vue-inspector';
export default defineConfig({
plugins: [vue(), VueInspector({
hot: true
})]
});
Customizable Shortcuts
This feature allows developers to customize the keyboard shortcuts used to toggle the inspector and close it. This can be particularly useful for developers who have specific preferences or need to avoid conflicts with other tools.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueInspector from 'vite-plugin-vue-inspector';
export default defineConfig({
plugins: [vue(), VueInspector({
shortcuts: {
toggle: 'ctrl-shift-i',
close: 'esc'
}
})]
});
Vue Devtools is a browser extension that provides a set of tools for debugging and inspecting Vue.js applications. It offers a similar component inspection feature but is more comprehensive, including state management, routing, and performance monitoring. Unlike vite-plugin-vue-inspector, Vue Devtools is not specific to Vite and can be used with any Vue.js project.
vite-plugin-inspect is a Vite plugin that provides an inspector for Vite projects. It allows developers to inspect the module graph, view the transformation pipeline, and debug Vite-specific issues. While it is not specific to Vue components, it offers a broader range of inspection tools for Vite projects in general.
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 & SSR.
# vite-plugin-vue-inspector
pnpm install vite-plugin-vue-inspector -D
# unplugin-vue-inspector
pnpm install unplugin-vue-inspector -D
// for Vue2
import { defineConfig, } from 'vite'
import { createVuePlugin, } from 'vite-plugin-vue2'
import Inspector from 'unplugin-vue-inspector/vite' // OR 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 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
export default defineConfig({
plugins: [Vue(), Inspector()],
})
// for Nuxt3
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'
import Inspector from 'vite-plugin-vue-inspector'
export default defineNuxtConfig({
modules: [
['unplugin-vue-inspector/nuxt', {
enabled: true,
toggleButtonVisibility: 'always',
}],
],
})
interface VitePluginInspectorOptions {
/**
* Vue version
* @default 3
*/
vue?: 2 | 3
/**
* Default enable state
* @default false
*/
enabled?: boolean
/**
* Define a combo key to toggle inspector
* @default 'control-shift' on windows, 'meta-shift' on other os
*
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
* examples: control-shift, control-o, control-alt-s meta-x control-meta
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
* You can also disable it by setting `false`.
*/
toggleComboKey?: string | false
/**
* Toggle button visibility
* @default 'active'
*/
toggleButtonVisibility?: 'always' | 'active' | 'never'
/**
* Toggle button display position
* @default top-right
*/
toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
/**
* append an import to the module id ending with `appendTo` instead of adding a script into body
* useful for frameworks that do not support transformIndexHtml hook (e.g. Nuxt3)
*
* WARNING: only set this if you know exactly what it does.
*/
appendTo?: string | RegExp
/**
* Customize openInEditor host (e.g. http://localhost:3000)
* @default false
* @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
*/
openInEditorHost?: string | false
/**
* lazy load inspector times (ms)
* @default false
*/
lazyLoad?: number | false
/**
* disable inspector on editor open
* @default false
*/
disableInspectorOnEditorOpen?: boolean
/**
* Hide information in VNode and produce clean html in DevTools
*
* Currently, it only works for Vue 3
*
* @default true
*/
cleanHtml?: boolean
/**
* Target editor when open in editor (v5.1.0+)
*
* @default code (Visual Studio Code)
*/
launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'cursor'
}
Value | Editor | Linux | Windows | OSX |
---|---|---|---|---|
appcode | AppCode | ✓ | ||
atom | Atom | ✓ | ✓ | ✓ |
atom-beta | Atom Beta | ✓ | ||
brackets | Brackets | ✓ | ✓ | ✓ |
clion | Clion | ✓ | ✓ | |
code | Visual Studio Code | ✓ | ✓ | ✓ |
code-insiders | Visual Studio Code Insiders | ✓ | ✓ | ✓ |
codium | VSCodium | ✓ | ✓ | ✓ |
emacs | Emacs | ✓ | ||
idea | IDEA | ✓ | ✓ | ✓ |
notepad++ | Notepad++ | ✓ | ||
pycharm | PyCharm | ✓ | ✓ | ✓ |
phpstorm | PhpStorm | ✓ | ✓ | ✓ |
rubymine | RubyMine | ✓ | ✓ | ✓ |
sublime | Sublime Text | ✓ | ✓ | ✓ |
vim | Vim | ✓ | ||
visualstudio | Visual Studio | ✓ | ||
webstorm | WebStorm | ✓ | ✓ | ✓ |
cursor | Cursor | ✓ | ✓ | ✓ |
Starting from v5.1.0, We recommend using the launchEditor
option configuration to specify the IDE (Please ensure that the editor's environment variables are correctly configured beforehand.)
It uses an environment variable named LAUNCH_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 VS Code when inspection clicked, set export LAUNCH_EDITOR=code
in your shell.
install VS Code command line tools, see the official docs
set env to shell, like .bashrc
or .zshrc
export LAUNCH_EDITOR=code
add the configuration in the settings.json
restart the VS Code (All Windows should be closed to take effect)
{
// other config...
"terminal.integrated.env.linux": {
"EDITOR": "code"
}
}
just set env with an absolute path to shell, like .bashrc
or .zshrc
(only MacOS)
export LAUNCH_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
OR
install WebStorm command line tools
then set env to shell, like .bashrc
or .zshrc
export LAUNCH_EDITOR=webstorm
just set env with an absolute path to shell, like .bashrc
or .zshrc
(only MacOS)
export LAUNCH_EDITOR='/Applications/PhpStorm.app/Contents/MacOS/phpstorm'
OR
install PhpStorm command line tools
then set env to shell, like .bashrc
or .zshrc
export LAUNCH_EDITOR=phpstorm
Yes! you can also use vim if you want, just set env to shell
export LAUNCH_EDITOR=vim
enabled
option default value changed from true
to false
.Template Engine (e.g. pug)
.You can also use control inspector programmatically, by accessing the __VUE_INSPECTOR__
global variable.
import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
const inspector: VueInspectorClient = window.__VUE_INSPECTOR__
if (inspector) {
// enable inspector
inspector.enable()
// or
inspector.disable()
}
This project is inspired by react-dev-inspector .
Partially implementation is inspired by vite-plugin-svelte-inspector .
[Chinese] 点击页面元素,这个Vite插件帮我打开了Vue组件
FAQs
jump to local IDE source code while click the element of browser automatically.
The npm package vite-plugin-vue-inspector receives a total of 601,745 weekly downloads. As such, vite-plugin-vue-inspector popularity was classified as popular.
We found that vite-plugin-vue-inspector demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.