Troubleshooting Toolkit: How to retrieve network errors

[cfernandes]

Sometimes you will come across an error on a page that is not quite specific enough and leaves you looking for more information on what could be incorrect or not functioning properly. You may, for example, see an image like this:

When you see an error like this, there is a tool you can use to often find out more information: The Javascript console. Sometimes, you will see the specific information that will guide you to the solution right in the console. Other times, you may get some more information, but not enough. Having the network errors are great to have when filing a ticket with Support. This extra information will help to expedite the troubleshooting process.

The Javascript console in Google Chrome (you can access a console in other browsers as well, but we will focus on Chrome) is a very useful tool that can show any errors that may be appearing on the page and gives further information on what the error is referring to. In Support, we look to the console for more information on errors and we will sometimes ask for a screenshot of your console. So how do you access this console and capture these errors?

Console Tab

1. Open Chrome to the page you are experiencing errors on.
2. Right click on the page and click ‘Inspect’. You can also use the keyboard shortcuts Press Ctrl + Shift + J (Windows / Linux) or Command + Option + J (Mac).
3. Navigate to the ‘Console’ tab.
4. Reproduce the error you were experiencing.

The console tab will log any errors or warnings that appear on the page. For example, if a resource fails to load on the page, you will often find the error for this in the console.

Network Tab

1. Navigate to the network tab.
2. Reload the page with the errors.
3. Click into the error and go to the ‘headers’, ‘previews’, and ‘response’ tab to get even more information on the error.

The network tab shows all the elements loading on the page and their load times. For example, if there is a Javascript file attached to the page, we will see that Javascript file listed in the Network tab when the page loads.

Most errors and failed resources are highlighted in red, so capture any of those highlighted red texts in the console and network tabs and send those along to Support in your ticket!

You can also collect a HAR file from the network tab. For directions on collecting this file, click here.

For more information on the Chrome console, please see here.

If you have any questions during this process, please post your questions in the Blog, Website, & Page Publishing board.

[roisinkirby]

Thanks for sharing @cfernandes!