On occasion, the ContactMonkey team may ask you to send them a HAR file or console log. Learn about the importance of HAR files and how to save them using Chrome, Firefox, and Edge developer tools.
HAR (HTTP Archive) files are a record of a browser's interaction with a website. They contain details of every request and response made by your browser. They are essential tools for troubleshooting website performance issues. They can help developers and support teams pinpoint the root cause of problems.
Some examples of why you might be asked for HAR files are:
- You’re having issues loading images within the email editor
- You’re having Issues with saving changes within the email editor
- You’re having Issues loading ContactMonkey pages or images on Contactmonkey dashboard pages
Why Are HAR Files Important?
HAR files contain information about every request made by the browser, including the time taken to load each element, the size of each file, and any errors encountered.
They provide information that is essential for troubleshooting website performance issues, and they can help developers and support teams identify the root cause of problems.
HAR files can be used to:
- Identify slow-loading pages or resources
- Diagnose network errors or server-side issues
- Analyze the performance of third-party services or plugins
- Troubleshoot JavaScript errors
Getting Started
Before following the steps below for your respective browser, please ensure you are recording your screen as you save the HAR files. The screen recording must include the date and time your device is showing, as that allows us to match timestamps. If needed, you can leave a clock app open on your screen. To record your screen, you can use your device’s built-in screen recorder or an app like Loom or Vidyard - whatever works before for you!
Important notes:
- Make sure you open dev tools and immediately check the Preserve Logs box. Otherwise, if you do things like Save & Exit, it won't record the correct things.
- If the dev tools is getting in the way (laptop screen too small etc), you can always pop it out into a separate window by clicking 3 vertical dots and clicking the icon. Then you'll be able to maximize it to see the network tab more easily.
- Dev Tools needs to be open in the tab that you are using. If you change tabs, you need to open Dev Tools again. As a best practice, stay on the same tab.
How To Save HAR Files In Chrome
Saving a HAR file in Chrome is a straightforward process. Here are the steps to follow:
- Make sure you are recording your screen including the date and time, as mentioned in Getting Started
- Open Chrome and navigate the ContactMonkey page for which you want to capture a HAR file.
- Open the Chrome developer tools by right-clicking and selecting Inspect or pressing F12 or Ctrl + Shift + I.
- Click the Network tab.
- Ensure the 'Preserve log' checkbox is checked.
- Run through the steps to replicate the issue you are experiencing
- Right-click anywhere in the Network tab and select 'Save all as HAR with content' or click the download (downwards arrow) icon.
- If the file is large, you may need to compress it into a ZIP file before sending through Email.
How To Save HAR Files In Firefox
In Firefox, to save HAR files follow these steps:
- Make sure you are recording your screen including the date and time, as mentioned in Getting Started
- Open Firefox and navigate to the ContactMonkey page you want to capture a HAR file for.
- Open the Firefox developer tools by right-clicking and selecting Inspect or pressing F12 or Ctrl + Shift + I.
- Click the Network tab.
- Ensure the 'Persist Logs' checkbox is checked
- Refresh the page.
- Run through the steps to replicate the issue you are troubleshooting
- Right-click anywhere in the Network tab and select 'Save All As HAR.'
How to Save HAR Files in Edge
For Edge, the steps for saving HAR files are:
- Make sure you are recording your screen including the date and time, as mentioned in Getting Started
- Open Edge and navigate to the website you want to capture a HAR file for.
- Open the Edge developer tools by right-clicking and selecting Inspect or pressing F12 or Ctrl + Shift + I.
- Click the Network tab.
- Ensure the 'Preserve log' checkbox is checked.
- Refresh the page.
- Run through the steps to replicate the issue you are troubleshooting
- Right-click anywhere in the Network tab and select 'Save all as HAR'.
How To Save Console Logs
Console logs are also valuable tools for diagnosing website issues. They provide a record of all the JavaScript errors encountered by the browser, as well as any other messages logged by the website or browser.
If you are asked by ContactMonkey to send your console logs, here's how to save console logs in Chrome:
- Make sure you are recording your screen including the date and time, as mentioned in Getting Started
- Open Chrome and navigate to the ContactMonkey page you want to capture console logs for.
- Open the Chrome developer tools by right-clicking and selecting Inspect or pressing F12 or Ctrl + Shift + I.
- Click the Console tab.
- Reproduce the issue you're experiencing.
- Right-click anywhere in the Console tab and select Save as...'
Console logs and HAR files make it much quicker and easier for the ContactMonkey support team to locate and resolve any issues you are having, and we appreciate your patience in retrieving these files!
Feeling lost? 😖
Please don’t hesitate to reach out to our Support team at any time if you have questions.