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
相关推荐
gnip6 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼9 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手12 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu13 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu13 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu13 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu13 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
LuckySusu13 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript