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
相关推荐
10年前端老司机9 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星10 分钟前
vue实现微信聊天emoji表情
前端·javascript
極光未晚12 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
Rrvive14 分钟前
原型与原型链到底是什么?
javascript
極光未晚1 小时前
JavaScript BOM 对象:浏览器的隐形控制塔
前端·javascript·源码
天涯学馆1 小时前
网站秒变 App!手把手教你搞定 PWA
前端·javascript·面试
用户9272472502191 小时前
PHP + CSS + JS 数据采集与展示系统
javascript
小样还想跑2 小时前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者2 小时前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者2 小时前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端