Guide to Reproducing and Logging JavaScript Issues: Persistent Console & HAR Capture (Edge, Chrome, Firefox)

HCL Connections heavily relies on HTML and JavaScript. When troubleshooting issues, administrators or support teams may struggle to reproduce problems. Providing console logs and HAR (HTTP Archive) files directly from your browser session can offer crucial insights, helping to diagnose and resolve issues more effectively.

Getting to the Developer Tools and enable persistent logs is a bit different in Edge, Chrome and Firefox. So let’s start going through the process and see the steps for your browser.

Opening Developer Tools

#

• Open Microsoft Edge, Chrome or Firefox
• Navigate to the page where the issue occurs.
• Open Developer Tools by:
  • Right-clicking anywhere on the page and selecting “Inspect”.

Chrome and Edge	Firefox

• Pressing F12 (or Ctrl+Shift+I / Cmd+Option+I on macOS).

Enabling Persistent Logs

#

It is crucial to enable persistent logging to ensure that all relevant information is captured, especially across page navigations or refreshes.

Microsoft Edge and Google Chrome

#

For console.log:

#

• In the Developer Tools window, go to the “Console” tab.
• Click the “Settings” gear icon (⚙️) in the Console toolbar or right-click within the console area.
• Check the option “Preserve log”.

For Network Requests (HAR):

#

• In the Developer Tools window, go to the “Network” tab.
• Ensure the “Preserve log” checkbox is checked. This is typically located near the top of the Network panel, next to the “Record network log” button.

Check Disable cache too, this prevents from caching issues.

Mozilla Firefox

#

For console.log:

#

• In the Developer Tools window, go to the “Console” tab.
• Click the “Persist Logs” checkbox. This is usually located in the toolbar of the Console panel.

Show timestamps helps when you compare network requests with console entries. So it’s also good to enable it.

For Network Requests (HAR):

#

• In the Developer Tools window, go to the “Network” tab.
• Click the “Persist Logs” checkbox. This is usually located in the toolbar of the Network panel.

Reproducing Issues and Capturing Logs

#

After enabling persistent logging, follow these steps to reproduce the issue and capture the necessary logs.

Microsoft Edge and Google Chrome

#

• Clear existing logs:
  • In the “Console” tab, click the “Clear console” button (🚫).
  • In the “Network” tab, click the “Clear” button (🚫).
• Perform the steps that reliably trigger the issue in your application.
• Once the issue has been reproduced, and all relevant actions have been taken:
  • To save console.log:
    • Right-click anywhere within the “Console” panel.
    • Select “Save as…” to save the console output to a text file.
  • To save HAR file:
    • Click the arrow icon

    * Save the `.har` file to your local machine.

Mozilla Firefox

#

• Clear existing logs:
  • In the “Console” tab, click the “Clear console” button (trash can icon).
  • In the “Network” tab, click the “Clear” button (trash can icon).
• Perform the steps that reliably trigger the issue in your application.
• Once the issue has been reproduced, and all relevant actions have been taken:
  • To save console.log:
    • Right-click anywhere within the “Console” panel.
    • Select “Save all messages to file” to save the console output to a text file.
  • To save HAR file:
    • In the “Network” tab, right-click anywhere within the list of network requests.
    • Select “Save All As HAR”, or click the gear icon and select Save all as HAR
    • Save the .har file to your local machine.

Conclusion

#

For optimal troubleshooting, it is highly recommended to confirm the issue, and collect both HAR files and console logs, in at least two different browsers (e.g., Edge, Chrome, or Firefox). This cross-browser verification can help distinguish between application-specific problems and browser-specific behaviors, providing more robust data for diagnosis.