The ideal, streamline, no-nonsense debugging experience for working on the DND Player is to use VS Code and install the following extension:
Name: Debugger for Chrome Id: msjsdiag.debugger-for-chrome Description: Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol. Version: 4.11.3 Publisher: Microsoft VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Once the VS Code Chrome debugger extension is installed, debugging the site is incredibly easy.
Firstly ensure you have the .vscode/launch.json file, that should contain a config similar to this
{
"type": "chrome",
"request": "launch",
"name": "Debug in Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
}
Now to debug just press F5 (Make sure the packaging server is already running somewhere with yarn start
) - a new Chrome window will open and you'll be able to debug, place breakpoints, step
through code all natively within VS Code!