code-inspector

code-inspector-plugin is a development tool that enhances efficiency by bridging the gap between the browser and your IDE. When you click on a DOM element in your web page, the plugin automatically opens your IDE and positions the cursor at the exact source code location responsible for that element.

Key Features

• Direct Navigation: Click a DOM element to jump straight to its source code in your IDE.
• Zero Intrusion: Does not require manual modifications to your source code; it works by being included in your bundler.
• Broad Compatibility:
  • Bundlers: Supports webpack, vite, rspack, rsbuild, esbuild, farm, and mako.
  • Frameworks: Supports vue, react, preact, solid, qwik, svelte, astro, nextjs, nuxt, and umijs.

Code Inspector is a development tool that allows you to click on a DOM element in your browser to automatically open your IDE and position the cursor at the corresponding source code location.

Key features include:

• Efficiency: Direct mapping from DOM to source code.
• Non-intrusive: Integrates via your bundler without requiring changes to your source code.
• Broad Compatibility: Supports bundlers like webpack, vite, rspack, nextjs, nuxt, and umijs, and frameworks including Vue, React, Preact, Solid, Qwik, Svelte, and Astro.

Astro projects follow a specific directory structure for routing and assets:

• src/pages/: Contains .astro or .md files. Each file is exposed as a route based on its filename.
• src/components/: Recommended location for Astro, React, Vue, Svelte, or Preact components.
• src/layouts/: Typically used for reusable page layouts.
• public/: Directory for static assets (e.g., images, favicons) that should be served as-is.
• package.json: Project dependencies and scripts.

To use the plugin in WSL or Dev Containers, you must specify the VS Code remote address in a .env.local file at your project root.

1. Find your remote address by running which code in your WSL terminal. It will look like /home/xxx/.vscode-server/bin/.../code.
2. Create a .env.local file in your project root.
3. Add the CODE_EDITOR variable with your specific path.

The code-inspector-plugin attempts to automatically detect your running IDE. If detection fails or you want to force a specific IDE (especially when running multiple IDEs), you can specify it using a .env.local file or the editor parameter in the plugin configuration.

Recommendation: Use the .env.local file if different team members use different IDEs to avoid configuration conflicts in the codebase.

# Using .env.local to specify vscode
CODE_EDITOR=code

# Or using the editor parameter in code
codeInspectorPlugin({
    bundler: 'vite',
    editor: 'code',
})

If your IDE is not automatically detected, you must provide its absolute executable path in .env.local using the CODE_EDITOR key.

macOS

1. Open the IDE.
2. Open Activity Monitor and double-click the IDE process.
3. Go to the Open Files and Ports tab.
4. Locate the path corresponding to the first .txt file; this is your executable path.

Windows

1. Right-click your IDE shortcut and select Properties.
2. In the Shortcut tab, find the Target field.
3. Copy the path from the Target field (remove any surrounding quotation marks).

To enter element selection mode, you must satisfy one of the following conditions:

• Hold the combination key: Option + Shift on macOS, or Alt + Shift on Windows.
• Toggle the feature switch to the colored (on) state.

To start the development server for the Rspack Vue3 project, use the dev script.

npm run dev

To set up the Rspack Vue3 project, install the necessary dependencies using npm.

npm install

Once configured, you can inspect elements on your page to jump directly to their source code in your IDE:

1. Press the combination keys:
   • Mac: Option + Shift
   • Windows: Alt + Shift
2. Move your mouse over the page to see a mask layer with DOM information.
3. Click an element to automatically open your IDE and position the cursor at the corresponding source code location.

Check your browser console for prompts regarding the correct combination keys for your OS.

To set up the Farm + Vue development environment, install the project dependencies using pnpm.

pnpm install