question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Edge devtools extension doesn't work on remote hosts.

See original GitHub issue

Describe the bug I’m using the Edge DevTools Extension to inspect the DOM/network from within VS Code. Using the new inspector integration, as per this comment from @mliao95, doesn’t work in a remote environment (WSL or containers).

When clicking the inspector icon, rather than launching the inspector it triggers prompt to install the extension, even though it’s already installed.

This is most likely because this check fails in a remote instance as vscode.extensions.all doesn’t work as expected in remotes.

To Reproduce

  1. Open a remote workspace (WSL or containers)
  2. Install the nightly js-debug extension
  3. Install the Edge devtools extension
  4. Launch a browser with client-side debugging (either Open Link or a launch task of pwa-edge)
  5. Click the inspector icon
  6. Expected Edge extension to show the inspector. Actual Prompted to install the extension

VS Code Version:

Version: 1.57.0-insider (system setup)
Commit: bf84ee619e0b67443d0307c04348fa575bc3c363
Date: 2021-06-07T12:46:22.208Z
Electron: 12.0.9
Chrome: 89.0.4389.128
Node.js: 14.16.0
V8: 8.9.255.25-electron.0
OS: Windows_NT x64 10.0.19043

Additional context

I’ve cloned the js-debug extension, removed the check for the Edge extension and side-loaded it into a container. That does result in the expected behaviour of click inspector -> get Edge inspector but the Edge inspector doesn’t properly connect. The DOM inspector doesn’t show any DOM nodes and the Network tab doesn’t have any traffic in it. My assumption is that the debugger isn’t forwarding requests through properly in a remote environment, but how that all works is beyond what I’ve been able to discover.

Here’s a video of it in action, using my modified version of the js-debug extension. An issue has also been opened on the vscode-edge-devtools issue register, to keep that team in the loop too.

https://user-images.githubusercontent.com/434140/121441188-aabdaa00-c9cc-11eb-9322-cd43fe8165ad.mp4

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:18 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
connor4312commented, Aug 9, 2021

I think @bgoddar still needs to adopt+publish the changes on the Edge devtools extension side of things.

1reaction
connor4312commented, Aug 9, 2021
  1. Check to see if the edge debug extension is running in the workspace ([e.g.]https://github.com/microsoft/vscode-js-debug/blob/baacf1949db03a34ee8ad2160cc77f21c371a77a/src/extension.ts#L37))
  2. If not, pass forwardToUi: true as a second argument to extension.js-debug.requestCDPProxy
  3. I’ll return back a forwarded port
Read more comments on GitHub >

github_iconTop Results From Across the Web

Remotely debug Windows devices - Microsoft Edge
The Microsoft Edge DevTools opens in a new tab and screencast the content from the host (debuggee) machine to the client (debugger) machine....
Read more >
Easier browser debugging with Developer Tools integration in ...
To debug any project in either Chrome or Microsoft Edge, all you need to do is to start a session by pressing F5...
Read more >
Microsoft Edge Extension Troubleshooting
This page presents the most frequent reasons for which the UiPath Extension for Microsoft Edge might not work properly, and how to solve...
Read more >
Search: Find text across all loaded resources
In the top-right corner of DevTools, select Customize and control DevTools > More tools > Search. Press Esc to open Drawer, and in...
Read more >
Chrome DevTools Devices does not detect ... - Stack Overflow
Now I have the Chrome Inspect feature working when I need it. ... but the phone doesn't appear under 'Remote devices' in the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found