In this guide you will see how to use Chrome DevTools to debug the application built in the FrontPanel App Template guide.

• FrontPanel Application version 6.0.0 or greater

The command shown will build and package the app for development, producing an output file named app-dev.asar and place it in an output directory within the project folder. (output/app-dev.asar)

npm run pack:devCode language: CSS (css)

Connect a USB cable from the PC to the OpalKelly XEM device and power on the device.

Run the app using the command line, providing the --app-package argument set to the path where the app-dev.asar file was built. For details see section 8 in the Creating the FrontPanel Template App from Scratch

Here is an example assuming the full path to the FrontPanel Platform executable is C:\Program Files\Opal Kelly\FrontPanel-Platform\Platform\FrontPanel-Platform.exe and the application package was built in C:\frontpanel-react-app\output.

"C:\Program Files\Opal Kelly\FrontPanel-Platform\Platform\FrontPanel-Platform.exe" "--app-package=C:\my-frontpanel-app\output\app-dev.asar"Code language: JSON / JSON with Comments (json)

Note that in Windows Powershell the command will need to be prefixed with a ‘&’.

& "C:\Program Files\Opal Kelly\FrontPanel-Platform\Platform\FrontPanel-Platform.exe" "--app-package=C:\my-frontpanel-app\output\app-dev.asar"Code language: JavaScript (javascript)

Here is an example assuming the FrontPanel Platform application was installed (copied to) the system Applications folder and the application package was built in $HOME/Desktop/frontpanel-react-app/output/app.asar.

"/Applications/FrontPanel Platform.app/Contents/MacOS/FrontPanel-Platform" --app-package=$HOME/Desktop/my-frontpanel-app/output/app.asarCode language: PHP (php)

Select ‘Toggle Developer Tools’ from the ‘View’ menu dropdown.

In the Developer Tools panel click the ‘Console’ tab.

Here you can see console log output from the application showing the progress messages logged during the FPGA configuration operation.

Open the FrontPanel.tsx file and add a breakpoint on the first line in the onCounterResetButtonUp() function by clicking in the left column where the line number is displayed.

Press and release the Reset button at the bottom of the counter panel in the app.

Application code execution should have stopped at the line with the breakpoint and the current state of the call stack and variables should be displayed.