How to Collect Information from a Browser Developer Tool

Owned by Ture Hoefner (Unlicensed)
Oct 07, 2020
3 min read

See https://appfire.atlassian.net/wiki/spaces/SUP/pages/147358376 if you are unfamiliar with opening the developer tools for your browser.

If you don’t have a favorite browser for using the developer tools then we recommend Chrome if it is available in your environment.

When support asks you to look at the browser developer tool to collect information for troubleshooting they will usually either ask for any error messages from the developer tools “Console” or for details of a request and response from the developer tools “Network” tab.

The “Console” and “Network” tools are tabs in the main section of the developer tools. This is an example of the developer tools with the “Console” tab selected. The console is used to show log messages, usually warnings and errors, from the JavaScript that is running in your browser when a page renders or when you interact with the page.

Notice that there is a line in the console with a red “GET” with a 404. That is an error message. The yellow lines are warning messages. Rendering any Confluence page in your browser is going to result in several messages in the console. In this example, it is for a page in Confluence Server.

All of the information in that example console is noise. It is typical noise from Confluence that happens for any page render. When you are providing console output to support the noise should be eliminated whenever possible. That is done using the “Clear” button in either the “Console” or “Network” tab:

  • Select the “Console” or “Network” tab, depending on support’s request to you

  • Navigate to the problem page

  • CLEAR the console or the network calls by using the clear button

    • THEN perform the operation that is being investigated and look at the results in the console.

    • This eliminates all of the noise that a typical Confluence page render can generate. That noise is not from our apps, that is from Confluence doing what it does.

The “Network” tab is the more difficult tab for beginners to use. A little practice will show you that clicking on a line for a request in the “Name” column will open a detailed view on the right side for the selected request and response. This is what support is interested in. That detailed view includes tabs for headers and response details.

In this example, the request to the “templates” API is selected and then the “Response” tab has been selected in the detail views on the right side. For this example, the page was loaded then I used the “Clear” widget to clear the Network traffic, then I performed an action on the page (I hovered the mouse over a part of the page that is used to display a list of templates in our Flow Board app: