Debug code components
After implementing the code component logic, you can start testing and debugging the code component using the
npm start command. This command builds the code component and opens it in the local test harness.
Unsure about entity vs. table? See Developers: Understand terminology in Microsoft Dataverse.
As the image above shows, the browser window opens with four sections. The code component is rendered in the left pane while the right pane has Context Inputs, Data Inputs, and Outputs sections.
Context Inputs provides a way to specify the form factor and test the code component with each form factor (web, tablet, phone). This is helpful when the code component is dependent on a particular form factor capability.
Outputs render the output whenever a component's getOutputs method gets called.
If you want to modify the
ControlManifest.Input.xml file or create additional properties, you need to restart the debug process before they appear in the inputs section.
Test code components with mock data
For field type components, you can input value and type for every property defined in your ControlManifest.Input.xml as shown here:
For dataset type components, you can load a CSV file with test data. You manually create or export in .csv format directly from your environment. Once a valid CSV file is available, it can be loaded as shown here:
After loading a CSV file, bind each property defined in the ControlManifest.Input.xml to a column in the CSV file. This is done by picking the column for each property as shown here:
If you don't have any properties defined in the ControlManifest.Input.xml file, then all the columns get automatically loaded into the test harness.
Watch mode in test harness
The test harness supports the
watch mode, which you can take advantage of for Power Apps component framework projects. To enable
watch mode, start the test harness using the command
npm start watch. In
watch mode, the changes made to any of the following component assets are automatically reflected in the test harness without having to restart it:
- Imported libraries in
- All the resources listed in the manifest file.
Debug code components using native browsers
You can use the browser's debugging capabilities to observe the component behavior. Each browser provides you with a debugging tool to help you debug your code natively in the browser.
Typically, you can activate debugging in your browser by pressing the F12 key to display the native developer tool used for debugging.
For example, on Microsoft Edge:
Press F12 to open the inspector.
Select your component.
On the top bar, go to Debugger and then search for the component name described in the manifest file in the search bar. For example, type your component name like
Hello World component.
You can also interact with the component locally in real time and observe elements in the DOM by setting a breakpoint in the Sources tab as shown here: