You can open your localhost app inside VS Code, inspect it with DevTools, and even send selected page elements to AI chat without bouncing to Chrome.
This trick is for web developers already living in VS Code.
Time: about 5 minutes.

Quick Answer

Open the Command Palette in VS Code, run Browser: Open Integrated Browser, then load http://localhost:3000 or your own dev URL. From there you can use built-in DevTools, open multiple tabs, and optionally debug with an editor-browser launch config.

What you need first

  • Visual Studio Code desktop installed
  • A local web app running, such as Vite, Laravel, Next.js, or plain HTML on localhost
  • The official VS Code integrated browser docs: Integrated browser

Why this VS Code trick is useful

The integrated browser is an experimental VS Code feature that puts a real browser tab inside the editor. That means fewer context switches, faster UI checks, and less alt-tabbing like it is still a respected career path. You can preview pages, inspect layout issues, debug JavaScript, and send selected elements into AI chat for help with HTML or CSS.

Step 1: Open the integrated browser

  1. Open VS Code.
  2. Press Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac.
  3. Run Browser: Open Integrated Browser.

Expected check: A new browser tab opens inside the editor area, not in your default system browser.

Step 2: Load your app or page

  1. Type your local address into the browser bar, for example http://localhost:3000, http://localhost:5173, or http://localhost:8000.
  2. Press Enter and wait for your app to load.
  3. If you want localhost links to stay inside VS Code in the future, enable the workbench.browser.openLocalhostLinks setting.

Expected check: Your app renders inside VS Code, and clicking normal links works. Ctrl+click or Cmd+click opens a link in a new integrated browser tab.

Step 3: Open DevTools without leaving the editor

  1. Use the browser toolbar and click Toggle Developer Tools.
  2. Inspect elements, watch the console, and test layout or script issues the same way you would in a standalone Chromium-based browser.

Expected check: You can inspect the DOM, see console errors, and confirm whether a CSS or JavaScript change fixed the problem.

Reference: VS Code integrated browser DevTools docs

Step 4: Send a page element to AI chat

  1. Click Add Element to Chat in the browser toolbar.
  2. Hover over the exact button, form, card, or broken section you want help with.
  3. Select it to attach that element as context in chat.

Expected check: Your chat prompt now includes the selected element, and optionally its CSS or screenshot if those settings are enabled.

Reference: Add context to AI chat

Step 5: Debug the page with breakpoints

If you want a cleaner workflow than manually opening the page each time, add a launch configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "editor-browser",
      "request": "launch",
      "name": "Launch in integrated browser",
      "url": "http://localhost:3000"
    }
  ]
}
  1. Save that in .vscode/launch.json.
  2. Press F5 to start the session.
  3. Set breakpoints in your code and interact with the page.

Expected check: VS Code opens the page in the integrated browser with the debugger attached, and breakpoints pause as expected.

Reference: Browser debugging in VS Code

Common mistakes

  • Using VS Code Web: this feature is for the desktop app.
  • Expecting every popup to work: popups are blocked, though new tabs are allowed.
  • Forgetting the feature is experimental: labels, settings, or behavior may change in later releases.
  • Using the wrong URL: if your framework runs on port 5173 or 8000, localhost:3000 will just sit there looking innocent and empty.

Troubleshooting

  • The command does not appear: update VS Code to the latest desktop release and check the official docs for any rollout changes.
  • Your app does not load: confirm your dev server is running and that the localhost port is correct.
  • Cookies or login state behave strangely: check the workbench.browser.dataStorage setting. ephemeral mode does not keep data between sessions.
  • The debugger does not attach: make sure the launch type is exactly editor-browser and the URL matches your local app.
  • Camera or microphone access fails: most permissions are denied automatically for security in the integrated browser.

Related settings worth knowing

  • workbench.browser.openLocalhostLinks for opening localhost links in VS Code
  • workbench.browser.dataStorage for global, workspace, or ephemeral storage behavior
  • workbench.browser.enableChatTools if you want experimental browser tools for agents
  • livePreview.useIntegratedBrowser if you use the Live Preview extension

Try this next

Once the integrated browser is working, use it on a real form flow, login page, or responsive layout bug. It is one of those tiny workflow upgrades that saves seconds all day, which is how good tooling quietly steals back your week.