Code Inspector

https://inspector.fe-dev.cn/en/
Admin
Code Inspector is a developer tool that enables quick source code location by clicking DOM elements...
Tokens:6,062
Snippets:80
Trust Score:3.8
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Code Inspector with yarn

Source: https://inspector.fe-dev.cn/en/guide/start.html

Use this command to install the code-inspector-plugin as a development dependency using yarn.

```shell
yarn add code-inspector-plugin -D
```

--------------------------------

### Install Code Inspector with npm

Source: https://inspector.fe-dev.cn/en/guide/start.html

Use this command to install the code-inspector-plugin as a development dependency using npm.

```shell
npm install code-inspector-plugin -D
```

--------------------------------

### Install Code Inspector with pnpm

Source: https://inspector.fe-dev.cn/en/guide/start.html

Use this command to install the code-inspector-plugin as a development dependency using pnpm.

```shell
pnpm add code-inspector-plugin -D
```

--------------------------------

### Specify IDE Executable Path on Windows System

Source: https://inspector.fe-dev.cn/en/guide/ide.html

For IDEs not automatically detected on Windows, specify the full executable path in the .env.local file. This example shows WebStorm.

```perl
# .env.local
CODE_EDITOR=D:\webstorm\WebStorm 2023.1.3\bin\webstorm64.exe
```

--------------------------------

### Specify IDE Executable Path on MAC System

Source: https://inspector.fe-dev.cn/en/guide/ide.html

For IDEs not automatically detected on MAC, specify the full executable path in the .env.local file. This example shows VSCodium.

```perl
# .env.local
CODE_EDITOR=/Applications/VSCodium.app/Contents/MacOS/Electron
```

--------------------------------

### Specify IDE via .env.local File

Source: https://inspector.fe-dev.cn/en/guide/ide.html

Add this to your .env.local file in the project root to specify the IDE. Use the IDE's code name, e.g., 'code' for VS Code.

```shell
# Specify IDE as vscode
CODE_EDITOR=code
```

--------------------------------

### Configure Umi.js

Source: https://inspector.fe-dev.cn/en/guide/start.html

Use chainWebpack for Webpack or the mako configuration object for Mako bundler.

```javascript
// umi.config.js or umirc.js
import { defineConfig } from '@umijs/max';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  chainWebpack(memo) {
    memo.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
      })
    );
  },
  // other config
});
```

```typescript
// .umirc.ts
import { defineConfig } from 'umi';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  // other config...
  mako: {
    plugins: [
      codeInspectorPlugin({
        bundler: 'mako',
      }),
    ],
  },
});
```

--------------------------------

### Configure Next.js

Source: https://inspector.fe-dev.cn/en/guide/start.html

Configuration differs based on the Next.js version and whether Turbopack is used.

```javascript
// next.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin');

const nextConfig = {
  webpack: (config, { dev, isServer }) => {
    config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
    return config;
  },
};

module.exports = nextConfig;
```

```typescript
// next.config.js
import type { NextConfig } from 'next';
import { codeInspectorPlugin } from 'code-inspector-plugin';

const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      rules: codeInspectorPlugin({
        bundler: 'turbopack',
      }),
    },
  },
};

export default nextConfig;
```

```typescript
// next.config.js
import type { NextConfig } from 'next';
import { codeInspectorPlugin } from 'code-inspector-plugin';

const nextConfig: NextConfig = {
  turbopack: {
    rules: codeInspectorPlugin({
      bundler: 'turbopack',
    }),
  },
};

export default nextConfig;
```

--------------------------------

### Configure esbuild

Source: https://inspector.fe-dev.cn/en/guide/start.html

Pass the plugin to the plugins array. Ensure the dev function returns true for local development.

```javascript
// esbuild.config.js
const esbuild = require('esbuild');
const { codeInspectorPlugin } = require('code-inspector-plugin');

esbuild.build({
  // other configs...

  // [Note] When using in esbuild, the dev function's return value needs to be determined based on the environment
  // Return true for local development, false for production build
  plugins: [codeInspectorPlugin({ bundler: 'esbuild', dev: () => true })],
});
```

--------------------------------

### Configure Nuxt

Source: https://inspector.fe-dev.cn/en/guide/start.html

Integration varies by Nuxt version; use the vite or build configuration blocks accordingly.

```javascript
// nuxt.config.js
import { codeInspectorPlugin } from 'code-inspector-plugin';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  vite: {
    plugins: [codeInspectorPlugin({ bundler: 'vite' })],
  },
});
```

