If you’re coming from Visual Studio Code and switching to WebStorm (or just prefer JetBrains tools), you might be wondering:

“How do I launch a new Chrome instance for debugging, just like I do in VS Code using launch.json?”

In VS Code, it's super simple — you define a launch.json, click a button, and boom: new Chrome window, new profile, live debugging.

WebStorm doesn’t use launch.json, but don’t worry — you can still get the exact same behavior. Here’s how to set it up.

🎯 The Goal

We want WebStorm to:

  • Launch a new, isolated Chrome instance
  • Use a dedicated user data directory
  • Open our app at something like http://localhost:8080
  • Enable remote debugging via Chrome DevTools Protocol

🧰 Step 1: Create a Custom Chrome Debug Profile

Before we touch WebStorm, we’ll set up a Chrome command with a separate user data directory. This ensures it opens in a fresh, sandboxed window, with no cookies, extensions, or session baggage.

📁 Choose a folder to use as the profile:

  • Windows: C:\Temp\ChromeDebugProfile
  • macOS/Linux: ~/chrome-debug-profile

Make sure Chrome is fully closed before proceeding.

🧠 Step 2: Add a Custom Browser in WebStorm

  1. Open WebStorm
  2. Go to Settings > Tools > Web Browsers and Preview
  3. Click the + button to add a new browser
  4. Fill in the following:
  • Name: Chrome Debug

  • Path to Chrome:

    • Windows: C:\Program Files\Google\Chrome\Application\chrome.exe
    • macOS: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    • Linux: /usr/bin/google-chrome

  • Command-line options:

     --user-data-dir="/your/path/to/debug-profile" --remote-debugging-port=9222

💡 This tells Chrome to start in a fresh profile and open a debug port for WebStorm to connect to.

🐞 Step 3: Create a JavaScript Debug Configuration

Now, let’s hook this custom browser into WebStorm’s debugging system.

  1. Go to Run > Edit Configurations
  2. Click + > JavaScript Debug
  3. Configure it:
    • Name: Debug My App
    • URL: http://localhost:8080
    • Browser: Choose Chrome Debug (the one you just created)

Click OK, and you’re ready to roll.

🚀 Step 4: Start Debugging

Click the Debug button (the little bug icon next to your config).

You should see:

  • A fresh Chrome window launch
  • No previous tabs, no history, no extensions
  • Your site open at http://localhost:8080
  • Full JavaScript debugging via breakpoints in WebStorm

Just like VS Code — but better integrated with JetBrains tooling.

🔁 Bonus: Live Edit with JetBrains IDE Support

If you want instant reloading and smoother DOM inspection:

  1. Install JetBrains IDE Support Extension for Chrome
  2. In WebStorm, go to Settings > Build, Execution, Deployment > Debugger > Live Edit
  3. Enable Live Edit and choose to auto-apply changes in Chrome

This gives you a VS Code + Live Server-like experience — but powered by JetBrains' smart tooling.

✅ Recap

Feature WebStorm Equivalent
launch.json Run/Debug Configurations
Chrome with custom profile Custom browser with --user-data-dir
Remote debugging --remote-debugging-port=9222
Auto-refresh / Live Preview JetBrains Live Edit + Chrome Extension

🧠 Final Thoughts

WebStorm may not use JSON config files like VS Code, but once you understand the GUI-based flow, it's just as powerful — and arguably more flexible for larger projects.

So go ahead: launch that new Chrome window, drop in breakpoints, and debug like a boss. 🧑‍💻🔥

✍️ Want the full setup script for launching Chrome on different OSes? Let me know in the comments or hit me up — I’d be happy to help.