Edge DevTools Extension Fails to Launch Visible Browser and DevTools in VS Code on Windows 11

[jircdev]

Environment (please complete the following information):

• OS: Windows 11
• Extension version: 2.1.5
• Browser: Microsoft Edge Version 124.0.2478.67

Describe the bug: The Microsoft Edge Tools for VS Code does not function as expected. The browser is supposed to open within VS Code tabs for debugging, but it doesn't launch visibly and seems to be stuck in headless mode despite settings indicating otherwise. The DevTools panel does not open, and the extension throws an error stating "Error while fetching list of available targets No available targets to attach."

Repro steps:

1. Ensure Microsoft Edge is installed and updated.
2. Install Microsoft Edge Tools for VS Code extension version 2.1.5.
3. Attempt to configure launch.json with both default and documentation-specified parameters to launch Edge.
4. Attempt to launch the Edge browser through the VS Code extension using the configuration.
5. Try right-clicking an HTML file and selecting "Open with Edge" as described in the Microsoft documentation.
6. Observe that neither method results in the expected behavior, and the browser does not visibly open; extension errors with no available targets.

Expected behavior: The expected behavior is for Microsoft Edge to open in a visible tab within VS Code, allowing for interaction with the DevTools directly within the IDE environment.

Additional context: The issue persists even after ensuring all settings for headless mode are disabled and after multiple restarts of both Edge and VS Code. Screenshots of the error messages and settings have been provided to illustrate the problem. Multiple methods documented for opening the browser and DevTools directly have failed to function as described.

AB#50580089

[captainbrosset]

Thanks for filing. Adding this to our backlog.

[carloswm85]

@jircdev can you share your launch.json and tasks.json files? I was having the same Error as you, and some changes to the default files configurations seems to have fixed it. As you can see in this gif, the error surges when the browser is launched BEFORE the compilation is finished.

[akabarki76]