```javascript
// nuxt.config.js
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default {
  build: {
    extend(config) {
      config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
      return config;
    },
  },
};
```

--------------------------------

### Configuration Options

Source: https://inspector.fe-dev.cn/en/api/advance.html

This section details the various optional configuration parameters for the code-inspector-plugin.

```APIDOC
## injectTo

### Description
Specifies the file for injecting client-side code related to DOM filtering and clicking to jump to vscode. By default, `code-inspector-plugin` will inject client code into the first file matching the `match` regular expression. In some custom SSR framework projects, the first injected file might only run on the server side, causing client-side logic to fail. In this case, you can specify a client file through this configuration to ensure client-side logic works.

### Type
`string | string[]` (only supports `string[]` type in version `0.17.5` and above)

### Version
`0.5.0+`

---

## openIn

### Description
Specifies how to open IDE windows when using vscode or cursor as editor. `reuse` specifies reusing the current window; `new` specifies opening a new window; `auto` automatically chooses based on current IDE installation. It's recommended to configure your preference in IDE settings.

### Type
`'reuse' | 'new' | 'auto'`

### Default Value
`'auto'`

### Version
`0.8.0+`

---

## pathFormat

### Description
Specifies the command format for opening files in IDE, mainly used with non-built-in IDEs. `{file}`, `{line}`, `{column}` will be dynamically replaced as templates. For example, if your code location is line `5` column `11` of `/root/my-project/index.ts`, and your IDE's command to open files is `yourIDE /root/my-project/index.ts --line 5 --column 11`, you should set this value to `["{file}", "--line", "{line}", "--column", "{column}"]`.

### Type
`string | string[]`

### Default Value
`{file}:{line}:{column}`

### Version
`0.8.0+`

---

## hideDomPathAttr

### Description
Whether to hide the `data-insp-path` attribute on DOM elements in browser console.

### Type
`boolean`

### Default Value
`false`

### Version
`0.12.0+`

---

## hideConsole

### Description
Whether to hide the keyboard shortcut hints about `code-inspector-plugin` in browser console.

### Type
`boolean`

### Default Value
`false`

---

## escapeTags

### Description
For tags matching these conditions, the `data-insp-path` attribute will not be injected during compilation.

### Type
`(string | RegExp)[]`

### Version
`0.11.0+`

---

## importClient

### Description
Method of importing client interaction code: `file` means importing the file containing interaction code; `code` means directly injecting interaction code into the entry file.

### Type
`string`

### Version
`0.14.1+`

---

## needEnvInspector

### Description
When set to `true`, the plugin only works when `.env.local` file exists and contains `CODE_INSPECTOR=true`. (Mainly solves the need for some team members who don't want to use this plugin feature)

### Type
`boolean`

### Default Value
`false`

### Deprecated

---

## port

### Description
Specifies the starting port for the server of `code-inspector-plugin` to find.

### Type
`number`

### Default Value
`5678`

### Version
`0.19.0+`

---

## printServer

### Description
Whether to print the server startup information in the console.

### Type
`boolean`

### Default Value
`false`

### Version
`0.19.0+`

---

## pathType

### Description
Specifies the path type of the `data-insp-path` attribute, defaulting to relative path, optionally using absolute path (in micro-frontend scenarios, if multiple projects are not in the same git repository, absolute path is required).

### Type
`'absolute' | 'relative'`

### Default Value
`'relative'`

### Version
`0.20.0+`

---

## cache

### Description
This option only works for `webpack/rspack` projects with `filesystem` cache type. It's mainly used to prevent communication failures between the page and IDE due to inconsistent port numbers. Defaults to `false`, meaning no cache is used on each cold start; when set to `true`, caching will be enabled (when setting to `true`, it's recommended to also set `port` to a fixed port number).

### Type
`boolean`

### Default Value
`false`

### Version
`0.20.2+`

---

## skipSnippets

### Description
Skip injecting certain code snippets:
* `console`: Skip injecting `console.error` and `console.warn` code snippets, it's not recommended to skip this item for nextjs and nuxt projects
* `htmlScript`: Skip injecting `script` tags in html, it's not recommended to skip this item for MPA projects

### Type
`('console' | 'htmlScript')[]`

### Default Value
`[]`

### Version
`1.2.3+`
```

--------------------------------

### Configure Farm

Source: https://inspector.fe-dev.cn/en/guide/start.html

