---
title: "Troubleshooting front-end performance problems."
canonical: "https://support.appfire.com/space/DLP/297833920/Troubleshooting%20front-end%20performance%20problems."
format: markdown
---
> ℹ️ Please execute these steps using the **incognito tab of your browser** in case you are experiencing problems with loading pages in BigPicture plugins.
> ✅ ## **Data has to be recorded during problem reproduction! **
> ✅
> ✅ 1. Start recording data.
> ✅ 2. Reproduce the problem (when data is being recorded).
> ✅ 3. Stop recording data and download the file.
> ℹ️ ### **See a video example of how to extract a Network analysis file**
> ℹ️
> ℹ️ > Macro (excerpt-include)
> Macro (toc)
## Step-by-step guide for Chrome browser.
> ℹ️ Please bear in mind that **improper handling of browser console data** such as HAR files **could potentially cause a security threat** if such data is intercepted by a third-party agent. The data contained in such a report could be used to log in to your Jira/BigPicture system and impersonate you and/or view your sensitive data (not only the data captured in such a file). It is essential to **make sure only authorized parties handle such files.**
### **Network analysis** - HAR file
Step-by-step
1. Open the **Dev Console** tool (F12 on a PC or ⌘+⌥+i on a Mac).
2. If the option to generate HAR files with sensitive data is available, enable it.
1. Click **Settings**.
2. Go to **Preferences** >** Network** and enable the **Allow to generate HAR with sensitive data** option.
3. Go to the **Network** tab in the Dev Console.
4. Choose the **Fetch/XHR tab**.
5. Select **Preserve Log**.
6. Ensure that Google Chrome is recording. A **red button** indicates that a recording is already in progress. If the button is grey, click **Record network log**.
7. Clear any existing logs by clicking **Clear network log**.
8. Go to the page where the issue occurred and **reproduce the issue**.
9. Click **Export HAR** to export the file as HAR.
10. If any items are marked in red, click on them one by one and take screenshots (enlarge the Dev tool window to make the data visible). Share the files in the support ticket.
11. When contacting our Support, remember to:
1. Share the HAR file in the support ticket.
2. Share the screenshots in the support ticket.
### **Taking Performance profile**
Step-by-step
1. Open the Dev Console tool (F12 on a PC or ⌘+⌥+i on a Mac).
2. Go to the Performance tab in the Dev Console.
3. Click the record button.
4. Reproduce the issue while the profile is being recorded.
5. Please keep the tab open in the foreground until the recording finishes!
6. Once the page loads (the problem is reproduced) click Stop.
7. Save profile.
8. Send us the file. It is a good idea to compress it before sending it.
### **Problems loading a blank page, a button that is not working, or unexpected behavior while using the plugin**
Step-by-step
1. Open the Dev Console tool (F12 on a PC or ⌘+⌥+i on a Mac).
2. Go to the Console tab in the Dev Console.
3. Right-click anywhere on the list, "Save as" and attach the screenshot to the support ticket.
4. if there are any items marked in red please expand (by clicking on the item) and take a screenshot (see above).
5. In the support ticket:
1. Share the file
2. Share the screenshots
## Step-by-step guide for Microsoft Edge browser.
### **Network analysis** - HAR file
Step-by-step
1. Open the Dev Console tool (F12 on a PC or ⌥+⌘+i on a Mac).
2. If the option to generate HAR files with sensitive data is available, enable it.
1. Click **Customize and control DevTools** > **Settings**.
2. Go to **Preferences** >** Network** and enable the **Allow to generate HAR with sensitive data** option.
3. Go to the **Network** tab in the Dev Console.
4. Choose the **Fetch/XHR** tab.
5. Select **Preserve Log**.
6. Ensure that Microsoft Edge is recording. A **red button** indicates that a recording is already in progress. If the button is grey, click **Record network log**.
7. Clear any existing logs by clicking **Clear network log**.
8. Go to the page where the issue occurred and **reproduce the issue**.
9. Click **Export HAR** to export the file as HAR.
10. If any items are marked in red, click on them one by one and take screenshots (enlarge the Dev tool window to make the data visible). Share the files in the support ticket.
11. When contacting our Support, remember to:
1. Share the HAR file in the support ticket.
2. Share the screenshots in the support ticket.
### **Taking Performance profile**
Step-by-step
1. Open the Dev Console tool (F12 on a PC or ⌥+⌘+i on a Mac).
2. Go to the Performance tab in the Dev Console.
3. Click the record button.
4. Reproduce the issue while the profile is being recorded.
5. Please keep the tab open in the foreground until the recording finishes!.
6. Once the page loads(the problem is reproduced) click Stop.
7. Save profile.
8. Send us the file. It is a good idea to compress it before sending it.
### **Problems loading a blank page, a button that is not working, or unexpected behavior while using the plugin**
Step-by-step
1. Open Dev Console tool F12 on a PC or ⌥+⌘+i on a Mac.
2. Go to the Console tab in the Dev Console.
3. Right-click anywhere on the list, "Save as" and attach the screenshot to the support ticket.
4. if there are any items marked in red please expand and take a screenshot (see above).
5. In the support ticket
1. Share the file
2. Share the screenshots
## Step-by-step guide for Firefox browser
### **Network analysis** - HAR file
Step-by-step
1. Open the Dev Console tool (F12 on a PC or ⌥+⌘+K on a Mac).
2. Go to the **Network** > **XHR **tab.
3. Go to the page where the issue occurred and **reproduce the issue**. The page automatically starts recording as you navigate.
4. When ready, click **Pause/Resume recording network log**.
5. Right-click anywhere in the **File** column and select **Save All as HAR** or click **Network settings** > **Save All as HAR**.
6. If any items are marked in red, click on them one by one and take screenshots (enlarge the Dev tool window to make the data visible). Share the files in the support ticket.
7. When contacting our Support, remember to:
1. Share the HAR file in the support ticket.
2. Share the screenshots in the support ticket.
### **Taking Performance profile**
Step-by-step
1. Open the Dev Console tool (Shift + CTRL + J on a PC or ⌥+⌘+K on a Mac).
2. Go to the Performance tab in the Dev Console.
3. Click the record button.
4. Reproduce the issue while the profile is being recorded.
5. Please keep the tab open in the foreground until the recording finishes!
6. Once the page loads(the problem is reproduced) click Stop.
7. Save profile.
8. Send us the file. It is a good idea to compress it before sending it.
### **Problems loading a blank page, a button that is not working, or unexpected behavior while using the plugin**
Step-by-step
1. Open the Dev Console tool (F12 on a PC or ⌥+⌘+K on a Mac).
2. Go to the Console tab in the Dev Console.
3. Right-click anywhere on the list, and export all to a file.
4. if there are any items marked in red please expand and take a screenshot.
5. In the support ticket:
1. Share the file
2. Share the screenshots
## Step-by-step guide for the Safari browser
### **Network analysis** - HAR file
Step-by-step
1. If the Develop menu doesn't appear in the menu bar, go to **Safari Settings**.
2. Click **Advanced**.
3. Select **Show features for web developers**.
4. Open a new Safari window.
5. From the **Develop** menu, select **Show Web Inspector**.
6. Click the **Network** tab.
7. Go to the page where the issue occurred and **reproduce the issue**.
8. When ready, click **Export**.
9. Save the file.
10. If any items are marked in red, click on them one by one and take screenshots (enlarge the Dev tool window to make the data visible). Share the files in the support ticket.
11. When contacting our Support, remember to:
1. Share the HAR file in the support ticket.
2. Share the screenshots in the support ticket.
### **Taking Performance profile**
Step-bypstep
1. Enable the Developer Menu - in the Browser (Safari Menu> Preferences) and select Advanced Tab.
> Macro (inline-media-image)
Open Dev Console tool ⌥ + ⌘ + C.
2. Go to the Timelines tab in the Dev Console.
> Macro (inline-media-image)
3. Click the record button.
4. Reproduce the issue while the profile is being recorded.
5. Please keep the tab open in the foreground until the recording finishes!
6. Once the page loads (the problem is reproduced) click Stop and Save profile.
7. Send us the file. It is a good idea to compress it before sending
### **Problems loading a blank page, a button that is not working, or unexpected behavior while using the plugin**
Step-by-step
1. Open Dev Console (⌥ + ⌘ + C).
2. Go to the Console tab in the Dev Console.
3. Attach the screenshot to the support ticket.
> ℹ️ In case you are experiencing more complicated issues or having problems following the instructions please contact our helpful support using the customer [portal](https://appfire.atlassian.net/servicedesk/customer/portal/11)[.](mailto:support@bigpicture.on) Our team will be more than happy to assist.
> Macro (excerpt)
>
> 