Box Status
Print

How to Generate Network Captures for Troubleshooting

End User , Troubleshooting , webapp_swarm , webapp_swarm_kb , Article , Product Utilization , Box Web Application , Established

When working with Box Product Support, we may sometimes ask you to collect a network capture, which can be used to record the HTTP data traffic of the affected application. There are several types of network captures available. Some are built into the browser and can debug web-based apps, and some are third-party debuggers that can capture traffic on any platform including web, desktop, and mobile.

 

Box Product Support uses this information to isolate any issues or unexpected behavior. We may ask you to collect a HAR capture, a Fiddler capture, or a Charles capture.

 

In general, the process goes:

  1. Start the capture
  2. Reproduce the behavior
  3. End and save the capture
  4. Send the file to Box Product Support for review

HAR

A HAR capture (HTTP Archives) records the requests and responses that your browser makes with the Box Web Application.

 

Chrome/Edge

  1. In Chrome, go to the page within Box where you are experiencing trouble.
  2. At the top-right of your browser window, click the Chrome menu (⋮).
  3. Select More Tools > Developer Tools. The Developer Tools window opens as a docked panel at the side or bottom of Chrome.
  4. Click the Network tab.
  5. Select Preserve log and Disable cache.
  6. You will see a red circle "●" at the top-left of the Network tab. This means the capture has started. If the circle is black, click the black circle to Record network log in your browser.
  7. Refresh the page and reproduce the problem while the capture is running.
  8. After you successfully reproduce the issue, right-click on any row of the activity pane, and select Save all as HAR with content.
    Alternatively, click the down-arrow icon to Export HAR.
  9. Click Save button.
  10. Select the Console tab.
  11. Right-click anywhere in the console and select Save as....
  12. Name the log file Chrome-console.log. 
  13. Click Save button.
  14. Send both files as shared links in a reply to your case.

Firefox

  1. In Firefox, go to the page within Box where you are experiencing trouble.
  2. Click the Firefox menu (Three horizontal parallel lines) at the top-right of your browser window.
  3. Select More Tools > Web Developer Tools .
  4. The Developer Tools window opens as a docked panel at the side or bottom of Firefox.
  5. Click the Network tab.
  6. Click the gear icon at the top right of the Network tab and enable Persist Logs.
  7. Refresh the page and reproduce the problem while the capture is running.
  8. After you successfully reproduce the issue, right-click any row of the activity pane and select Save All as HAR.
    Alternatively, click the gear icon at the top-right of the Network tab and select Save All as HAR.
  9. Note the location Click Save button.
  10. Select the Console tab.
  11. Right-click any row and select Select all.
  12. Paste the content in a text file and name it console-log.txt.
  13. Click Save button.
  14. Send both files as shared links in a reply to your case.

Safari

  1. In Safari, first ensure your Develop menu is available navigating to the menu bar and selecting Safari > Settings > Advanced: "Show features for web developers".  to menu in menu bar
  2. Go to the page within Box where you are experiencing trouble.
  3. In the menu bar at the top, click Develop and select Show Web Inspector.
  4. Click the Console tab and select Preserve Log from the icon to the right of "Logs".
  5. Select the Network tab and then select Preserve Log from the "Other filter options" circle icon.
  6. Refresh the page and reproduce the problem while the capture is running.
  7. After you successfully reproduce the issue, right-click any row of the activity pane and select "Export HAR" or select "Export" from the top-right corner of the network panel. mceclip1.png
  8. Click Save button.
  9. Note: If you are reporting an issue with downloading then please try reproducing in Chrome or Firefox which captures the download traffic in the HAR file. Safari does not. 
  10. Click the Console tab.
  11. Right-click any row and select Select all.
    1. If the select all option is not available, then please click-drag over the console rows to select them.
    2. Next press Command-C or right-click and pick "Copy Selected" or "Save Selected" to copy the rows.
  12. Paste the content in a text file and name it console.txt and save it.
  13. Send both files as shared links in a reply to your case.

 

Edge (Legacy)

  1. In Edge, go to the page within Box where you are experiencing trouble.
  2. At the top-right of your browser window, click the Edge menu (⋮).
  3. Select Developer Tools.
  4. Click the Network tab.
  5. Clear the Clear entries on navigate option, which is selected by default. The icon looks like blue arrow with a red X.
  6. The green play button (Start Profiling Session) should be selected by default. This means the capture function is running.
  7. Refresh the page and reproduce the problem while the capture is running.
  8. Once you have reproduced the issue, click the Export as HAR icon. The icon looks like a floppy disk.
  9. Click Save button.
  10. Click the Console tab.
  11. Right-click any row and select Copy all.
  12. Paste the content in a text file and name it console-log.txt.
  13. Click Save button.
  14. Send both files as shared links in a reply to your case.

