{"id":14990354,"url":"https://github.com/hellof2e/vite-plugin-dev-inspector","last_synced_at":"2025-03-04T06:04:35.983Z","repository":{"id":252885532,"uuid":"841314911","full_name":"hellof2e/vite-plugin-dev-inspector","owner":"hellof2e","description":"极力推荐🚀🚀🚀点击页面元素，编辑器直接打开本地代码文件，适用任何前端框架。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, Vue3, React, Svelte,Angular, SSR(All frameworks). ","archived":false,"fork":false,"pushed_at":"2024-09-04T12:57:11.000Z","size":12914,"stargazers_count":44,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-25T05:12:53.680Z","etag":null,"topics":["inspector","react-inspector","vue-inspector","webcomponents"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/vitejs-vite-shxjct?file=src%2FApp.vue","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hellof2e.png","metadata":{"files":{"readme":"README.en-US.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-12T06:50:20.000Z","updated_at":"2025-01-06T01:34:34.000Z","dependencies_parsed_at":"2024-09-24T16:02:10.506Z","dependency_job_id":"72baa066-7e76-48e8-ac77-95fe8d2fa8f0","html_url":"https://github.com/hellof2e/vite-plugin-dev-inspector","commit_stats":{"total_commits":74,"total_committers":2,"mean_commits":37.0,"dds":"0.013513513513513487","last_synced_commit":"e7697abc553ea53154a208af568d7a03362745e5"},"previous_names":["hellof2e/click-to-vue-component","hellof2e/vite-plugin-dev-inspector"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellof2e%2Fvite-plugin-dev-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellof2e%2Fvite-plugin-dev-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellof2e%2Fvite-plugin-dev-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellof2e%2Fvite-plugin-dev-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hellof2e","download_url":"https://codeload.github.com/hellof2e/vite-plugin-dev-inspector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241794121,"owners_count":20021190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inspector","react-inspector","vue-inspector","webcomponents"],"created_at":"2024-09-24T14:19:56.251Z","updated_at":"2025-03-04T06:04:35.961Z","avatar_url":"https://github.com/hellof2e.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/hellof2e/vite-plugin-dev-inspector\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/hellof2e/vite-plugin-dev-inspector/988a71dca91490cf4a604c98609b24f80f7eb383/logo.svg\" width=\"180\" alt=\"vite-plugin-dev-inspector\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-dev-inspector\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/npm/v/vite-plugin-dev-inspector\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/hellof2e/vite-plugin-dev-inspector/blob/main/LICENSE\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/github/license/hellof2e/vite-plugin-dev-inspector\" alt=\"License\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  Vite-plugin-dev-inspector\n\u003c/h1\u003e\n\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://stackblitz.com/edit/vitejs-vite-shxjct?file=src%2FApp.vue\"\u003e\u003cimg src=\"https://developer.stackblitz.com/img/open_in_stackblitz.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n\n## Introduction\n\nA vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2, Vue3, React, Svelte,Angular, SSR(All frameworks).\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./preview.gif\" alt=\"vite-plugin-vue-inspector\"\u003e\n\u003c/p\u003e\n\n## Installation\n\n```bash\n\n# vite-plugin-dev-inspector\n\nnpm install vite-plugin-dev-inspector -D\n\n\n```\n\n## Usage\n\n\n### Keyboard shortcut (快捷键)\n\n* Mac: Command(⌘) + Shift(⇧)\n* Windows: Ctrl + Shift(⇧)\n\n\n### Configuration Vite\n\n```ts\n// for Vue2\n\nimport { defineConfig, } from 'vite'\nimport { createVuePlugin, } from 'vite-plugin-vue2'\nimport inspector from 'vite-plugin-dev-inspector'\n\nexport default defineConfig({\n  plugins: [\n    createVuePlugin(),\n    inspector(),\n  ],\n})\n```\n\n```ts\n// for Vue3\n\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport inspector from 'vite-plugin-dev-inspector'\n\nexport default defineConfig({\n  plugins: [\n    Vue(),\n    inspector()\n  ],\n})\n```\n\n```ts\n// for react\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport inspector from 'vite-plugin-dev-inspector'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    react(),\n    inspector(),\n  ],\n})\n```\n\n```ts\n// for preact\nimport { defineConfig } from 'vite'\nimport preact from '@preact/preset-vite'\nimport inspector from 'vite-plugin-dev-inspector'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    preact(),\n    inspector(),\n  ],\n})\n```\n\n\n```ts\n// for preact\nimport { defineConfig } from 'vite'\nimport { svelte } from '@sveltejs/vite-plugin-svelte'\nimport inspector from 'vite-plugin-dev-inspector'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    svelte(),\n    inspector(),\n  ],\n})\n```\n\n### Options\n\n\n```ts\ninspector({\n  /**\n   * Toggle button visibility\n   * @default 'active'\n   */\n  toggleButtonVisibility?: 'always' | 'active' | 'never'\n\n  /**\n   * Default enable state\n   * @default false\n   */\n  enabled?: boolean\n\n  /**\n   * Define a combo key to toggle inspector\n   * @default 'control-shift' on windows, 'meta-shift' on other os\n   *\n   * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -\n   * examples: control-shift, control-o, control-alt-s  meta-x control-meta\n   * Some keys have native behavior (e.g. alt-s opens history menu on firefox).\n   * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.\n   * You can also disable it by setting `false`.\n   */\n  toggleComboKey?: string | false\n\n\n  /**\n   * append an import to the module id ending with `appendTo` instead of adding a script into body\n   * useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)\n   *\n   * WARNING: only set this if you know exactly what it does.\n   */\n  appendTo?: string | RegExp\n\n  /**\n   * Customize openInEditor host (e.g. http://localhost:3000)\n   * @default false\n   * @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.\n   */\n  openInEditorHost?: string | false\n\n  /**\n   * lazy load inspector times (ms)\n   * @default false\n   */\n  lazyLoad?: number | false\n\n  /**\n   * disable inspector on editor open\n   * @default false\n   */\n  disableInspectorOnEditorOpen?: boolean\n\n  /**\n   * Hide information in VNode and produce clean html in DevTools\n   *\n   * Currently, it only works for Vue 3\n   *\n   * @default true\n   */\n  cleanHtml?: boolean\n\n  /**\n   * Target editor when open in editor\n   *\n   * @default code (Visual Studio Code)\n   */\n  launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm'\n})\n```\n\n\n## Notes\nVite-plugin-dev-inspector is inspired by [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector), but it does not repy on front-end frameworks. It can support any front-end technology stack at the same time, such as Vue 2 \u0026 3, React, Angular, Svelte, Nuxt and SSR.\n\n## License\n\n[MIT LICENSE](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellof2e%2Fvite-plugin-dev-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhellof2e%2Fvite-plugin-dev-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellof2e%2Fvite-plugin-dev-inspector/lists"}