code-inspector

[![NPM version](https://img.shields.io/npm/v/code-inspector-plugin.svg)](https://www.npmjs.com/package/code-inspector-plugin) [![GITHUB star](https://img.shields.io/github/stars/zh-lx/code-inspector?style=flat&label=%E2%AD%90%EF%B8%8F%20stars)](https://github.com/zh-lx/code-inspector) [![NPM Downloads](https://img.shields.io/npm/dm/code-inspector-plugin.svg)](https://npmcharts.netlify.app/compare/code-inspector-plugin?minimal=true) [![MIT-license](https://img.shields.io/npm/l/code-inspector.svg)](https://opensource.org/licenses/MIT) [![GITHUB-language](https://img.shields.io/github/languages/top/zh-lx/code-inspector?logoColor=purple&color=purple)](https://github.com/zh-lx/code-inspector)

## 📖 Introduction Click the element on the page, it can automatically open the code editor and position the cursor to the source code of the element. ![code-inspector](https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/demo.gif) ## 💻 Try it out online - [vue online demo](https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts) - [react online demo](https://stackblitz.com/edit/vitejs-vite-svtwrr?file=vite.config.ts) - [preact online demo](https://stackblitz.com/edit/vitejs-vite-iyawbf?file=vite.config.ts) - [solid online demo](https://stackblitz.com/edit/solidjs-templates-6u76jn?file=vite.config.ts) - [qwik online demo](https://stackblitz.com/edit/vitejs-vite-antzds?file=vite.config.ts) - [svelte online demo](https://stackblitz.com/edit/vitejs-vite-zoncqr?file=vite.config.ts) - [astro online demo](https://stackblitz.com/edit/withastro-astro-f5xq1t?file=astro.config.mjs) ## 🎨 Support The following are which compilers, web frameworks and editors we supported now: - The following bundlers are currently supported:
✅ webpack
✅ vite
✅ rspack / rsbuild
✅ farm
✅ esbuild
✅ turbopack
✅ mako
- The following Web frameworks are currently supported:
✅ vue2 / vue3 / nuxt
✅ react / nextjs / umijs
✅ preact
✅ solid
✅ qwik
✅ svelte
✅ astro
- [Supported editor list](https://github.com/zh-lx/launch-ide?tab=readme-ov-file#-supported-editors) | [and Others](https://inspector.fe-dev.cn/en/guide/ide.html) ## 🚀 Install ```perl npm i code-inspector-plugin -D # or yarn add code-inspector-plugin -D # or pnpm add code-inspector-plugin -D ``` ## 🌈 Usage Please check here for more usage information: [code-inspector-plugin configuration](https://inspector.fe-dev.cn/en/guide/start.html#configuration) - 1.Configuring Build Tools

Click to expand configuration about: webpack

```js // webpack.config.js const { codeInspectorPlugin } = require('code-inspector-plugin'); module.exports = () => ({ plugins: [ codeInspectorPlugin({ bundler: 'webpack', }), ], }); ```

Click to expand configuration about: vite

```js // vite.config.js import { defineConfig } from 'vite'; import { codeInspectorPlugin } from 'code-inspector-plugin'; export default defineConfig({ plugins: [ codeInspectorPlugin({ bundler: 'vite', }), ], }); ```

Click to expand configuration about: rspack

```js // rspack.config.js const { codeInspectorPlugin } = require('code-inspector-plugin'); module.exports = { // other config... plugins: [ codeInspectorPlugin({ bundler: 'rspack', }), // other plugins... ], }; ```

Click to expand configuration about: rsbuild

```js // rsbuild.config.js const { codeInspectorPlugin } = require('code-inspector-plugin'); module.exports = { // other config... tools: { rspack: { plugins: [ codeInspectorPlugin({ bundler: 'rspack', }), ], }, }, }; ```

Click to expand configuration about: esbuild

```js // esbuild.config.js const esbuild = require('esbuild'); const { codeInspectorPlugin } = require('code-inspector-plugin'); esbuild.build({ // other configs... // [注意] esbuild 中使用时，dev 函数的返回值需自己根据环境判断，本地开发的环境返回 true，线上打包返回 false plugins: [codeInspectorPlugin({ bundler: 'esbuild', dev: () => true })], }); ```

Click to expand configuration about: farm

```js // farm.config.js import { defineConfig } from '@farmfe/core'; import { codeInspectorPlugin } from 'code-inspector-plugin'; export default defineConfig({ vitePlugins: [ codeInspectorPlugin({ bundler: 'vite', }), // ...other code ], }); ```

Click to expand configuration about: vue-cli

```js // vue.config.js const { codeInspectorPlugin } = require('code-inspector-plugin'); module.exports = { // ...other code chainWebpack: (config) => { config.plugin('code-inspector-plugin').use( codeInspectorPlugin({ bundler: 'webpack', }) ); }, }; ```

Click to expand configuration about: nuxt

- For nuxt3.x : ```js // nuxt.config.js import { codeInspectorPlugin } from 'code-inspector-plugin'; // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ vite: { plugins: [codeInspectorPlugin({ bundler: 'vite' })], }, }); ``` - For nuxt2.x : ```js // nuxt.config.js import { codeInspectorPlugin } from 'code-inspector-plugin'; export default { build: { extend(config) { config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' })); return config; }, }, }; ```

Click to expand configuration about: next.js

- For next.js(<= 14.x): ```js // next.config.js const { codeInspectorPlugin } = require('code-inspector-plugin'); const nextConfig = { webpack: (config, { dev, isServer }) => { config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' })); return config; }, }; module.exports = nextConfig; ``` - For next.js(15.0.x ~ 15.2.x): ```js import type { NextConfig } from 'next'; import { codeInspectorPlugin } from 'code-inspector-plugin'; const nextConfig: NextConfig = { experimental: { turbo: { rules: codeInspectorPlugin({ bundler: 'turbopack', }), }, }, }; export default nextConfig; ``` - For next.js(>= 15.3.x): ```js // next.config.js import type { NextConfig } from 'next'; import { codeInspectorPlugin } from 'code-inspector-plugin'; const nextConfig: NextConfig = { turbopack: { rules: codeInspectorPlugin({ bundler: 'turbopack', }), }, }; export default nextConfig; ```

Click to expand configuration about: umi.js

- With webpack: ```js // umi.config.js or umirc.js import { defineConfig } from '@umijs/max'; import { codeInspectorPlugin } from 'code-inspector-plugin'; export default defineConfig({ chainWebpack(memo) { memo.plugin('code-inspector-plugin').use( codeInspectorPlugin({ bundler: 'webpack', }) ); }, // other config }); ``` - With mako: ```ts // .umirc.ts import { defineConfig } from 'umi'; import { codeInspectorPlugin } from 'code-inspector-plugin'; export default defineConfig({ // other config... mako: { plugins: [ codeInspectorPlugin({ bundler: 'mako', }), ], }, }); ```

Click to expand configuration about: astro

```js // astro.config.mjs import { defineConfig } from 'astro/config'; import { codeInspectorPlugin } from 'code-inspector-plugin'; export default defineConfig({ vite: { plugins: [codeInspectorPlugin({ bundler: 'vite' })], }, }); ```

- 2.Using the function Now you can enjoy using it!~ When pressing the combination keys on the page, moving the mouse over the page will display a mask layer on the DOM with relevant information. Clicking will automatically open the IDE and position the cursor to the corresponding code location. (The default combination keys for Mac are `Option + Shift`; for Windows, it's `Alt + Shift`, and the browser console will output related combination key prompts)

## 👨‍💻 Contributors Special thanks to the contributors of this project:

## 📧 Communication and Feedback For any usage issues, please leave a message below my [Twitter](https://twitter.com/zhulxing312147) post or [submit an issue](https://github.com/zh-lx/code-inspector/issues) on Github. For Chinese users, you can join the QQ group `769748484` or add the author's WeiXin account `zhoulx1688888` for consultation and feedback:

## 💖 Sponsor Sponsoring this project can help the author create better. If you are willing, you can sponsor me through Alipay or WeChatPay:

## Star History [![Star History Chart](https://api.star-history.com/svg?repos=zh-lx/code-inspector&type=Date)](https://www.star-history.com/#zh-lx/code-inspector&Date)