add react-native debugger using vscode extension

[darioceccoli]

Issue: https://github.com/emacs-lsp/dap-mode/issues/117

[yyoncho]

Good job! Can you update the readme (you may add a screenshot/gif as well)? The same goes for the acknowledgments section in the readme - feel free to add yourself.

[darioceccoli]

This is very much work in progress and it doesn't work yet 😕

As of reactNativeDebugEntryPoint.js:34, the vscode extension requires to create a nodeDebugLocation.json file in ~/.emacs.d/.extension/vscode/msjsdiag.vscode-react-native/extension/src/debugger which contains the path of the vscode node debugger, eg:

{"nodeDebugPath":"/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2"}

At the moment I copied that file manually in my setup, but it should be included in the setup process.

:cwd is mandatory in dap-register-debug-template and should include the react-native project path, so I will have to add it to the conf.

At the moment the debugger seems to attach, but when calling dap-breakpoint-add we get a

setBreakpointsRequestsetBreakpointsRequestError processing "setBreakpoints": TypeError: Cannot read property 'Debugger' of undefined
    at Object.<anonymous> (/Users/darioceccoli/.emacs.d/.extension/vscode/ms-vscode.node-debug2/extension/node_modules/vscode-chrome-debug-core/out/src/chrome/chromeDebugAdapter.js:1405:44)

because the chrome getted in chromeDebugAdapter.js file returns null, I still have to figure out why.

[darioceccoli]

It does look like it can be done 😀! Starting the react-native packager on vscode (which is part of the same vscode plugin) and starting the debugger using dap-mode allows to debug a react-native project in emacs!

I need to add the ability to start/stop the react-native packager on dap-react-native.el

[yyoncho]

Cool.

I need to add the ability to start/stop the react-native packager on dap-react-native.el

If this is started per debug session we might need extending dap-mode.el to support running a process before starting the debug adapter. I think that there was something like that in the VScode templates.

[darioceccoli]

Normally the packager is on even when the debugger is off, eg if you don't want to debug, but you want to use Live/Hot Reloading. So it would be nice to have a M-x react-native-start-packager and react-native-stop-packager but not necessary.

On the vscode extension, the functions to start/stop the packager are in the file msjsdiag.vscode-react-native/extension/src/common/packager.js, but there are several includes to vscode, so I don't think we can easily use it within emacs and without vscode installed.

BUT there's an alternative 🙂

By default, when starting the packager with yarn start or npm start from cli a new Chrome tab is created and attached when a client try to attach to the packager. To prevent doing that it is necessary to set the REACT_DEBUGGER env variable before starting the packager, like so:

REACT_DEBUGGER="echo A debugger is not needed: "
yarn start

Even easier, it is possible to set this directly inside the react-native project's package.json, replacing the default start script with this one:

"scripts": {
  "start": "REACT_DEBUGGER='echo A debugger is not needed:' && node node_modules/react-native/local-cli/cli.js start",
}

This tells the packager not to start the Chrome debugger and let the debugger we started using dap-debug to attach automatically and allow debugging react-native projects from emacs using dap-mode!

So, long story short, I think this works as a bare bone v1, once I update readme/screenshots.

[darioceccoli]

Ehm, I forgot one thing. As I said above, the vscode extension requires to create a nodeDebugLocation.json file in ~/.emacs.d/.extension/vscode/msjsdiag.vscode-react-native/extension/src/debugger which contains the path of the vscode node debugger.

I need to add that to the setup step.

[leungbk]

@darioceccoli What's the status on this? This seems like a nice addition.

[tomoakley]

Hi @darioceccoli, did you make any further progress on this? I use vim, not emacs (I come in peace!), but very interested and excited in potentially being able to ditch React Native Debugger/chrome and debug from inside vim instead, using vimspector or nvim-dap. I've tried to untange vscode-react-native, but it looks like the source has changed somewhat since you did this work.

[11111000000]

it works?