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
相关推荐
quitv18 分钟前
react脚手架配置别名
前端·javascript·react.js
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
贺今宵4 小时前
通过$attrs传递的未指定名称的modelValue值在子组件中修改
前端·javascript
lifire_H8 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
十八朵郁金香10 小时前
深入理解 JavaScript 中的 this 指向
开发语言·前端·javascript
贵州晓智信息科技10 小时前
使用 Three.js 转换 GLSL 粒子效果着色器
开发语言·javascript·着色器
linkcoco11 小时前
记录h5使用navigator.mediaDevices.getUserMedia录制音视频
前端·javascript·vue·音视频·js
Mh11 小时前
代码提交校验及提交规范的实践方案
前端·javascript·架构
Pro_er11 小时前
Vue3组件通信全攻略:多种方式详解+实战场景,轻松玩转复杂数据流!
vue·前端开发
昨日余光11 小时前
仅需三分钟,使用Vue3.x版本组件式风格实现一个消息提示组件!
前端·javascript·css·vue.js·typescript·html