Add the plugin to the vitePlugins array in the Farm configuration.

```javascript
// farm.config.js
import { defineConfig } from '@farmfe/core';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  vitePlugins: [
    codeInspectorPlugin({
      bundler: 'vite',
    }),
    // ...other code
  ],
});
```

--------------------------------

### Configure Webpack

Source: https://inspector.fe-dev.cn/en/guide/start.html

Add the plugin to the plugins array in your webpack configuration.

```javascript
// webpack.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin');

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

--------------------------------

### Initialize Code Inspector Plugin

Source: https://inspector.fe-dev.cn/en/api/basic.html

Basic initialization of the code-inspector-plugin with essential bundler and editor configurations. Ensure the correct bundler for your project is specified.

```typescript
import { codeInspectorPlugin } from 'code-inspector-plugin';

codeInspectorPlugin({
  bundler: 'vite',
  editor: 'cursor',
  // See below for other properties...
});
```

--------------------------------

### Configure Vite

Source: https://inspector.fe-dev.cn/en/guide/start.html

Include the plugin in the plugins array within the defineConfig function.

```javascript
// vite.config.js
import { defineConfig } from 'vite';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  plugins: [
    codeInspectorPlugin({
      bundler: 'vite',
    }),
  ],
});
```

--------------------------------

### Configure code-inspector-plugin behavior

Source: https://inspector.fe-dev.cn/en/guide/feature.html

Set the default behavior parameters for the plugin, including location, copy, and target settings.

```javascript
codeInspectorPlugin({
  behavior: {
    locate: true,
    copy: false,
    target: '',
  },
}),
```

--------------------------------

### Configure Vue CLI

Source: https://inspector.fe-dev.cn/en/guide/start.html

Use chainWebpack to register the plugin in the Vue CLI configuration.

```javascript
// vue.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = {
  // ...other code
  chainWebpack: (config) => {
    config.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
      })
    );
  },
};
```

--------------------------------

### codeInspectorPlugin Configuration

Source: https://inspector.fe-dev.cn/en/api/basic.html

Configuration options for the codeInspectorPlugin initialization.

```APIDOC
## Configuration Parameters

### Parameters
#### Request Body
- **bundler** (string) - Required - Specifies the bundler tool used (vite, webpack, rspack, esbuild).
- **editor** (string) - Optional - Specifies the IDE to open when multiple are running.
- **dev** (boolean | () => boolean) - Optional - Manually define if the environment is development.
- **enforcePre** (boolean) - Optional - Whether to add 'enforce: pre' configuration. Default: true.
- **hotKeys** (string[]) - Optional - Keyboard shortcuts to trigger source code location. Default: ['altKey', 'shiftKey'].
- **showSwitch** (boolean) - Optional - Whether to display a UI switch to enable/disable the feature. Default: false.
- **autoToggle** (boolean) - Optional - Automatically turn off the switch after IDE jump. Default: true.
- **launchType** (string) - Optional - Method for launching the IDE (exec or open). Default: exec.
```

--------------------------------

### Map Monorepo File Paths

Source: https://inspector.fe-dev.cn/en/api/advance.html

Maps paths from node_modules back to the actual source directory to ensure correct file location.

```shell
my-project
  - pkg-a
  - pkg-b
  - main-pkg # imports pkg-a and pkg-b via package.json `dependencies`
    - node_modules
      - pkg-a
      - pkg-b
```

```typescript
import path from 'path';

codeInspectorPlugin({
  bundler: 'vite',
  include: ['pkg-a', 'pkg-b'],
  mappings: {
    'pkg-a': path.resolve(__dirname, '../pkg-a'),
    'pkg-b': path.resolve(__dirname, '../pkg-b'),
  },
});
```

--------------------------------

### Configure Rsbuild

Source: https://inspector.fe-dev.cn/en/guide/start.html

Add the plugin to the rspack plugins configuration inside the tools object.

```javascript
// rsbuild.config.js
import { defineConfig } from '@rsbuild/core';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  // ...other config
  tools: {
    rspack: {
      plugins: [
        codeInspectorPlugin({
          bundler: 'rspack',
        }),
      ],
    },
  },
});
```

--------------------------------

### Configure Lifecycle Hooks

Source: https://inspector.fe-dev.cn/en/api/advance.html

Defines the SourceInfo type and implements a hook to track inspection requests.

```typescript
type SourceInfo = {
  file: string;
  line: number;
  column: number;
};
type Hooks = {
  /*
   * Hook function after server receives DOM source code location request
   */
  afterInspectRequest?: (
    options: CodeInspectorOptions,
    source: SourceInfo
  ) => void;
};
// Example
codeInspectorPlugin({
  bundler: 'vite',
  hooks: {
    afterInspectRequest: (options, source) => {
      sendLog(source);
    },
  },
});
```

--------------------------------

### Include Monorepo Packages

Source: https://inspector.fe-dev.cn/en/api/advance.html

Configures the plugin to include local packages located within node_modules for source code location.

```shell
my-project
  - pkg-a
  - pkg-b
  - main-pkg # imports pkg-a and pkg-b via package.json `dependencies`
    - node_modules
      - pkg-a
      - pkg-b
