ReactApplicationRootclass to host your React app/ui then you can enjoy a debugging experience similar to that of React Native.
JUCE_DEBUGdefined, ensure your editor has focus and use the
CTRL-d/CMD-dcommand to trigger a call to
EcmascriptEngine::debuggerAttach. This command blocks the UI and awaits connection from a debug client. You can then attach your debugger, continue execution and set breakpoints etc.
GainPluginexample project is provided below. Note that
localRootpoints to the root
workspaceFolder. In this case we assume
outDirentry points to the build directory containing the compiled JS bundle you wish to debug. This
outDirdirectory should also contain the bundle's associated source map.
outputkey in your webpack config:
webpack --mode=development. In the case of the
GainPluginexample this can be achieved by running
npm run startin
webpack.config.jstemplate provided by React-JUCE enables all of this for you. See: Starting a new Project for a project template setup which includes debugger support. Project template files are available under
GainPluginexample do the following:
GainPlugin/jsuidirectory in Visual Studio Code.
launch.jsonconfiguration from above to your
npm run startin the
GainPlugin's UI/PluginEditor focus and hit
JSUI Debug Attachlaunch task from the VSCode debugger menu.
npm installin the
vscode-duktape-debugroot followed by
npm run compile. You can then copy the contents of
vscode-duktape-debug/distto your vscode extensions directory which is usually under
.vscodein your home folder. Copy the contents of
.vscode/extensions/haroldbrenes.duk-debug-0.5.6. There are issues attaching the debugger with breakpoints already set in vscode on Windows. You will need to attach the debugger and then set breakpoints once attached.