Fiddler

Windows

  1. Download and install Fiddler from https://www.telerik.com/download/fiddler
  2. Start Fiddler4 when the installation is completed. You do not need to keep it running normally. Go to Start and search for "Fiddler4".
  3. Inside Fiddler, go to Tools > Options > HTTPS (tab).
  4. On the HTTPS tab, check the Capture HTTPS CONNECTs check box.
  5. Check the box for Decrypt HTTPS traffic and verify the drop-down option says "...from all processes".
  6. While in the same HTTPS tab, click on the Actions button, then Reset All Certificates.
  7. Click OK and accept all the prompts about deleting and trusting Fiddler's root certificate.
  8. Once the certificates have been trusted, click OK to close the Options.
  9. Back in the main Fiddler window, click the X icon at the top and then select Remove all to clear sessions
  10. Reproduce the issue while the capture is running.
  11. After reproducing the issue, go back to Fiddler and go to File > Save > All Sessions. Save the file as .saz to your desktop.
  12. Send the .saz file as a shared link in a reply to your case.

Mac

Note: Fiddler has not been optimized for Mac. If using macOS, please refer to the Charles for Mac section below.

 

Charles Proxy

Windows

  1. Download and install Charles from: https://www.charlesproxy.com/download/
  2. Open Charles by running the application from your Start menu.
  3. If the Windows Firewall asks you to add an exception rule, click on "Allow access".
  4. Go to Proxy and click Windows Proxy if it's not already checked.
  5. Go to Proxy > SSL Proxying Settings and make sure "Enable SSL Proxying" is checked. (More information at: https://www.charlesproxy.com/documentation/proxying/ssl-proxying/ )
  6. Click the "Add" button for each domain listed below and click "OK" after adding all four.

    *.box.com

    *.box.net

    *.boxcdn.net

    *.boxcloud.com

  7. Go to Help > SSL Proxying > Install Charles Root Certificate. A window will appear warning you that the CA Root certificate is not trusted. Click the "Install Certificate" button to launch the Certificate Import Wizard. The certificate must be imported into the "Trusted Root Certification Authorities" certificate store, so override the automatic certificate store selection. Complete the wizard and your Charles Root Certificate is now installed.
  8. You should see a red circle "●" at the top. This means the capture has started. If the circle is black, click the black circle to start recording activity in your browser.
  9. Reproduce the issue while the capture is running.
  10. After reproducing the issue, go back to Charles, click the red circle "●" to stop recording, and then click File > Save Session As... and save the .chls file to your desktop.
  11. Send the .chls file as a shared link in a reply to your case.

Mac

  1. Download and install Charles from: https://www.charlesproxy.com/download/
  2. Unzip the download file by double-clicking it, and then copy the Charles application into your Applications folder.
  3. Open Charles by running the application from your Applications folder.
  4. You’ll be asked a question about your macOS Proxy Settings. To auto-configure your proxy settings, you need to grant permission to Charles by entering your password.
  5. Go to Proxy and click macOS Proxy if it's not already checked.
  6. Go to Proxy > SSL Proxying Settings and make sure "Enable SSL Proxying" is checked. (More information at: https://www.charlesproxy.com/documentation/proxying/ssl-proxying/ )
    Click the "Add" button for each domain listed below and click "OK" after adding all four.

    *.box.com

    *.box.net

    *.boxcdn.net

    *.boxcloud.com

  7. Go to Help > SSL Proxying > Install Charles Root Certificate. Mac Keychain Access will open, and prompt you about the certificate. Click the "Always Trust" button. You will then be prompted for your Administrator password to update the system trust settings. You may need to quit and reopen your browser to see the change.
  8. You should see a red circle at the top. This means the capture has started. If the circle is black, click the black circle to start recording activity in your browser.
  9. Reproduce the issue while the capture is running.
  10. After reproducing the issue, go back to Charles, click the red circle to stop recording, and then click File > Save Session As... and save the .chls file to your desktop.
  11. Send the .chls file as a shared link in a reply to your case.
webapp_swarm_kb

Related articles