Workflow: Generating a HAR file for troubleshooting

<p><img class="wysiwyg-image-resized" style="width: 500px;" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/plan_availability_prod_all.png" alt="All products"></p><p>In this tutorial, you're going to learn how to generate network requests and error logs that Customer Support requests to troubleshoot issues. A team member can ask you to record a HTTP Archive (HAR) file or a log of network requests when an issue occurs. To help troubleshoot issues, include browser console logs in addition to the HAR file.</p><p>Similarly, you can also collect Windows log files in addition to HAR files.</p><div class="p"><div class="note">Note: A HAR file includes data such as the content of cookies and the pages you download when you record. Anyone with access to the HAR file can view the data you submit during the record process, which can include personal or sensitive data. Secure HAR files accordingly. Cloudflare released a <a href="https://blog.cloudflare.com/introducing-har-sanitizer-secure-har-sharing/" target="_blank" rel="noopener noreferrer">HAR sanitizer</a> to strip sensitive information.</div></div><p>This workflow includes these steps:</p><p><input id="tabs-orientation-mode" name="isHorizontal" type="hidden"></p><h2 id="h_01HRFHNXRB4YH4BMMGN6VEAYWB">Instructions to generate HAR files</h2><p>Select the tabs to read the instructions to generate a HAR file and console logs in the browser you use.</p><div style="margin-bottom: 20px; text-align: right;">
<button id="master-toggle" class="btn fw-semibold text-dark" data-action="expand" style="background-color: #DEF991; border: none; outline: none; border-radius: 7px; padding: 10px 20px; font-size: 15px; transition: background-color 0.2s ease;" onmouseover="this.style.backgroundColor='#cbef6d'" onmouseout="this.style.backgroundColor='#DEF991'">
Expand all tabs
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.getElementById('master-toggle');

