Does this work with vscode-js-debug/nvim-dap-vscode and new RN architecture (Hermes)?

[tomoakley]

Hi, thanks so much for working on this. Debugging RN apps within neovim would be amazing. Sadly I cannot get this to work :(

I have nvim-dap-vscode-js set up with vscode-js-debug, and then using neotest-jest to run unit tests and debug them with nvim-dap which works well. As vscode-node-debug is now deprecated in favour of vscode-js-debug, I tried using vscode-js-debug with nvim-dap-reactnative but sadly couldn't it to work. However I couldn't get vscode-node-debug to work either. One thing I was unsure of - nvim-dap-vscode-js has a few different adapters: pwa-node, node-terminal, pwa-chrome and a few others. I was assuming pwa-node would be the correct adapter for react native but when I tried it I just got the "debug adapter taking a while to respond" warning. I tried node-terminal and didn't get that - but it still didn't connect.

Also, the app I work on is on RN 70, which no longer has a "debug mode" - debug mode is always active. Does this change anything for nvim-dap-reactnative? Is Fabric, Hermes, Turbo Modules and JSI compatible with nvim-dap-reactnative currently?

Would be happy to work with you to get this working!

[tomoakley]

I've managed to get it to attach to the debugger, and hit some breakpoints. However, two issues:

1. I have to use the debugger keyword in the TypeScript - using the DAP toggle_breakpoint method means it won't hit it
2. Sourcemaps aren't working so while it hits each debugger I can't see the values of variables etc

Here is my config:

require('dap-vscode-js').setup({
  debugger_executable = os.getenv('HOME') .. '.local/share/nvim/mason/packages/js-debug-adapter/js-debug/src/dapDebugServer.js',
  adapters = { 'pwa-node' },
})

for _, language in ipairs({ "typescript", "javascript", "javascriptreact", "typescriptreact" }) do
  dap.configurations[language] = {
    {
      name = "React Native",
      type = "pwa-node",
      request = "attach",
      program = "${file}",
      cwd = "${workspaceFolder}",
      sourceMaps = true,
      protocol = "inspector",
      console = "integratedTerminal",
      port = 8081,
      outDir = "${workspaceFolder}/.vscode/.react",
      resolveSourceMapLocations = {"**", "!**/node_modules/!(expo)/**", "!**/debuggerWorker.js, ${workspaceFolder}/.vscode/.react/debuggerWorker.js.map"},
    },
  }
end

Also I don't get any output/response at all in the tmux window where nvim-dap-reactnative is running (apart from the "starting debugger app line" when I first run the node src/standalone.js command), and if I cancel it, it doesn't appear to have any effect on nvim-dap.

[tomoakley]

I've tried making some changes in the nvim-dap-reactnative code to use the createDebuggingConfigForRNHermes instead, and in my dotfiles use port = 35000 instead but I still can't get it connect :(

[felipejoribeiro]

Hello @tomoakley , currently using nvim-dap-reactnative with Hermes, typescripts and vscode-node-debug2 without problems. Currently using the vscode debugger from this repo: git@github.com:microsoft/vscode-node-debug2.git
My configs are identical to README.md

"react": "18.1.0",
"react-native": "0.70.6",

Would love to use vscode-js-debug, as it can be installed with packer. Will look at this matter latter.

[tomoakley]

Hello @tomoakley , currently using nvim-dap-reactnative with Hermes, typescripts and vscode-node-debug2 without problems. Currently using the vscode debugger from this repo: git@github.com:microsoft/vscode-node-debug2.git My configs are identical to README.md

"react": "18.1.0",
"react-native": "0.70.6",

Would love to use vscode-js-debug, as it can be installed with packer. Will look at this matter latter.

thanks @felipejoribeiro. it's probably something in the app I work on then. will try and get it working again, and try with vscode-node-debug2 as well. will look at your dotfiles too

[tomoakley]

I can't seem to get the RN app to connect to the nvim-dap-reactnative websocket url. the websocket is started but then nothing comes through in the onMessage callback when I start my app. One thing to note is that the app always seems to be in debug mode - bringing up the dev menu just shows "Open Debugger" rather than "Debug JS Remotely". Pressing "Open Debugger" shows

info Opening flipper://null/Hermesdebuggerrn?device=React%20Native...

in the metro bundler logs and Flipper opens.

The app is using:

    "react": "18.1.0",
    "react-native": "0.70.6",

in package.json

any ideas?
@sultanahamer @felipejoribeiro

also - I'm running this on iOS simulator. I haven't tried with Android yet.

[tomoakley]

so this appears to work for Android. I open the app on the emulator, bring up the dev menu, press "Debug" and it reloads the app and stops on the white screen. I can then run continue, dapui comes up and I can see my variable scope at the breakpoints I define.

So how do I get this working on iOS? I do most of my work on the iOS simulator so it'd be great to have it there.

[felipejoribeiro]

it's great that its working on android. It shows that the setup is alright. Here i use the debugger in the ios emulator as well without problems. After initializing the adapter, i click on the 'shake' option and i select debug in the menu and it connects.
Are you initiating the emulator with something like react-native run-ios?

[tomoakley]

yeah react-native run-ios. There's no "Debug" option in the iOS dev menu bought up by shake. I found this issue on the RN github: facebook/react-native#34615 (comment), he made https://github.com/gusgard/react-native-devsettings to re-add "Debug JS Remotely" on RN 70 builds. I added it in to the app I work on, selecting this option on iOS now means the app connects to the debugger and nvim-dap works. At some point I will try to investigate why 'Debug' is not there at all.

I'm not fully aware why Meta removed this option, or if there would be any consequences to adding back this option. It seems to work for now, and I've only added it in __DEV__ builds. I would guess by selecting this option it changes the JS engine back to v8 from Hermes as in old RN releases.

I also have a couple of questions about nvim-dap-reactnative (or vscode-react-native seeming as it's a port):

• what is the difference between createDebuggingConfigForPureRN and createDebuggingConfigForRNHermes?
• in standalone.ts it has useHermesEngine: false in the attachArgs object. How do Hermes connect to the debugger if that is false?
  I think the answers to both is to do with v8/JSC/Hermes but I don't understand enough about RN architecture to know exactly. Would be really good to understand this a bit better.

[megalithic]

@tomoakley any updates on getting things to work? interested in creating a short demo showing off the process of running it and operating it? i know that's a big lift, but this seems to be the thing there are always posts on reddit (RIP) and other social platforms asking for help to get setup. or @felipejoribeiro too?

thanks!

[sultanahamer]

@megalithic we have not tested this on iOS but similar steps should do it in general.