Space TimelineSpace Timeline

Capturing Console Logs and Creating .HAR Files

Owned by Nataliia Plakhtii (Deactivated), created
Last updated: Aug 14, 2024 by Mercedes Rothwell
4 min read

Date

Changes

Date

Changes

August 2024

Updated to include steps for enabling the Auto-open Dev Tools for popups checkbox.

October 2023

Documentation extended with several types of logs.

January 2021

Provided comprehensive documentation about capturing console logs.

Overview

Capturing logs will help Support and Engineering understand your issues more quickly. For more information on creating a support ticket, visit the guide here. Logs are useful when you are experiencing the following types of issues:

  • You receive an HTTP 500 error code (500, 502, and 503)

  • An issue with an integration (SAML, CRMs, APIs, etc.)

  • Any issue where the system has degraded performance either due to an upgrade or some change that Docupace cannot reproduce.

HAR (HTTP Archive) is a file format used by several HTTP session tools to export the captured data. The format is basically a JSON object with a particular set of fields. HAR files contain:

  • Content of the pages you accessed while recording.

  • Your cookies.

  • All the information that you submitted while recording.

You capture a session in many browsers using Developer Tools, including Google Chrome, Microsoft Edge, and Mozilla Firefox. It logs all interactions between the client and server, capturing both requests and responses along with their data. The process for each browser differs slightly.

Opening Developer Tools

 

 1. Open Developer Tools:

  • Option 1: Menu > More Tools > (Web) Developer tools

  • Option 2: Click <F12>

  • Option 3: Click <Ctrl+Shift+I>

  • Option 4: Click right mouse button (somewhere inside the window) and select Inspect from the context menu

Depending on the Web browser, menus can look slightly different:

  1. Select the Preserve Log checkbox.

Tip: If the Developer Tools are located somewhere other than the bottom of the screen, click the three vertical dots icon in the Developer Tools menu bar and select the appropriate docker position.

  1. Click the settings icon.

  1. Confirm that you have Auto-open Dev Tools for popups selected under the Global section.

Now, you are ready to work with the Developer Tools.

Working With Developer Tools

Console

To capture the error, complete the following steps:

  1. Perform the task where the error occurs.

  2. In Developer Tools, select the Console Tab (this log will contain information about the error).

  3. Right click anywhere inside the Console content.

  4. In the context menu, click Save as...

  5. Save request as .log file.

  6. Provide this file to Support.

Capturing Network Logs

 

  1. To detect where the error occurs, reproduce the error.

  2. After a second reproducing the error, in Developer Tools switch to Network Tab. There must be several requests marked RED.

  3. Right click on the request. It contain detailed information about the errors.

  4. In the context menu, select Save all as HAR with content.

  5. Save request as .HAR file.

  6. Provide this file to Engineering.

HAR file example:

Capturing Application Information

In some cases, the Application tab and its values can be useful for error detection.

  1. In Developer Tools, select the Application Tab.

  2. On the left side, click on the URL.

  3. Select the necessary values.

Audience: Docupace Admins.

Functionality: This guide provides steps for capturing console, network, and application logs, and how to save them. Capturing logs can be helpful when pages are not reacting or behaving correctly. For that, you need to check the log files for errors.

Related Pages:

 

 

© Docupace Technologies 2020 | Documentation Dashboard