-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Trying to debug RNW app (Hermes Direct Debug) with Visual Studio gives "TargetDescriptor cannot be null" error #12113
Comments
Can you try with localhost:9222, 9223, and 9229. I think the instance will be exposing the debugging protocol on one of those ports? Not sure what the webkit thing you tried to attach to was, but I dont think that was RN. |
That's what I'm trying to find out. I filed this bug as a reference point to talk with the VS folks. Everywhere else (Chrome/Edge DevTools, VS Code) you must connect to |
I think I see what the issue is. We do want to connect to localhost:8081, since the bundler is publishing the list of debug targets (which you can see from localhost:8081/json). There's some code in the attach flow (in Visual Studio) that assumes that the Id field for a debug target will be a Guid, and we try to parse the guid to use as the guid for the debug struct we pass to the debug engine to create a possible attachment.
I'll see if we can just spoof the guid, or if there's any real need for that to be consistent across attach attempts. |
Is it defined in the CDB protocol that this is supposed to be a guid? Or is it allowed to be any string? (Is this a bug in our implementation, or a bad assumption in VS)? |
I think it's a bad assumption in VS. The CDP spec defines the target id as just a string, but it just happens to be a guid everywhere in V8. https://chromedevtools.github.io/devtools-protocol/tot/Target/#type-TargetID |
Ok, so as an experiment I modified the [
{
"id": "{00000000-0000-0000-0000-00000000000000000000001}",
"title": "Hermes",
"faviconUrl": "https://reactjs.org/favicon.ico",
"devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D1",
"type": "node",
"webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=1",
"vm": "Hermes",
"deviceName": "JAUNTYPAD"
}
] However, if I try to set VS to attach to So what's the missing link here? |
## Description This PR adds the steps to direct debug Hermes using Visual Studio. Discovered while investigating microsoft/react-native-windows#12113. Also some minor formatting cleanup. ### Why To help developers who would prefer to use Visual Studio to direct debug JavaScript. ## Screenshots N/A ###### Microsoft Reviewers: [Open in CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/microsoft/react-native-windows-samples/pull/878)
This should be fixed in the latest preview of VS. Give it another shot and let me know if it works as expected. |
## Description This PR adds the steps to direct debug Hermes using Visual Studio. Discovered while investigating microsoft/react-native-windows#12113. Also some minor formatting cleanup. ### Why To help developers who would prefer to use Visual Studio to direct debug JavaScript. ## Screenshots N/A ###### Microsoft Reviewers: [Open in CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/microsoft/react-native-windows-samples/pull/878)
@EricCornelson Connecting in VS 17.9.3 I do see "Hermes" in the connection now: However I still get an error when trying to connect: JSON from {
"id": "0-1",
"title": "Hermes",
"faviconUrl": "https://reactjs.org/favicon.ico",
"devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D1",
"type": "node",
"webSocketDebuggerUrl": "ws://localhost:8081/inspector/debug?device=0&page=1",
"vm": "Hermes",
"deviceName": "JauntyPad"
}
] Is your fix in 17.9.3? Or is this something else? My previous workaround (connecting direct to |
Added logging after calling
|
Okay, I've got debugging to work as long as you have VS 17.9.3 or greater. The only remaining issue is having the UWP project opened in VS when trying to attach. If you just start VS with no code, you can attach just fine. New issue tracking that here: #12842 |
Problem Description
Visual Studio supposedly contains the same debugging support for Node.js / Chrome Dev Protocol as Visual Studio Code. To test this I've tried attaching the Visual Studio debugger to an RNW app running with Hermes and Direct Debugging with the following settings (the only settings that lets me attach to anything AFAIK):
But I get the following error message:
Steps To Reproduce
Create and build new app with Hermes and Direct Debugging enabled
npx react-native@latest init testdebug72
cd testdebug72
npx react-native-windows-init --overwrite
UseHermes
to true inwindows\ExperimentalFeatures.props
UseWebDebugger
tofalse
andUseDirectDebugger
totrue
inwindows\testdebug72\App.cpp
npx react-native run-windows --logging
Try to attach Visual Studio debugger
Debug
>Attach to Process
a. Connection type: JavaScript and TypeScript (Chrome DevTools/V8 Inspector)
b. Connection target: ws://127.0.0.1:8081
c. Attach to: JavaScript and TypeScript
Expected Results
Debugger attaches, loads the source map from Metro, and lets me debug the JS code.
CLI version
11.3.6
Environment
Target Platform Version
10.0.19041
Target Device(s)
Desktop
Visual Studio Version
Visual Studio 2022
Build Configuration
Debug
Snack, code example, screenshot, or link to a repository
No response
The text was updated successfully, but these errors were encountered: