Generating a performance profile for troubleshooting

<p>When you investigate performance issues, customer service may need to request additional information about the performance profiles your browser generates while an issue occurs. A customer service team member may request that you record a performance profile while the issue occurs, download the file, and provide it to them for further analysis.</p><div class="p"><div class="note">
<span class="notetitle">Note:</span> A performance profile contains the performance data on how the page runs when the user interacts with it. The network URL and screenshots of the page are captured during the recording.</div></div><p>Below are instructions to generate a performance file using different browsers:</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"><h3 id="h_01FT54EMQWMMQXBEQTH0RRF7KT">Generate a performance file for Chrome</h3></div><div class="panel"><ol>
<li data-list-item-id="e52060c38cc3452bb2243ae1b278a51c5">Open DevTools by pressing COMMAND + OPTION + I on macOS or CTRL + SHIFT + I on Windows or Linux, or right-click the page and select <strong>Inspect</strong>
</li>
<li data-list-item-id="e8df6462d75af63c472d7099dba1c2c88">In DevTools, switch to the Performance tab. Make sure you select the <strong>Screenshots</strong> checkbox.</li>
<li data-list-item-id="ee539c7e947902cb8187091234e1d8780">Move the cursor around the page and wait a few seconds to ensure the page is interactive</li>
<li data-list-item-id="ed5761a195ff0980861817b32654a5d84">In the Performance tab, click the <strong>Record</strong> button <strong><img src="https://support.zendesk.com/hc/article_attachments/7856507997850" alt="Screenshot_2022-01-21_at_1.33.40_PM.png" width="169" height="30"></strong>
</li>
<li data-list-item-id="eecedaa415d286887db87e1d70cfd5df2">
<p>After the recording starts, reproduce the issue you experience. For example, if you experience a typing delay, type a paragraph in the composer. If you experience an issue with the <strong>Accept</strong> button, click the <strong>Accept</strong> button to create a new ticket tab and send messages back and forth with the visitor.</p>
<div class="p"><div class="note">
<span class="notetitle">Note:</span> Keep the recorded time under 60 seconds if possible.</div></div>
<p><img src="https://support.zendesk.com/hc/article_attachments/7856507998234" alt="Screenshot_2022-01-21_at_1.42.34_PM.png"></p>
</li>
<li data-list-item-id="e22424f2e4df744b4b14d40cd4202df09">After you reproduce the issue, click the <strong>Stop</strong> button in the status message or the <strong>Stop Recording</strong> button <img src="https://support.zendesk.com/hc/article_attachments/7856507998874" alt="Screenshot_2022-01-21_at_1.35.04_PM.png" width="166" height="29"> on the Performance tab</li>
<li data-list-item-id="ea437467a48c1606640bd88bcee6246ea">Wait for the profile to load and process</li>
<li data-list-item-id="e0bc38d2639d899ea53ae9db7aeb056eb">After the profile loads, click the <strong>Save Profile</strong> button <strong><img src="https://support.zendesk.com/hc/article_attachments/7856552935834" alt="Screenshot_2022-01-21_at_1.44.27_PM.png" width="170" height="30"></strong> then select <strong>Save trace</strong> to download the profile</li>
<li data-list-item-id="eb0e4c9e45598a0a5ca5248a527f27377">Send the downloaded file to the customer service team member</li>
</ol></div><div class="accordion"><h3 id="h_01FT54KXPV2WK7HA7R8H8GRCF3">Generate a performance file for Firefox</h3></div><div class="panel"><ol>
<li data-list-item-id="e52a29d091a3a848214cae9914fbb22fc">Open DevTools by pressing COMMAND + OPTION + I on macOS or CTRL + SHIFT + I on Windows or Linux, or right-click the page and select <strong>Inspect</strong>
</li>
<li data-list-item-id="e7b90cc882a95e3970252dbac50568dc1">In DevTools, switch to the <strong>Performance</strong> tab and click <strong>Start recording performance</strong>.</li>
<li data-list-item-id="e980be46f51750ef9d100559dc01212d1">Move the cursor around the page and wait a few seconds to ensure the page is interactive</li>
<li data-list-item-id="ecb03b68398dd271fc993efcab460201e">In the Performance tab, click the <strong>Record</strong> button <strong><img src="https://support.zendesk.com/hc/article_attachments/7856507999514" alt="Screenshot_2022-01-21_at_2.46.34_PM.png"></strong>
</li>
<li data-list-item-id="ec36671a33e76de868d6d7780dc9ec49a">
<p>After the recording starts, reproduce the issue you experience. For example, if you experience a typing delay, type a paragraph in the composer. If you experience an issue with the <strong>Accept</strong> button, click the <strong>Accept</strong> button to create a new ticket tab and send messages back and forth with the visitor.</p>
<div class="p"><div class="note">
<span class="notetitle">Note:</span> Watch the buffer percentage and stop the recording before it reaches 100%.</div></div>
<p><img src="https://support.zendesk.com/hc/article_attachments/7856552940570" alt="Screenshot_2022-01-26_at_8.46.55_AM.png"></p>
</li>
<li data-list-item-id="e6d40e6283a1b22ec8355eb36a1dd8e7d">After you reproduce the issue, stop the recording and wait for the profile to load. Save or export the resulting profile, then send the downloaded file to the customer service team member.</li>
<li data-list-item-id="ed5653f5797eb245cf188816cec693875">Wait for the profile to load and process</li>
<li data-list-item-id="ec70bf3a525c3148eae55fc82b006acf1">After the profile loads, click <strong>Save</strong> to download the profile<br><strong><img src="https://support.zendesk.com/hc/article_attachments/7856552936730" alt="Screenshot_2022-01-21_at_2.52.47_PM.png" width="173" height="67"></strong>
</li>
<li data-list-item-id="e3d098499cbf4864e9486696a6ba4d0d1">Send the downloaded file to the customer service team member</li>
</ol></div><div class="accordion"><h3 id="h_01FT554AD87A909JE3KMMRBTA8">Generate a performance file for Safari</h3></div><div class="panel"><ol>
<li data-list-item-id="eae3677dc0375872e7bbb38c9f6964119">Choose <strong>Safari</strong> &gt; <strong>Settings</strong>, then click <strong>Advanced</strong>.</li>
<li data-list-item-id="e29eed036e28c3be68f9a2bac2d5b4557">Select <strong>Show features for web developers</strong>.</li>
<li data-list-item-id="e8b7c0a9d751d8197d13e640b49f49b03">Click <strong>Develop</strong> &gt; <strong>Show Web Inspector</strong>
</li>
<li data-list-item-id="ed42c7318d734dd70ae71ad726e007edd">In the Web Inspector, switch to the Timelines tab</li>
<li data-list-item-id="e4981388599b0fced68d6c6347f7dffd1">Move the cursor around the page and wait a few seconds to ensure the page is interactive</li>
<li data-list-item-id="ea995b96617cb496bc1e7d586fa4bac30">In the Timelines tab, click the <strong>Record</strong> button <strong><img src="https://support.zendesk.com/hc/article_attachments/7856508003610" alt="Screenshot_2022-01-21_at_3.15.07_PM.png" width="141" height="30"></strong>
</li>
<li data-list-item-id="e5926f1a7f280c67c10e554f238520478">
<p>After the recording starts, reproduce the issue you experience. For example, if you experience a typing delay, type a paragraph in the composer. If you experience an issue with the <strong>Accept</strong> button, click the <strong>Accept</strong> button to create a new ticket tab and send messages back and forth with the visitor.</p>
<div class="p"><div class="note">
<span class="notetitle">Note:</span> Keep the recorded time under 60 seconds if possible.</div></div>
<p><img src="https://support.zendesk.com/hc/article_attachments/7856552944282" alt="Screenshot_2022-01-26_at_9.00.31_AM.png"></p>
</li>
<li data-list-item-id="e0697b9aa1740b7bb1c0f9342365cbf4d">After you reproduce the issue, click the <strong>Stop Recording</strong> button or the <strong>Stop Recording</strong> button <strong><img src="https://support.zendesk.com/hc/article_attachments/7856508004122" alt="Screenshot_2022-01-21_at_3.16.38_PM.png" width="139" height="30"></strong> in the Timelines tab</li>
<li data-list-item-id="e40b3a8e31fb9ba00321afb7f85216d24">Wait for the profile to load and process</li>
<li data-list-item-id="e6896bec707682476757138c22ac247ac">After the profile loads, click the <strong>Export</strong> button <strong><img src="https://support.zendesk.com/hc/article_attachments/7856552939290" alt="Screenshot_2022-01-21_at_3.18.27_PM.png" width="183" height="30"></strong> in the Timelines tab to download the profile</li>
<li data-list-item-id="ec44e946e649efe828fd28c8a36dc6560">Send the downloaded file to the customer service team member</li>
</ol></div><div class="accordion"><h3 id="h_01FT554FYM62XN8GZMX9G3R10A">Generate a performance file for Edge</h3></div><div class="panel"><ol>
<li data-list-item-id="eac487339dd1d6d14cf2b4046e6996ad4">Open DevTools by pressing COMMAND + OPTION + I on macOS or CTRL + SHIFT + I on Windows or Linux, or right-click the page and select <strong>Inspect</strong>
</li>
<li data-list-item-id="ed250fa27f219484010d7e07e0e7bd2e4">In DevTools, switch to the Performance tab. Make sure you select the <strong>Screenshots</strong> checkbox.</li>
<li data-list-item-id="ee1faf2112d87f689159e50b5f108108a">Move the cursor around the page and wait a few seconds to ensure the page is interactive</li>
<li data-list-item-id="e28f203a1402270a3b8852e2758f6f67f">In the Performance tab, click the <strong>Record</strong> button <strong><img src="https://support.zendesk.com/hc/article_attachments/7856508005146" alt="Screenshot_2022-01-21_at_3.00.59_PM.png" width="97" height="30"></strong>
</li>
<li data-list-item-id="ee1fdb58098d167523f10aa5950db68c6">
<p>After the recording starts, reproduce the issue you experience. For example, if you experience a typing delay, type a paragraph in the composer. If you experience an issue with the <strong>Accept</strong> button, click the <strong>Accept</strong> button to create a new ticket tab and send messages back and forth with the visitor.</p>
<div class="p"><div class="note">
<span class="notetitle">Note:</span> Keep the recorded time under 60 seconds if possible.</div></div>
<p><img src="https://support.zendesk.com/hc/article_attachments/7856508011418" alt="Screenshot_2022-01-26_at_8.51.03_AM.png"></p>
</li>
<li data-list-item-id="e88b0d02a2220ed3dbf97e4c4002918f8">After you reproduce the issue, click the <strong>Stop</strong> button on the status message or the <strong>Stop Recording</strong> button <strong><img src="https://support.zendesk.com/hc/article_attachments/7856552939802" alt="Screenshot_2022-01-21_at_3.03.14_PM.png" width="104" height="30"></strong> on the Performance tab</li>
<li data-list-item-id="e483c4ddf2a32f4c2274b564ca3897a6a">Wait for the profile to load and process</li>
<li data-list-item-id="e39dc3397ca81639690df335e229604ae">After the profile loads, click the <strong>Save Profile</strong> button <strong><img src="https://support.zendesk.com/hc/article_attachments/7856508006426" alt="Screenshot_2022-01-21_at_3.05.22_PM.png" width="156" height="29"></strong> on the Performance tab to download the profile</li>
<li data-list-item-id="e2c5622ade8ac643eb1d2ffa4da1fa860">Send the downloaded file to the customer service team member</li>
</ol></div>