Code Inspector——页面开发提效的神器

写在前面

优点：

1. 开发提效：点击页面上的 DOM 元素，它能自动打开 IDE 并将光标定位至 DOM 的源代码位置，大幅提升开发体验和效率
2. 简单易用：对源代码无任何侵入，只需要在打包工具中引入就能够生效，整个接入过程如喝水般一样简单
3. 适配性强：支持在 webpack/vite/rspack/nextjs/nuxt/umijs 中使用，支持 vue/react/preact/solid/qwik/svelte/astro 等多个框架

code-inspector-plugin

---

📖 介绍

点击页面上的元素，能够自动打开你的代码编辑器并将光标定位到元素对应的代码位置。

💻 在线体验

• vue online demo
• react online demo
• preact online demo
• solid online demo
• qwik online demo
• svelte online demo
• astro online demo

🎨 支持列表

当前支持的编译器、web 框架以及 IDE 如下:

• 当前支持以下打包工具
  
  ✅ webpack
  
  ✅ vite
  
  ✅ rspack / rsbuild
  
  ✅ next.js / Nuxt / Umijs 等
• 当前支持以下 Web 框架
  
  ✅ vue2
  
  ✅ vue3
  
  ✅ react
  
  ✅ preact
  
  ✅ solid
  
  ✅ qwik
  
  ✅ svelte
  
  ✅ astro
• 当前支持以下代码编辑器
  
  VSCode | Cursor | WebStorm | Atom | HBuilderX | PhpStorm | PyCharm | IntelliJ IDEA | 以及其他 IDE

🚀 安装

npm i code-inspector-plugin -D
# or
yarn add code-inspector-plugin -D
# or
pnpm add code-inspector-plugin -D

🌈 使用

完整的接入及使用方式请查看：code-inspector-plugin 配置

• 1.配置打包工具

  点击展开查看 webpack 项目配置

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

  点击展开查看 vite 项目配置

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

  点击展开查看 rspack 项目配置

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

  点击展开查看 rsbuild 项目配置

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

  点击展开查看 vue-cli 项目配置

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

  点击展开查看 nuxt 项目配置

  nuxt3.x :

  // 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' })],},
  });
  

  nuxt2.x :

  // nuxt.config.js
  import { codeInspectorPlugin } from 'code-inspector-plugin';export default {build: {extend(config) {config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));return config;},},
  };
  

  点击展开查看 next.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;
  

  点击展开查看 umi.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
  });
  

  点击展开查看 astro 项目配置

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

• 2.配置 vscode 命令行工具

  Tip: Windows 或者其他 IDE 可跳过
  
  仅当你的电脑为 Mac 且使用 vscode 作为 IDE 时需要配置此步，电脑为 Windows 或者使用其他 IDE 可以跳过此步。

  在 VSCode 中执行 command + shift + p 命令, 搜索并点击 Shell Command: Install 'code' command in PATH:

  

  如果出现如下弹窗，说明配置成功了:

  

• 3.使用功能

  在页面上按住组合键时，鼠标在页面移动即会在 DOM 上出现遮罩层并显示相关信息，点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置。 (Mac 系统默认组合键是 Option + Shift；Window 的默认组合键是 Alt + Shift，在浏览器控制台会输出相关组合键提示)