```

```typescript
codeInspectorPlugin({
  bundler: 'vite',
  include: ['pkg-a', 'pkg-b'],
});
```

--------------------------------

### Specify IDE via editor Parameter in codeInspectorPlugin

Source: https://inspector.fe-dev.cn/en/guide/ide.html

Configure the IDE directly within the codeInspectorPlugin options. This method is useful for Vite projects.

```typescript
codeInspectorPlugin({
    bundler: 'vite',
    editor: 'code', // Specify IDE as vscode
})
```

--------------------------------

### Define Behavior Type

Source: https://inspector.fe-dev.cn/en/api/advance.html

Defines the structure for the behavior configuration object, controlling IDE navigation and copy functionality.

```typescript
type Behavior = {
  /*
   * Whether to enable clicking to jump to IDE code location (default is true)
   */
  locate?: boolean;
  /*
   * Whether to enable clicking to copy source code location info (default is true)
   * Can also set a string and use {file}, {line}, {column} templates to specify the format
   * Default value true is equivalent to the string format "{file}:{line}:{column}"
   */
  copy?: boolean | string;
  /**
   * Clicking elements will jump to the specified url.
   * String type, can use {file}, {line}, {column} templates to replace code location information.
   */
  target?: string;
};
```

--------------------------------

### Configure Rspack

Source: https://inspector.fe-dev.cn/en/guide/start.html

Register the plugin within the plugins array of the Rspack configuration object.

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

module.exports = {
  // other config...
  plugins: [
    codeInspectorPlugin({
      bundler: 'rspack',
    }),
    // other plugins...
  ],
};
```

--------------------------------

### Listen for code-inspector:trackCode event

Source: https://inspector.fe-dev.cn/en/guide/feature.html

Customize behavior by listening to the trackCode event triggered when an element mask layer is clicked.

```javascript
window.addEventListener('code-inspector:trackCode', () => {
  sendLog('trackCode'); 
});
```

--------------------------------

### Configure CODE_EDITOR for WSL/Dev Containers

Source: https://inspector.fe-dev.cn/en/more/question.html

Set the CODE_EDITOR environment variable in a .env.local file to specify the VS Code remote address when using Code Inspector in WSL or Dev Containers.

```bash
CODE_EDITOR=/home/xxx/.vscode-server/bin/dc96b837cf6bb4af9cd736aa3af08cf8279f7685/bin/remote-cli/code
```

--------------------------------

### VS Code Remote Address in WSL

Source: https://inspector.fe-dev.cn/en/more/question.html

Find the VS Code remote address in WSL using the 'which code' command. This address is needed for configuring the CODE_EDITOR environment variable.

```bash
/home/xxx/.vscode-server/bin/dc96b837cf6bb4af9cd736aa3af08cf8279f7685/bin/remote-cli/code
```

--------------------------------

### Track Code Click Events

Source: https://inspector.fe-dev.cn/en/api/advance.html

Listens for the custom code-inspector:trackCode event to perform custom actions like logging.

```typescript
window.addEventListener('code-inspector:trackCode', () => {
  sendLog('trackCode');
});
```

--------------------------------

### Ignore Files in Vue/Svelte

Source: https://inspector.fe-dev.cn/en/more/question.html

Add the 'code-inspector-ignore' comment within HTML files to prevent Code Inspector from processing specific Vue or Svelte components.

```html
<!-- code-inspector-ignore -->
```

--------------------------------

### Ignore Files in JSX/TSX/TS

Source: https://inspector.fe-dev.cn/en/more/question.html

Use the '// code-inspector-ignore' comment in JavaScript, TypeScript, JSX, or TSX files to exclude them from Code Inspector analysis.

```javascript
// code-inspector-ignore
```
Tokens:
Raw