Debug Apps with Google Chrome's Network Tab

SKIP AHEAD TO 
Introduction
Step-By-Step Instructions

Introduction


When testing an App in Preview, a general 'Could not retrieve next page' error message appears if a part of the App is misconfigured.

Screen_Shot_2019-08-14_at_13.33.06.png

Figure 1: General error message for Checkbox apps

The specific error behind each general error message can be identified through the Network tab in Google Chrome's developer interface.

 

Step-By-Step Instructions


To identify specific causes of App errors:

  1. Right click on your web page, then select Inspect.
    Screen_Shot_2019-08-14_at_13.36.48.png
    Figure 2: Location of Inspect on right click menu
  2. Click Network in the developer interface taskbar.
    Screen_Shot_2019-08-14_at_13.37.22.png
    Figure 3: Location of Network on developer interface taskbar
  3. Open the page where the error takes place in Preview and click next to execute the error. Content will then appear in the Network tab of the developer interface.
    Screen_Shot_2019-08-14_at_13.38.10.png
    Figure 4: The page in this example where, if Next is clicked, an error is encountered.
  4. In the Network tab, click on the line highlighted in red that appears. A line of code will then appear on the right.
    Screen_Shot_2019-08-14_at_13.39.18.png
    Figure 5: The relevant entry in the Network tab is highlighted in red
  5. In the line of code, scroll right until you can see the description of the specific error.
    Screen_Shot_2019-08-14_at_13.41.38.png
    Figure 6: The location of the specific error description in the Network tab