toggleBtn.addEventListener('click', function () {
const action = this.getAttribute('data-action');
const headers = document.querySelectorAll('.accordion');

headers.forEach(header => {
const isActive = header.classList.contains('active');
const panel = header.nextElementSibling; // Grabs the corresponding .panel container

if (action === 'expand' && !isActive) {
// Open it by simulating a standard click
header.click();
} else if (action === 'collapse' && isActive) {
// Close it by simulating a standard click
header.click();
}
});

// Flip button text and states
if (action === 'expand') {
this.setAttribute('data-action', 'collapse');
this.textContent = 'Collapse all tabs';
} else {
this.setAttribute('data-action', 'expand');
this.textContent = 'Expand all tabs';
}
});
});
</script><div class="accordion"><p>Generate a HAR file in Chrome</p></div><div class="panel">
<p>To generate a HAR file in Chrome:</p>
<ol>
<li data-list-item-id="ec40dbe82a1aa6a4832ff3d6999eef848">Open Chrome and go to the page where the issue occurs</li>
<li data-list-item-id="ecce45e18988fc83df31a0211c8fe0193">Look for the <strong>⋮</strong> button and select <strong>More Tools &gt; Developer Tools</strong>
</li>
<li data-list-item-id="eecaa2b67796024423b62e1e6894023cc">Select the <strong>Network</strong> tab from the panel. Keep the menu open when you reproduce the issue. Optional: If Customer Support requests a HAR file with WebSockets, select the <strong>Socket</strong> option in the <strong>Network</strong> tab. Reload the browser to view the traffic over the WebSocket. The <strong>Socket</strong> option does not capture all logs when you download the HAR file, but only filters the display and downloads WebSocket logs. <img class="wysiwyg-image-resized" style="width: 500px;" src="https://support.zendesk.com/hc/article_attachments/10047389174938" alt="The Socket option in the Network tab">
</li>
<li data-list-item-id="eacd884a27fbc3338853f35813d041e46">Look for a round record button in the upper-left corner of the tab and ensure it is red. If it is grey, click the button to start the record process.</li>
<li data-list-item-id="e8c44824b6d382df659516d83d7958385">Check the <strong>Preserve log</strong> box</li>
<li data-list-item-id="eb62e2628cd9b0cc0ad181902ad7e9220">Click the grey crossed circle button to clear existing logs from the network tab</li>
<li data-list-item-id="e416f47454fa2815430fa964f9456dcf2">Reproduce the issue when the network records requests</li>
<li data-list-item-id="e6e8432cb4ccba8596ff8922fd0157736">
<p>Click the download button, <strong>Export HAR</strong>, to download and save the file to your computer and select <strong>Save as HAR with Content</strong>.</p>
<p><img class="wysiwyg-image-resized" style="width: 500px;" src="https://support.zendesk.com/hc/article_attachments/7856386049818" alt="Download button from the network tab in Chrome"></p>
</li>
<li data-list-item-id="e0262d7d2199d18d06dd549a62d57e0ab">Upload the HAR file to the ticket for further investigation. See <a href="#h_01HRFHT4KGBKBS0NM5A3M0KZSR">Instructions to send HAR files</a>.</li>
</ol>
<p>The instructions are the same for a Mac or Windows computer. The animation shows the steps to retrieve a HAR file in Chrome.</p>
<p><img class="wysiwyg-image-resized" style="width: 500px;" src="https://support.zendesk.com/hc/article_attachments/7856386049562" alt="Animation that shows how to generate a HAR file in Chrome"></p>
<p>For issues with file generation, capture <a href="https://support.google.com/admanager/answer/10358597?hl=en" target="_blank" rel="noopener noreferrer">web session traffic</a>.</p>
<p>If you generate an empty HAR file with zero bytes, <a href="https://support.zendesk.com/hc/en-us/articles/8300453325338" target="_blank" rel="noopener noreferrer">turn on HAR exports with sensitive data</a>.</p>
<p>To retrieve console logs in Chrome:</p>
<ol>
<li data-list-item-id="e845a7be87fe5a95d900fa3d131f8e844">Open the <strong>Main Menu</strong> for Chrome</li>
<li data-list-item-id="e81d5db6161aa5a9dbaea79130a3a4654">Go to <strong>More Tools &gt; Developer Tools</strong>
</li>
<li data-list-item-id="eeba061b0363322bf4e34c60c9b47d7d3">Open the <strong>Console tab</strong> and screenshot any errors</li>
</ol>
</div><div class="accordion"><p>Generate a HAR file in Firefox</p></div><div class="panel">
<p>To generate a HAR file in Firefox:</p>
<ol>
<li data-list-item-id="e856dff96c5fa25fd1fd9d48a59b60480">Open Firefox and go to the page where the issue occurs</li>
<li data-list-item-id="e474e5d0c633db474588bb7b2976265d5">Open the <a href="https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/#opening-the-network-monitor" target="_blank" rel="noopener noreferrer">Network Monitor</a>
</li>
<li data-list-item-id="e6fb574e392700a78a560321665745768">Reproduce the issue when the network records requests</li>
<li data-list-item-id="e4216c96606a873733000c04d666a2ac9">
<p>Right-click anywhere under the <strong>File</strong> column and click <strong>Save All As HAR</strong></p>
<p><img class="wysiwyg-image-resized" style="width: 500px;" src="https://support.zendesk.com/hc/article_attachments/7856386050330" alt="Save All As HAR in Firefox"></p>
</li>
<li data-list-item-id="e48174737f79f247f6fb77de82cc729a1">Save the HAR file in a convenient location</li>
<li data-list-item-id="e7dad8328101eabea1367c2022748ff16">Upload the HAR file to the ticket for further investigation. See <a href="#h_01HRFHT4KGBKBS0NM5A3M0KZSR">Instructions to send HAR files</a>.</li>
</ol>
<p>The instructions are the same for a Mac or Windows computer. Use the <a href="https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html#opening-the-network-monitor" target="_blank" rel="noopener noreferrer">Network Monitor</a> for issues with file generation in Firefox.</p>
<p>To retrieve console logs in Firefox:</p>
<ol>
<li data-list-item-id="e417302823d647d1f962008ad8589c259">In the <strong>Tools</strong> menu, select <strong>Web Developer</strong>
</li>
<li data-list-item-id="e405dd4545fd095de13e32503998e1e26">Console logs appear in a separate window</li>
<li data-list-item-id="ef73766e3c688f5375c60a6d0162a4185">Screenshot any errors</li>
</ol>
</div><div class="accordion"><p>Generate a HAR file in Safari</p></div><div class="panel">
<p>To generate a HAR file in Safari:</p>
<ol>
<li data-list-item-id="efdf4dcbf54fa51a7cace80ad79e8e05e">Open Safari and go to the <strong>Develop</strong> menu. If you do not see the <strong>Develop</strong> menu, see <a href="https://support.apple.com/en-ie/guide/safari/sfri20948/mac" target="_blank" rel="noopener noreferrer">Use the developer tools in the Develop menu in Safari on Mac</a>.</li>
<li data-list-item-id="ed1b6990d8721bdd269524ceebd852f7d">Select <strong>Show Web Inspector</strong>
</li>
<li data-list-item-id="e2b07f06082690261382bc6fd5253a6b7">Click the <strong>Network</strong> tab. Keep it open when you reproduce the issue.</li>
<li data-list-item-id="e1bcf6f065fef9b971ba81b84449c18be">Reproduce the issue when the network records requests</li>
<li data-list-item-id="e429c9730361b6ce128e78ada54b91b24">Click the <strong>Export</strong> icon and save the HAR file<img class="wysiwyg-image-resized" style="width: 500px;" src="https://support.zendesk.com/hc/article_attachments/7856386050714" alt="Safari export logs">
</li>
<li data-list-item-id="ed4863b84b531bf537dcdbfbc4eb1f5bc">Upload the HAR file to the ticket for further investigation. See <a href="#h_01HRFHT4KGBKBS0NM5A3M0KZSR">Instructions to send HAR files</a>.</li>
</ol>
<p>For issues with file generation in Safari, use the <a href="https://developer.apple.com/safari/tools/#current" target="_blank" rel="noopener noreferrer">Web Inspector</a>.</p>
<p>To retrieve console logs in Safari:</p>
<ol>
<li data-list-item-id="e20b29b15b962534421590ad7f39e68ba">Open <strong>Preferences</strong> and go to the <strong>Advanced</strong> tab</li>
<li data-list-item-id="e832ffefada181f256c32bece2aeee81a">Select <strong>Show Developer menu</strong> in the menu bar</li>
<li data-list-item-id="efe73a7bb2c6c56f5087cd58e531d6ad4">Close Preferences</li>
<li data-list-item-id="e49113ae4bfcc9dd2f73c6d75dd116c8f">In the menu bar, select <strong>Developer</strong> &gt; <strong>Show error console</strong>
</li>
<li data-list-item-id="e3d117d27d08af35271f6f85bc553a704">Screenshot any errors</li>
</ol>
</div><div class="accordion"><p>Generate HAR files across multiple browser tabs in a Chromium-based browser</p></div><div class="panel">
<p>To set up a Chromium-based browser to generate HAR files across multiple browser tabs:</p>
<ol>
<li data-list-item-id="ecba7279138ae71ce2ceb83027f6c5b05">With a browser open, open the Developer Tools drawer. Alternatively, open the browser Settings menu and then select <strong>More tools &gt; Developer Tools.</strong>
</li>
<li data-list-item-id="e42523aa5ffd9903bf5f9eb1d57a3b600">Open the <strong>Settings</strong> for the <strong>Developer tool</strong>s drawer</li>
<li data-list-item-id="e26d41e83c54199945c16e60ac4bf26c2">Scroll to the <strong>Global</strong> settings area and select the option <strong>Auto-open DevTools for popups</strong>
</li>
<li data-list-item-id="e26baa8195ec310490b09d9b4bf031677">Close the <strong>Settings</strong> menu</li>
<li data-list-item-id="e82dc9ef998fbe375177046c9196b8a06">Navigate to a page where you want to record a HAR file and ensure the Developer tools drawer is open</li>
</ol>
<p>As long as the Developer tools drawer remains open, any pages or tabs you open from links on the page also open with the Developer tools drawer open and start a HAR file record process.</p>
</div><h2 id="h_01HRFHT4KGBKBS0NM5A3M0KZSR">Instructions to send HAR files</h2><p>Before you send a HAR file to Zendesk:</p><ul>
<li data-list-item-id="eb00c78909e1b6e94f7e37674dd41d178">Rename and zip or compress HAR files</li>
<li data-list-item-id="ea727d74c26ace037248dfd9681262a59">Uncompressed HAR files are often over Zendesk attachment limits</li>
<li data-list-item-id="eafa25a3d8bfe7a4061f85f18954e0851">By default, HAR files use the page URL as the file name</li>
<li data-list-item-id="e267426177cadc1506be0a42033b7bfba">Files with .com extensions look suspicious to spam and phishing filters. Give the HAR file a descriptive name that does not include the full URL.</li>
</ul><h2 id="h_01HRFHTJTX5P02JBT80WDFGZ2S">Additional resources</h2><p>If you experience issues with your account, use <a href="https://support.zendesk.com/hc/en-us/categories/6191861453978-Help-and-FAQs" target="_blank" rel="noopener noreferrer">troubleshooting guides</a> to diagnose the issue. If you are not a Zendesk customer yet, <a href="https://www.zendesk.com/register/#step-1" target="_blank" rel="noopener noreferrer">register</a> for a Zendesk trial.</p>