pnpm add -D react-devtools-plus

// vite.config.ts
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    react(),
    reactDevToolsPlus(),
  ],
})

npm install -D react-devtools-plus

// webpack.config.js
const { reactDevToolsPlus } = require('react-devtools-plus/webpack')

module.exports = {
  plugins: [
    reactDevToolsPlus(),
  ],
}

// vite.config.ts
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    react(),
    reactDevToolsPlus({
      // Enable/disable overlay (default: true in dev mode)
      overlay: true,
      
      // Custom DevTools route (default: '/__react_devtools__')
      base: '/__react_devtools__',
      
      // Editor integration (auto-detected by default)
      launchEditor: 'code', // 'code' | 'webstorm' | 'cursor' | 'vim' | etc.
    }),
  ],
})

// vite.config.ts
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    react(),
    reactDevToolsPlus({
      // Disable overlay, use only the dedicated route
      overlay: false,
      
      // Custom base path
      base: '/__debug__',
      
      // Specific editor with custom launch command
      launchEditor: 'webstorm',
    }),
  ],
})

// webpack.config.js
const { reactDevToolsPlus } = require('react-devtools-plus/webpack')

module.exports = {
  mode: 'development',
  plugins: [
    reactDevToolsPlus({
      overlay: true,
      base: '/__react_devtools__',
      launchEditor: 'code',
    }),
  ],
}

// next.config.mjs (with Vite plugin via next-with-vite)
import { defineConfig } from 'vite'
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    reactDevToolsPlus({
      overlay: true,
      base: '/__devtools__',
    }),
  ],
})

// vite.config.ts
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    react(),
    reactDevToolsPlus({
      overlay: true,
      launchEditor: 'cursor', // Open components in Cursor AI
    }),
  ],
})

// apps/admin/vite.config.ts
import { defineConfig } from 'vite'
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    reactDevToolsPlus({
      base: '/__admin_devtools__', // Unique base per app
    }),
  ],
})

// apps/customer/vite.config.ts
import { defineConfig } from 'vite'
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    reactDevToolsPlus({
      base: '/__customer_devtools__', // Unique base per app
    }),
  ],
})

// vite.config.ts
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    // Only enable in development and staging
    (mode === 'development' || mode === 'staging') && reactDevToolsPlus({
      overlay: mode === 'development', // Overlay only in dev
      base: '/__devtools__',
    }),
  ].filter(Boolean),
}))

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { reactDevToolsPlus } = require('react-devtools-plus/webpack')

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    reactDevToolsPlus({
      overlay: true,
      launchEditor: 'code',
    }),
  ],
  devServer: {
    port: 3000,
    hot: true,
  },
}

interface ReactDevToolsPlusOptions {
  /**
   * Enable/disable the floating overlay
   * @default true in development mode
   */
  overlay?: boolean

  /**
   * Custom base path for DevTools UI
   * @default '/__react_devtools__'
   */
  base?: string

  /**
   * Editor to launch when clicking "Open in Editor"
   * Auto-detected by default
   * @default auto-detected
   */
  launchEditor?: 'code' | 'webstorm' | 'cursor' | 'vim' | 'atom' | 'sublime' | string
}

// Disable overlay, use dedicated route only
reactDevToolsPlus({
  overlay: false,
})

// Explicitly specify your editor
reactDevToolsPlus({
  launchEditor: 'code', // or 'cursor', 'webstorm', etc.
})

// vite.config.ts
export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    // Plugin is dev-only by default
    reactDevToolsPlus(),
  ],
}))

// Explicitly guard
export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    mode === 'development' && reactDevToolsPlus(),
  ].filter(Boolean),
}))

// Ensure base includes leading and trailing slashes
reactDevToolsPlus({
  base: '/__custom_path__', // Correct
  // NOT: base: 'custom_path' or base: '/custom_path'
})

# Clone the repository
git clone https://github.com/wzc520pyfm/react-devtools-plus.git
cd react-devtools-plus

# Install dependencies
pnpm install

# Start development mode
pnpm dev

# Run Vite playground
pnpm play

# Run Webpack playground
pnpm play:webpack

# Build all packages
pnpm build

# Run tests
pnpm test

# Lint code
pnpm lint