When troubleshooting complex issues, it is sometimes necessary for our support team to obtain additional information about the network requests that are generated in your browser while an issue occurs. Using developer tools to inspect a web page allows us to:

  • Identify the errors and warnings reporting by a web page on loading

  • Identify the network traffic and inspect details of failing requests

The advantage here is that the user can examine the issue and retrieve error messages without the need of an Administrator.

Accessing the Developer Tools

For most web browsers to access Developer Tools, right-click on the web page, then select Inspect or Inspect Element. Otherwise access the tool from the Browser menu:

Browser Name

Access from the Menu

Google Chrome

More Tools > Developer Tools

Mozilla Firefox

Tools > Web Developer > Inspector

Internet Explorer

F12 (Or, go to the Tools menu using press Alt+X and select Developer Tools.)

Safari

Develop menu, then select Show Web Inspector

Using the tool

Console and Network are the two tabs that are of most interest.
The Network Tab gives us a view of the resources that are requested and downloaded over the network in real-time.

Choose "Network" tab

  1. Refresh the page you're on with F5 or else be sure to open the tab before loading a page so that it captures the network requests

  2. You'll get a list of HTTP queries that happened

  3. Select one of the names in the left-hand column

  4. The "Headers" tab shows the request and response headers.

  5. Right-click on the Name column of interest and check for error codes

  6. Save the HAR (HTTP Archive) file will depend on the browser being used. See the Table below.

  7. Attach the file to the Jira Portal ticket.

Browser Name

To generate the HAR file

Google Chrome

right-click anywhere on the grid of network requests, select Save as HAR with Content, and save the file to your computer.

Mozilla Firefox

right-click anywhere under the File column and click on Save all as Har.

Internet Explorer

Click the Save button.
Give the trace a filename and click the Save button which will save it as a .har file or .xml file.

Safari

Click the Export icon on the far right of the network tab and save the HAR file.

Example for Google Chrome

We are looking for an HTTP status code returned by the server. 

A 200 code is common for a successful response; although anything within the range of 200-299 is considered OK. Error codes like HTTP response code 401 or 500 are shown in red.

The Console tab

The Console has 2 main uses: viewing logged messages and running JavaScript. We’re interested in logged error and warning messages especially any error codes that are shown.

Steps to perform

  • Show the Console and look for Error warnings.

  • Take a screenshot or copy the error(s)

  • Clear the console as shown below.

  • Refresh the web page, and then perform the steps that led to the issue.

  • Copy the content or right-click “Save as” and attach the file(s) to the Jira Portal ticket.