「このボタン、どこに書いた?」を秒で解決するCode-Inspector-Plugin

はじめに

「このボタン、コンポーネントのどこに書いたっけ?」

大規模なフロントエンドプロジェクトを触っていると、ブラウザに表示されている要素が、実際のソースコードのどのファイル・どの行に対応しているのか分からなくなることはありませんか。React DevToolsやVue DevToolsで該当コンポーネントを探したり、grepでテキストを検索したり、地味に時間を取られる作業です。

Code-Inspector-Pluginは、この悩みをシンプルな方法で解決してくれるビルドツール向けプラグインです。ブラウザ上でクリックした要素のソースコード位置を、そのままエディタで開いてくれます。

Code-Inspector-Pluginとは

Code-Inspector-Pluginは、ページ上のDOM要素をクリックするだけで、対応するソースコードの行にカーソルを合わせた状態でエディタを起動してくれるツールです。Vite、Webpack、Rspack、esbuildなど主要なバンドラーに対応しており、React・Vue・Svelte・Astroといった幅広いフレームワークで利用できます。

主な特徴

クリックで即ジャンプ - Option/Alt + Shiftを押しながらマウスを動かすとDOM要素がハイライトされ、クリックするだけでエディタが起動しソースコードの該当箇所が開きます
マルチバンドラー対応 - Vite、Webpack、Rspack/Rsbuild、Farm、esbuild、Turbopack、Makoなど、主要なビルドツールをほぼ網羅しています
マルチフレームワーク対応 - Vue 2/3、Nuxt、React、Next.js、Preact、Solid、Svelte、Astroなど、モダンなフロントエンド構成のほとんどをカバーしています
設定が最小限 - プラグインを追加してバンドラー名を指定するだけで動作し、既存プロジェクトへの導入コストが低いです

インストール

開発時のみ使うツールなので、devDependenciesとしてインストールします。

# npm
npm i code-inspector-plugin -D

# yarn
yarn add code-inspector-plugin -D

# pnpm
pnpm add code-inspector-plugin -D

基本的な使い方

Viteの場合

vite.config.tsにプラグインを追加します。

import { defineConfig } from 'vite';
import { codeInspectorPlugin } from 'code-inspector-plugin';

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

Webpackの場合

webpack.config.jsのpluginsに追加するだけです。

const { codeInspectorPlugin } = require('code-inspector-plugin');

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

設定はこれだけです。開発サーバーを起動したら、ブラウザ上でOption + Shift(Macの場合)またはAlt + Shift(Windowsの場合)を押しながらマウスを動かしてみてください。要素にオーバーレイが表示され、クリックすると設定済みのエディタが起動し、該当するソースコードの行にカーソルが合った状態で開きます。

実践的なユースケース

チーム開発でのオンボーディング短縮

新しくプロジェクトに参加したメンバーは、コードベース全体の構造を把握するまでに時間がかかりがちです。「画面のこの部分はどのコンポーネントが担当しているのか」をクリック一つで確認できるため、コードリーディングのハードルを下げられます。

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

export default defineConfig({
  plugins: [
    react(),
    // 開発環境でのみ有効化する
    process.env.NODE_ENV === 'development' &&
      codeInspectorPlugin({
        bundler: 'vite',
      }),
  ].filter(Boolean),
});