code-inspector-plugin-x

code-inspector-plugin-x

🚀 Enhanced code inspector with copy-path feature. Fork of zh-lx/code-inspector.

✨ New Features

Copy Source Path (NEW!)

• Hotkey: Cmd+Option+Shift+Click (Mac) / Ctrl+Alt+Shift+Click (Windows)
• Function: Copy source code path to clipboard
• Format: file:line:column (works directly with VSCode's Go to File)

Open in IDE (Original)

• Hotkey: Option+Shift+Click (Mac) / Alt+Shift+Click (Windows)
• Function: Open source code in your IDE

📦 Installation

npm install --save-dev code-inspector-plugin-x

🔧 Usage

Vite

// vite.config.js
import { codeInspectorPlugin } from 'code-inspector-plugin-x'

export default {
  plugins: [
    codeInspectorPlugin({ bundler: 'vite' })
  ]
}

Webpack / Next.js

// webpack.config.js or next.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin-x')

module.exports = {
  plugins: [
    codeInspectorPlugin({ bundler: 'webpack' })
  ]
}

// For Next.js:
module.exports = {
  webpack: (config, { dev }) => {
    if (dev) {
      config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }))
    }
    return config
  }
}

Rspack / Rsbuild

// rspack.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin-x')

module.exports = {
  plugins: [
    codeInspectorPlugin({ bundler: 'rspack' })
  ]
}

🎯 How It Works

• Start your dev server
• Open browser console to see the hotkey instructions
• Hold the hotkey and hover over elements to see the highlight
• Click to:
  • Copy path (with Cmd+Opt+Shift)
  • Open in IDE (with Opt+Shift)

📋 Copied Path Format

The copied path uses the format: file:line:column

Example: src/components/Button.jsx:25:10

This format works directly with:

• VSCode's "Go to File" (Cmd+P)
• WebStorm's navigation
• Most modern IDEs

🤝 Credits

Based on the excellent code-inspector by zh-lx.

Enhanced with copy-path feature by code-inspector-x.

📄 License

MIT