Code Inspector:点击页面元素自动定位到代码

Code Inspector是一个开发提效的神器

点击页面上的 DOM 元素,它能自动打开 IDE 并定位到 DOM 对应源代码位置

文档

目录

1、安装

bash 复制代码
npm install code-inspector-plugin -D

2、配置

2.1、webpack

js 复制代码
// webpack.config.js
const { CodeInspectorPlugin } = require('code-inspector-plugin');

module.exports = () => ({
  plugins: [
    CodeInspectorPlugin({
      bundler: 'webpack',
    }),
  ],
});

2.2、vue

js 复制代码
// vue.config.js
const WebpackCodeInspectorPlugin = require('webpack-code-inspector-plugin');

module.exports = {
  // ...other code
  chainWebpack: (config) => {
    // add this configuration in the development environment
    config
      .plugin('webpack-code-inspector-plugin')
      .use(new WebpackCodeInspectorPlugin());
  },
};

2.3、vite

js 复制代码
// vite.config.js
import { defineConfig } from 'vite';
import { CodeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  plugins: [
    CodeInspectorPlugin({
      bundler: 'vite',
    }),
  ],
});

3、使用

代码审查快捷键

  • Mac 系统默认组合键是 Option + Shift
  • Window 的默认组合键是 Alt + Shift
相关推荐
li357412 小时前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
快乐是Happy12 小时前
分享一个非常实用的防止重复提交操作
前端·javascript
可子是我的小猫12 小时前
【JS】模块(二)
javascript
云枫晖12 小时前
JS核心知识-执行上下文
前端·javascript
麦当_12 小时前
TanStack Router File-Based Router Mask 完全指南
前端·javascript·设计模式
珍珠奶茶爱好者12 小时前
vue二次封装ant-design-vue的table,识别columns中的自定义插槽
前端·javascript·vue.js
烛阴12 小时前
【TS 设计模式完全指南】用适配器模式优雅地“兼容”一切
javascript·设计模式·typescript
三脚猫的喵13 小时前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
炒毛豆13 小时前
移动端响应式px转换插件PostCSS的使用~
前端·javascript·postcss
Swift社区13 小时前
为什么 socket.io 客户端在浏览器能连上,但在 Node.js 中报错 transport close?
javascript·node.js