{ "type": "msedge", "name": "Launch Microsoft Edge (Visible)", "request": "launch", "runtimeArgs": [ "--remote-debugging-port=9222" ], "url": "http://localhost:3000", // or your dev server address "presentation": { "hidden": false } } akabarki76: Edge DevTools Extension Fails to Launch Visible Browser and DevTools in VS Code on Windows 11 #2147 Open Open Edge DevTools Extension Fails to Launch Visible Browser and DevTools in VS Code on Windows 11 #2147 @jircdev Description jircdev opened on May 2, 2024 · edited by github-actions Environment (please complete the following information):

OS: Windows 11 Extension version: 2.1.5 Browser: Microsoft Edge Version 124.0.2478.67 Describe the bug: The Microsoft Edge Tools for VS Code does not function as expected. The browser is supposed to open within VS Code tabs for debugging, but it doesn't launch visibly and seems to be stuck in headless mode despite settings indicating otherwise. The DevTools panel does not open, and the extension throws an error stating "Error while fetching list of available targets No available targets to attach."

Repro steps:

Ensure Microsoft Edge is installed and updated. Install Microsoft Edge Tools for VS Code extension version 2.1.5. Attempt to configure launch.json with both default and documentation-specified parameters to launch Edge. Attempt to launch the Edge browser through the VS Code extension using the configuration. Try right-clicking an HTML file and selecting "Open with Edge" as described in the Microsoft documentation. Observe that neither method results in the expected behavior, and the browser does not visibly open; extension errors with no available targets. Expected behavior: The expected behavior is for Microsoft Edge to open in a visible tab within VS Code, allowing for interaction with the DevTools directly within the IDE environment.

Additional context: The issue persists even after ensuring all settings for headless mode are disabled and after multiple restarts of both Edge and VS Code. Screenshots of the error messages and settings have been provided to illustrate the problem. Multiple methods documented for opening the browser and DevTools directly have failed to function as described.

image image image

AB#50580089

Activity captainbrosset captainbrosset commented on May 3, 2024 captainbrosset on May 3, 2024 Collaborator Thanks for filing. Adding this to our backlog.

captainbrosset added bug Something isn't working

tracked on May 3, 2024 carloswm85 carloswm85 commented on Jun 21, 2024 carloswm85 on Jun 21, 2024 @jircdev can you share your launch.json and tasks.json files? I was having the same Error as you, and some changes to the default files configurations seems to have fixed it. As you can see in this gif, the error surges when the browser is launched BEFORE the compilation is finished.

Code_WEV1TsyqaV

akabarki76 Add a comment

GitHub: It looks like you're referencing GitHub issue #2147, where the Edge DevTools Extension fails to launch a visible browser and DevTools in VS Code on Windows 11. Here’s a summary and some guidance based on the details provided:

Issue Recap

• Environment: Windows 11, Edge DevTools extension v2.1.5, Edge browser v124.x
• Problem: Launching Edge from VS Code (using the extension) always results in headless mode; DevTools don't open and an error about "No available targets to attach" appears.
• Troubleshooting tried: Disabled headless mode, checked config, restarted everything, followed all documented steps.

Recent Comments

• A collaborator (carloswm85) requested the user's launch.json and tasks.json files and mentioned that syncing browser launch with compilation completion (not launching browser before build is done) can help. They observed the error happens when the browser starts before the build finishes.

Your Provided launch.json

You posted a launch.json with various configs, including "Launch Microsoft Edge" and "Launch Microsoft Edge in headless mode." The non-headless config uses:

{
  "type": "msedge",
  "name": "Launch Microsoft Edge",
  "request": "launch",
  "runtimeArgs": [
    "--remote-debugging-port=9222"
  ],
  "url": "c:\\Users\\walidblitzzz\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.8\\out\\startpage\\index.html",
  "presentation": {
    "hidden": true
  }
}

But: The browser tab may be hidden due to "presentation": { "hidden": true }.

---

Suggestions for Troubleshooting

1. Try Removing "presentation": { "hidden": true } from Your Configurations

   • This setting hides the launch configuration output. Remove it or set to false to make the Edge window visible.

2. Check That Headless Mode Is Not Enabled

   • Ensure your normal Edge launch config does not include "--headless" in runtimeArgs.

3. Synchronize Build & Browser Launch

   • If you have a build task (for example, a TypeScript or Webpack build), make sure Edge only launches after the build task is complete. This is often handled via tasks.json and by setting "preLaunchTask" in your launch configuration.

4. Update All Extensions

   • Make sure you are running the latest versions of VS Code and the Edge DevTools extension, as well as Edge itself.

5. Check DevTools Extension Settings

   • In VS Code, go to settings for the Edge DevTools extension and ensure it’s not configured to launch in headless mode globally.

6. Open Edge Manually

   • Try launching Edge manually with remote debugging enabled:

     msedge --remote-debugging-port=9222
     

     Then, try to attach from VS Code.

7. Review Error Messages

   • The error "No available targets to attach" may mean no debuggable tabs are open. Make sure the URL you’re launching is correct and active.

---

Example (Visible Edge Launch Config)

{
  "type": "msedge",
  "name": "Launch Microsoft Edge (Visible)",
  "request": "launch",
  "runtimeArgs": [
    "--remote-debugging-port=9222"
  ],
  "url": "http://localhost:3000", // or your dev server address
  "presentation": {
    "hidden": false
  }
}

• Adjust the "url" to point to your actual app, not to an extension folder.

---

Next Steps

• Try the above adjustments.
• If you have a tasks.json, share it if you need more help synchronizing build and browser launch.
• Let me know if you still get the same error after these changes.

Would you like help editing your configuration files based on these suggestions? If yes, please specify your app’s start URL and build tools (if any).

akabarki76: Explain your comment.

GitHub Copilot: Certainly! Here’s an explanation of my previous comment:

---

Summary:
I reviewed your launch.json and the GitHub issue you referenced. The main problem is that the Edge DevTools extension in VS Code is not launching a visible Edge browser window for debugging, and DevTools are not opening as expected. The error "No available targets to attach" suggests that the browser either isn't launching correctly or isn't exposing a debuggable target.

Key Points from My Comment:

1. Configuration Review:
   Your launch.json contains both headless and non-headless Edge launch configurations. However, the "presentation": { "hidden": true } property may be hiding the browser window or the debug configuration in the UI.

2. Troubleshooting Steps:

   • Remove or set "hidden": false in the "presentation" property to ensure the browser window is visible.
   • Make sure "--headless" is not present in the runtimeArgs for the visible Edge launch config.
   • If you have a build process (like Webpack or TypeScript), ensure the browser only launches after the build is complete by using a preLaunchTask in your launch config and a corresponding tasks.json.
   • Update all related extensions and Edge to the latest versions.
   • Try launching Edge manually with remote debugging enabled to see if VS Code can attach.
   • Make sure the "url" in your config points to your actual app, not to an extension folder.

3. Example Fix:
   I provided an example of a visible Edge launch configuration for launch.json that you can try.

4. Next Steps:

   • Try the suggested changes.
   • If you have a tasks.json, share it for further help.
   • Let me know if the error persists after making these changes.

---

Goal:
The aim is to help you get the Edge browser and DevTools to launch visibly in VS Code for interactive debugging, by adjusting your configuration and workflow as needed.

[javeskupal]

how to to run my code