Common Setups

Common Setup Configurations

Quick Setup (Recommended)

For most projects, use the + button in the DevMirror Scripts panel for instant setup with defaults.

Setup Wizard Options

When using the ⚙️ Setup Wizard, these options are available:

What the Options Actually Do

Option	What It Affects
Target Mode	Sets mode in config (cdp or cef)
Port	Sets cefPort in config (CEF mode only)
Wait for User	Creates background script for interactive CLIs
Other options	Currently stored but not used in implementation

Actual Generated Scripts

DevMirror generates one of these script patterns:

Standard Script (Most Common)

"dev:mirror": "concurrently \"npx devmirror-cli\" \"npm run dev\""

Interactive CLI Script

For scripts with interactive menus or when "After user interaction" is selected:

"dev:mirror": "node scripts/devmirror-background.js & npm run dev"

Plus creates scripts/devmirror-background.js file.

Configuration by Project Type

Adobe CEP Extensions

{
  "mode": "cef",
  "cefPort": 8555,
  "outputDir": "./devmirror-logs",
  "autoOpenBrowser": true
}

Use the interactive CLI pattern if your build tool has menus.

React/Vue/Angular Apps

{
  "mode": "cdp",
  "outputDir": "./devmirror-logs",
  "autoDetectPort": true
}

Standard script pattern works for most cases.

Interactive CLI Tools

If your dev script shows a menu or requires user input:

1. Use Setup Wizard
2. Select "After user interaction" for Start Trigger
3. This creates the background script pattern

Port Configuration

Common development server ports:

• 3000 - Create React App, Next.js
• 5173 - Vite
• 8080 - Webpack Dev Server
• 4200 - Angular
• 6006 - Storybook
• 8555 - Adobe CEF (check your .debug file)

Important Notes

1. CDP Mode: Opens a Chrome browser window - this is required for console capture
2. CEF Mode: Connects directly to Adobe extension - no browser needed
3. Background Script: Only needed for interactive CLIs that show menus
4. Throttling: Automatically prevents log flooding (configurable)

Troubleshooting

Script Doesn't Work

• Ensure concurrently is installed: npm install --save-dev concurrently
• Check that puppeteer-core is installed
• Verify Chrome/Chromium is available

Interactive CLI Issues

• Use the background script pattern
• Ensure your package.json has correct module type

Port Issues

• Manually specify port in config if auto-detect fails
• Ensure no firewall blocking
• Check port isn't already in use

---

For most projects, the simple + button setup is sufficient!