Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

Info

Please execute these steps using the incognito tab of your browser in case you are experiencing problems with loading pages in BigPicture plugins.

Tip

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.

Paneltip
bgColor#FFFFFF

See a video example of how to extract a Network analysis file

Insert excerpt
Troubleshooting front-end performance problems
Troubleshooting front-end performance problems
nameVID - network analysis
nopaneltrue

Table of Contents

Step-by-step guide for Chrome browser.

Info

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.

...

Taking Performance profile

  1. Open 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. 

    Image Removed
  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.

    Image Removed
  7. Save profile.

    Image Removed
  8. Send us the file. It is a good idea to compress it before sending.

...

Network analysis 

...

Network analysis - HAR file

Expand
titleStep-by-step
  1. Open the Dev Console tool (F12 on a PC

...

  1. or ⌘++i  on a Mac).

  2. Go to the Network tab in the Dev Console.

  3. Choose the XHR tab.

  4. Refresh a page and reproduce the issue.

  5. Sort by time (click it twice) to show the longest loading times first.

  6. Right-click anywhere on the list to save the file.

...

  1. Image Added
  2. If there are any items marked in red please click on the items one by one and take screenshots (please enlarge the Dev tool window to make the data visible). Share the files in the support ticket.

...

  1. Image AddedImage Added
    1. Share the HAR file in the support ticket.

    2. Share the screenshots in the support ticket

...

    1. .

Taking Performance profile

Expand
titleStep-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. 

    Image Added
  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.

    Image Added
  7. Save profile.

    Image Added
  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

Expand
titleStep-by-step
  1. Open the Dev Console tool (F12 on a PC

...

  1. or ⌘++i on a Mac).

  2. Go to the Console tab in the Dev Console.

...

  1. Image Added
  2. Right-click anywhere on the list, "Save as" and attach the screenshot to the support ticket.

  3. if there are any items marked in red please expand (by clicking on the item) and take a screenshot (see above).

  4. In the support ticket:

    1. Share the file

    2. Share the screenshots

Step-by-step guide for Microsoft Edge browser.

Taking Performance profile

Open Dev Console tool (F12 on a PC or ++i  on a Mac).

Info
In case of EDGE or IE it is necessary to refresh the page after opening the console.

...

Go to the Performance tab in the Dev Console.

...

Click the record button. 

...

Reproduce the issue while the profile is being recorded.

...

Please keep the tab open in the foreground until the recording finishes!.

...

Once the page loads(the problem is reproduced) click Stop.

...

Save profile.

...

Send us the file. It is a good idea to compress it before sending.

Network analysis 

...

Network analysis - HAR file

Expand
titleStep-by-step
  1. Open the Dev Console tool (F12 on a PC

...

  1. or ⌥++i on a Mac).

  2. Go to the Network tab in the Dev Console.

  3. Choose the XHR tab.

  4. Refresh the page and reproduce the issue.

  5. Sort by time (click it twice) to show the longest loading times first.

  6. Right-click anywhere to save the file.

...

  1. Image Added
  2. If there are any items marked in red please click on the items one by one and take screenshots (please enlarge the Dev tool window to make the data visible). Share the files in the support ticket.

...

  1. Image Added
    1. Share the HAR file in the support ticket.

    2. Share the screenshots in the support ticket.

Taking Performance profile

Expand
titleStep-by-step
  1. Open the Dev Console tool (F12 on a PC or ⌥+⌘+i  on a Mac).

    Info
    In case of EDGE or IE it is necessary to refresh the page after opening the console.
  2. Go to the Performance tab in the Dev Console.

  3. Click the record button. 

    Image Added
  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.

    Image Added
  7. Save profile.

    Image Added
  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

Expand
titleStep-by-step
  1. Open Dev Console tool F12 on a PC

...

  1. or ⌥++i on a Mac.

  2. Go to the Console tab in the Dev Console.

