SAP Knowledge Base Article - Public

3243468 - Generating Web Console logs and HAR files for Signavio Support

Symptom

Signavio Support have asked me to provide 'Web Console Logs' and generate a 'HAR' file to help diagnose my issue.

Image/data in this KBA is from SAP internal systems, sample data, or demo systems. Any resemblance to real data is purely coincidental.

Resolution

What is a web console log and HAR file?

HAR is the short form for HTTP Archive format, which tracks all the logging of web browser's interaction with a site.

The web console log is a log that contains information associated with a web page, such as JavaScript, network requests, and security errors.

Why we need this information.

The information displayed in the developer console can be extremely helpful for the Signavio support team when we're trying to figure out how to solve an issue.

What to submit to support.

It is highly recommended to generate multiple HAR files amd console log files for comparison, please generate these files and name them appropriately:

  1. Generate a HAR + Console log files for an unaffected page (without performance issue or page rendering issues). Plus save the console log.
  2. Generate a HAR + Console log files for an affected page. Plus save the console log.

Please select what browser you are using.

Google Chrome

Setup:

  1. Open the page where the error is occurring.

  2. Open the developer tools using one of these methods:


    • Using Keyboard Shortcut :
      • MAC: ⌘⌥I on OS X 
      • Windows: F12 (or Fn+F12 on some laptops)

    • From the Chrome Menu at the top-right of your browser window, then select More Tools > Developer Tools.
  3. Navigate to the following two tabs and perform these tasks:
    1. On the Console tab in the Development Tool, press the Clear Console button.


    2. On the Network tab in the Development Tool tick Disable cache and Preserve log, then clear.



Capture the information:

  1. Look for a round record button in the upper left corner of the Network tab, and make sure it is red. If it is grey, click it once to start recording.



  2. Important : Please now Refresh the page to start capturing the traffic between the browser and the server.

    To do this, right click on the refresh icon and select Empty Cache and hard reload


    We do this to capture a full page load, so we can see the requests made prior to the problem we're analyzing.

  3. Now complete the steps that demonstrate your issue.

  4. Once complete, please save the diagnostic information for us to review.
    In the Development Tool, please do the following;

    1. Save the .HAR file.
      In the Network tab, Right click under the 'Name' column, and select Save all as HAR with content.



      Alternatively, if this option is not visible, select the export icon to download the HAR file.
    2. Save the .LOG file.
      Right click in the body of the Console tab, and select Save as.




  5. (optional) Please zip the files to reduce size.

  6. Upload your HAR and Console Log file to your ticket, so that our Support team can analyze it.

Microsoft Edge

Setup:

  1. Open Microsoft Edge and navigate to the page where the issue is occurring.
  2. In the menu bar, select More Tools > Developer Tools.

  3. Navigate to the following two tabs and perform these tasks:
    1. On the Console tab in Developer Tools, press the Clear Console button.

    2. On the Network tab in Developer Tools, tick Disable cache and Preserve log, then clear the network log.




Capture the information:

  1. Look for a round record button in the upper left corner of the Network tab, and make sure it is red. If it is grey, click it once to start recording.
  2. Important : Please now refresh the page to start capturing the traffic between the browser and the server.

    To do this, right-click on the refresh icon and select Empty Cache and hard reload.

  3. Perform the actions that trigger the issue. Ensure that the Developer tools window remains open throughout this step.
  4. Once the issue is reproduced, please save the diagnostic information for us to review. In Developer Tool, please do the following;
    1. In the Network tab, export the HAR file. 

    2. In the Console tab of Developer Tools, right-click within the body of the console. Select Save as to export the console log as a .LOG file.
  5. (optional) Please zip the files to reduce size.
  6. After exporting both the HAR and Console Log files, attach them to your support ticket for further analysis.

Firefox

Setup:

  1. Open Mozilla Firefox and navigate to the page where the issue is occurring.

  2. From the Firefox menu bar select Web Developer -> Network.



  3. Navigate to the following two tabs and perform these tasks:
    a. In the Console tab in the Web Development Tool, press the TrashBin button.



    b. In the Network tab in the Web Development Tool tick Disable Cache and Persist Logs, and again press the TrashBin Button.


Capture the information:

  1. Refresh the page to start capturing the traffic between the browser and the server.

    Please capture a full page load, so we can see the requests made prior to the problem we're analysing.

  2. Complete the steps that demonstrate your issue.

  3. Once complete please save the logs for us to review.
    1. In the Web Development Tool, please;

      Right Click
      in the console tab and select Export Visible Messgaes To → File.




    2. Right Click in the Network tab and select Save all as HAR file.





  4. (optional) Please zip the files to reduce size.

  5. Upload your HAR and Console Log file's to your ticket so that our Support team can analyze it.

See Also

  • KBA 3458719 - Secure HAR sharing - HAR Sanitizer

Keywords

HAR, log, har file, web console logs , KBA , BPI-SIG-CA-SEC , Workspace Security for SAP Signavio Transformation Suite , How To

Product

SAP Signavio Process Manager all versions ; Signavio Process Manager all versions

Attachments

Chrome_clear_console.png
Chrome_clear_network.png
chrome_console_saveas.png
chrome_har_saveas.png
image2020-3-27_16-57-29.png
image2020-6-22_13-25-7.png
image2020-6-22_13-27-38.png
image2020-6-22_13-46-39.png
image2020-6-22_14-16-46.png
image2020-6-22_14-18-18.png
image2020-6-22_14-4-13.png
image2020-6-22_14-8-24.png
image2021-11-12_11-9-23.png
Pasted image.png
Pasted image.png