How do I use the Debug Console for a website project?

Previews
1

I’m looking to run a web app debugger in the IDE similar to how you can in VS Code.
The documentation implies that this is possible:

Project IDX includes the built-in Debug Console from Code OSS. Use this console to debug your app …

But when I run the debugger I get the message “All debug extensions are disabled. Enable a debug extension or install a new one from the Marketplace.”

There don’t seem to be any good options in the marketplace.

I’ve tried this with the Astro, and Simple HTML templates. Same result.

Documentation:

1 Like
2

I also trying to find the answer. @kirupa Can you guide us? How we can enable debugger in IDX?

3

Actually here is the answer… haha I was looking for the debug console but the page states exactly what to do:

  1. Open Settings: Click the gear icon or press Ctrl + , (on Windows/Linux/ChromeOS) or Cmd + , (on MacOS).
  2. Find the Setting: Look for the “IDX: Web Dev Tools” setting.
  3. Enable DevTools: Select “Enable Chrome DevTools for web preview (browser reload required)”. If you use a settings.json file, you can also set "IDX.webDevTools": true.
  4. Refresh: Refresh your browser window and reload your IDX workspace.

Once you’ve done this, you can open the web preview in Project IDX and use the Chrome DevTools panel just like you would in a regular Chrome browser.

4

Search this in extensions:
@category:"debuggers" javascript

You should get this extension: https://open-vsx.org/vscode/item?itemName=ms-vscode.js-debug

Edit:
You can just search:
@id:ms-vscode.js-debug