...

  1. Image Added
  2. Right-click anywhere on the list, "Save as" and attach the screenshot to the support ticket.

  3. if there are any items marked in red please expand and take a screenshot (see above).

  4. In the support ticket

    1. Share the file

    2. Share the screenshots

Step-by-step guide for Firefox browser

Taking Performance profile

  1. Open 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. 

    Image Removed
  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.

    Image Removed
  7. Save profile.

    Image Removed
  8. Send us the file. It is a good idea to compress it before sending.

Network analysis 

...

Network analysis - HAR file

Expand
titleStep-by-step
  1. Open the Dev Console tool (F12 on a PC

...

  1. or ⌥+⌘+

...

  1. K on a Mac).

  2. Go to the Network tab in the Dev Console.

  3. Refresh the page and reproduce the issue.

  4. Choose the XHR tab.

  5. Right-click anywhere to save the file.

...

  1. Image Added
  2. If there are any items marked in red please click on the items one by one and take screenshots (please enlarge the Dev tool window to make the data visible). 

...

  1. Image Added

...

  1. Image Added

    1. Share the HAR file in the support ticket.

    2. Share the screenshots in the support ticket.

Taking Performance profile

Expand
titleStep-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. 

    Image Added
  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.

    Image Added
  7. Save profile.

    Image Added
  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

Expand
titleStep-by-step
  1. Open the Dev Console tool (F12 on a PC

...

  1. or ⌥+⌘+

...

  1. K on a Mac).

  2. Go to the Console tab in the Dev Console.

...

  1. Image Added
  2. Right-click anywhere on the list, and export all to a file.

  3. if there are any items marked in red please expand and take a screenshot.

  4. In the support ticket:

    1. Share the file 

    2. Share the screenshots 

Step-by-step guide for the Safari browser

Taking Performance profile

  1. Enable Developer Menu - in the Browser (Safari Menu> Preferences) and select Advanced Tab. 
    Image Removed

    Open Dev Console tool ⌥ + ⌘ + C.

  2. Go to the Timelines tab in the Dev Console.
    Image Removed

  3. Click the record button. 

    Image Removed
  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.

    Image Removed
  7. Send us the file. It is a good idea to compress it before sending

Network analysis 

Network analysis - HAR file

Expand
titleStep-by-step
  1. Open Dev Console (⌥ + ⌘ + C).

  2. Go to Network tab in the Dev Console.

  3. Choose the XHR tab.

  4. Refresh the page and reproduce the issue.

  5. Sort by time to show the longest loading times first.

  6. Right-click on an item on the left to save the file.

...

  1. Image Added
  2. Export to HAR file.

...

  1. Image Added
  2. If there are any items marked in red and take a screenshot - please enlarge the Dev tool window to make the data visible. 

    1. Click on an item to expand.

    2. Go to the Headers tab.

    3. Take a screenshot.

    Repeat for all relevant items.

...

  1. Image AddedImage Added
    1. Share the HAR files in the support ticket.

    2. Share the screenshots in the Support ticket.

Taking Performance profile

Expand
titleStep-bypstep
  1. Enable the Developer Menu - in the Browser (Safari Menu> Preferences) and select Advanced Tab. 
    Image Added

    Open Dev Console tool ⌥ + ⌘ + C.

  2. Go to the Timelines tab in the Dev Console.
    Image Added

  3. Click the record button. 

    Image Added
  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.

    Image Added
  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

Expand
titleStep-by-step
  1. Open Dev Console (⌥ + ⌘ + C).

  2. Go to the Console tab in the Dev Console.

...

  1. Image Added
  2. Attach the screenshot to the support ticket.

Info

In case you are experiencing more complicated issues or having problems following the instructions please contact our helpful support using the customer portal. Our team will be more than welcome happy to assist.

Excerpt
hiddentrue
nameVID - network analysis
Network Analysis step-by-step recording.mp4