In this guide you will use Chrome DevTools to debug the FrontPanel PipeTest application found in the Examples provided with the FrontPanel Platform installation.

• FrontPanel Application version 6.0.0 or greater
• PipeTest Sample bitfile for your device – Opal Kelly Pins

Open a terminal and set the current directory to the root of the PipeTest example application project. It should be located under Examples/PipeTest folder where the FrontPanel Platform is installed.

cd <FrontPanelPlatform_RootPath>/Examples/PipeTestCode language: HTML, XML (xml)

Open the src/FPGAConfigurationFiles.ts file using the code editor and locate the import statement that corresponds to the XEM device that that will be connected to the PC. Then remove or comment out all other import statements.

In this example we show how to perform this step for the XEM8320-AU25P

import '../assets/XEM8320-AU25P/pipetest.bit';

//import '../assets/XEM7001-A15/pipetest.bit';
//import '../assets/XEM7010-A200/pipetest.bit';
//import '../assets/XEM7010-A50/pipetest.bit';
//import '../assets/XEM7305/pipetest.bit';
//import '../assets/XEM7310-A200/pipetest.bit';
//import '../assets/XEM7310-A75/pipetest.bit';
//import '../assets/XEM7310MT-A200/pipetest.bit';
//import '../assets/XEM7310MT-A75/pipetest.bit';
//import '../assets/XEM7320-A200T/pipetest.bit';
//import '../assets/XEM7320-A75T/pipetest.bit';
//import '../assets/XEM7350-K160T/pipetest.bit';
//import '../assets/XEM7350-K410T/pipetest.bit';
//import '../assets/XEM7350-K70T/pipetest.bit';
//import '../assets/XEM7360-K160T/pipetest.bit';
//import '../assets/XEM7360-K410T/pipetest.bit';
//import '../assets/XEM8305-AU15P/pipetest.bit';
//import '../assets/XEM8310-AU25P/pipetest.bit';
//import '../assets/XEM8350-KU060/pipetest.bit';
//import '../assets/XEM8350-KU115/pipetest.bit';
//import '../assets/XEM8370-KU11P/pipetest.bit';
Code language: JavaScript (javascript)

Locate the pipetest.bit that is compatible with the Opal Kelly XEM device that will be connected to the PC and copy or move it to the assets folder at the root of the application project. Ensure that the path where the pipetest.bit file is located on the filesystem matches the path specified in the import statement.

Install the project dependencies then build the application package in development mode.

npm install
npm run pack:devCode language: CSS (css)

Launch the FrontPanel Platform application, and in the Open dialog navigate to the folder where the FrontPanel App package is generated and select the app-dev.asar file.

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

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

Open the ‘ManualTestPanel.tsx’ file and add a breakpoint in the PerformReadTest() function.

Click the Read button in the Manual Test panel of the PipeTest application user interface.

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.