Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zh-lx/code-inspector
🚀 Click the dom to open your IDE and position the cursor at dom's source code location! 点击页面 dom 来打开 IDE 并将光标自动定位到源代码位置!
https://github.com/zh-lx/code-inspector
code devtools inspector react vite-plugin vscode vue webpack-plugin
Last synced: 4 days ago
JSON representation
🚀 Click the dom to open your IDE and position the cursor at dom's source code location! 点击页面 dom 来打开 IDE 并将光标自动定位到源代码位置!
- Host: GitHub
- URL: https://github.com/zh-lx/code-inspector
- Owner: zh-lx
- License: mit
- Created: 2022-02-21T14:20:56.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-07T07:05:55.000Z (4 days ago)
- Last Synced: 2025-01-07T08:19:27.382Z (4 days ago)
- Topics: code, devtools, inspector, react, vite-plugin, vscode, vue, webpack-plugin
- Language: TypeScript
- Homepage: https://inspector.fe-dev.cn
- Size: 5.19 MB
- Stars: 1,821
- Watchers: 16
- Forks: 132
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesomeLibrary - code-inspector - Click the dom on the page, it will open your IDE and position the cursor to the source code location of the dom. (语言资源库 / typescript)
- awesome-rspack - code-inspector-plugin
README
code-inspector
中文文档 | Documentation
[](https://www.npmjs.com/package/code-inspector-plugin)
[](https://github.com/zh-lx/code-inspector)
[](https://npmcharts.netlify.app/compare/code-inspector-plugin?minimal=true)
[](https://opensource.org/licenses/MIT)
[](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.
## 💻 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
✅ nextjs / nuxt / umijs eg.
- The following Web frameworks are currently supported:
✅ vue2
✅ vue3
✅ react
✅ preact
✅ solid
✅ qwik
✅ svelte
✅ astro
- The following code editors are currently supported:
[VSCode](https://code.visualstudio.com/) | [Cursor](https://www.cursor.com/) | [Windsurf](https://codeium.com/windsurf) | [WebStorm](https://www.jetbrains.com/webstorm/) | [Atom](https://atom.io/) | [HBuilderX](https://www.dcloud.io/hbuilderx.html) | [PhpStorm](https://www.jetbrains.com/phpstorm/) | [PyCharm](https://www.jetbrains.com/pycharm/) | [IntelliJ IDEA](https://www.jetbrains.com/idea/) | [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
```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;
```
Click to expand configuration about: umi.js
```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
});
```
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, thanks for sponsoring me through [here](https://inspector.fe-dev.cn/en/more/sponsor.html).