Viewing Submission Data in the DevTools Console

Introduction

Troubleshooting and testing are an essential part of the application creation process. Using the right tools, such as the DevTools Console, you can ensure your application works as expected. The DevTools Console is part of a suite of developer tools provided by Google Chrome. In the DevTools Console, you can enter in commands to troubleshoot and test your application submission data.

The most common command you'll use in the DevTools Console tab is the Angular command. The Angular command, or data command, logs the submission data in the browser. You can reference this log to see how your application performs.

Access the DevTools Console

To open the DevTools Console tab:

1. Preview your module in Express View.
2. Right-click anywhere on your Express View page.
3. Click Inspect. By default, the DevTools panel opens on the right side of your page.

To open the Console in Google Chrome, you can use the Ctrl + Shift + J (Windows/Linux) or Option + Command + J (Mac OS) shortcut.

4. At the top of the DevTools panel, click the Console tab.

The Console tab lets you view your Unqork application's submission data. A blue arrow to the left of a blank row at the bottom of the Console's feed indicates the Console's command line. You'll use this field to enter commands to get more data details.

Run the Angular Command

With the DevTools Console open, you can run the Angular command.

To run the Unqork Angular command in the DevTools Console tab:

1. At the prompt, enter the following Unqork Angular command:
Copy 
angular.element('.unqorkio-form').scope().submission
2. Press Enter (Return). The submission object displays in the Console.
3. Click the solid drop-down arrow to the left of the response in your Console panel. The response starts with   {data: {...}.
4. Expand the   data section to display your submission data object.

Next time you open the DevTools Console, you can press the up arrow key on your keyboard to repopulate the most recent command.

The Unqork Angular command only displays the submission data stored in a component through automated or end-user input before the command runs.

A static image displaying a module in Express view. The browser's DevTools are open and the angular command is used to display the data captured by the module.

You can see the data you entered on the front-end. Use this data for troubleshooting and mapping purposes.