How to capture a browser trace for Web App troubleshooting

Have more questions? Submit a request

Capturing details for investigations

The Fing Web App provides access to the network data available in your Fing account. Should you encounter an issue, such as data mismatch between the Web App and your Mobile App, or blank and empty pages, or crashes reported in the Browser console log, you may report the issue to the Fing Support Team that might escalate it to the Engineering Team.

 

When submitting tickets, it is mandatory to provide a HAR file that most of the major browsers allow  to record for investigations. Please follow the instructions for the browser you experience the issue with. It's advisable to include also a screenshot or screen recording of the issue, to provide a proper context and to help replicating the issue.

 

Microsoft Edge

The following steps show how to use the developer tools in Microsoft Edge. For more information, see Microsoft Edge DevTools.

  • Right mouse click on the browser page and select Inspect. You can also launch the tools from the toolbar menu under More tools > Developer tools.
  • By default, the browser keeps trace information only for the page that's currently loaded. Set the following options so the browser keeps all trace information, even if your repro steps require going to more than one page.
  • Select the Console tab, select Console settings, then select Preserve Log.

Screenshot 2024-06-18 at 11.52.05.png

  • Select the Network tab. If that tab isn't visible, click the More tools (+) button and select Network. Then, from the Network tab, select Preserve log.

Screenshot 2024-06-18 at 11.54.34.png

  • On the Network tab, select Stop recording network log and Clear.

Screenshot 2024-06-18 at 11.55.40.png

  • Select Record network log, then reproduce the issue in the Fing Web App.

Screenshot 2024-06-18 at 11.56.42.png

You'll see session output similar to the following image.

Screenshot 2024-06-18 at 11.58.10.png

  • After you have reproduced the issue in the Web App , select Stop recording network log, then select Export HAR and save the file.

Screenshot 2024-06-18 at 11.59.31.png

  • Back in the browser developer tools pane, select the Console tab. Right-click one of the messages, then select Save as..., and save the console output to a text file.

Screenshot 2024-06-18 at 12.03.37.png

  • Package the browser trace HAR file, console output, and screen recording files in a compressed format such as .zip.
  • Share the compressed file in your request

 

Google Chrome

The following steps show how to use the developer tools in Google Chrome. For more information, see ChromeDevTools.

  • Right mouse click on the browser page and select Inspect. You can also launch the tools from the toolbar menu under More tools > Developer tools.
  • By default, the browser keeps trace information only for the page that's currently loaded. Set the following options so the browser keeps all trace information, even if your repro steps require going to more than one page.
  • Select the Console tab, select Console settings, then select Preserve Log.

Screenshot 2024-06-18 at 12.10.12.png

  • Select the Network tab, then select Preserve log.

Screenshot 2024-06-18 at 12.11.06.png

  • On the Network tab, select Stop recording network log and Clear.

Screenshot 2024-06-18 at 12.12.16.png

  • Select Record network log, then reproduce the issue in the Fing Web App.

Screenshot 2024-06-18 at 12.13.14.png

You'll see session output similar to the following image.

 

Screenshot 2024-06-18 at 12.13.56.png

  • After you have reproduced the issue on Fing Web App , select Stop recording network log, then select Export HAR and save the file.

Screenshot 2024-06-18 at 12.15.28.png

  • Back in the browser developer tools pane, select the Console tab. Right-click one of the messages, then select Save as..., and save the console output to a text file.

Screenshot 2024-06-18 at 12.16.15.png

  • Package the browser trace HAR file, console output, and screen recording files in a compressed format such as .zip.

  • Share the compressed file in your request

 

Safari

The following steps show how to use the developer tools in Apple Safari on Mac. For more information, see SafariDevTools.

  • Select Safari, then select Preferences
  • Select the Advanced tab, then select Show Develop menu in menu bar.

Screenshot 2024-06-18 at 12.22.24.png

  • Select Develop, then select Show Web Inspector.

Screenshot 2024-06-18 at 12.24.12.png

  • By default, the browser keeps trace information only for the page that's currently loaded. Set the following options so the browser keeps all trace information, even if your repro steps require going to more than one page.
  • Select the Console tab, then select Preserve Log.

Screenshot 2024-06-18 at 12.25.16.png

  • Select the Network tab, then select Preserve Log.

Screenshot 2024-06-18 at 12.26.03.png

  • On the Network tab, select Clear Network Items.

Screenshot 2024-06-18 at 12.26.41.png

  • Reproduce the issue in the Fing Web App You'll see session output similar to the following image.

    Screenshot 2024-06-18 at 12.28.03.png

  • After you have reproduced the issue on Fing Web App , select Export and save the file.

Screenshot 2024-06-18 at 12.28.47.png

  • Back in the browser developer tools pane, select the Console tab, and expand the window. Place your cursor at the start of the console output then drag and select the entire contents of the output. Use Command-C to copy the output and save it to a text file.

Screenshot 2024-06-18 at 12.29.47.png

  • Package the browser trace HAR file, console output, and screen recording files in a compressed format such as .zip.

  • Share the compressed file in your request

 

Firefox

The following steps show how to use the developer tools in Firefox. For more information, see FireFox DevTools.

  • Right mouse click on the browser page and select Inspect. You can also launch the tools from the toolbar menu under More tools > Developer tools.
  • By default, the browser keeps trace information only for the page that's currently loaded. Set the following options so the browser keeps all trace information, even if your repro steps require going to more than one page.
  • Select the Console tab, select the Settings icon, and then select Persist Logs.

Screenshot 2024-06-18 at 12.33.18.png

  • Select the Network tab, select the Settings icon, and then select Persist Logs.

Screenshot 2024-06-18 at 12.33.57.png

  • On the Network tab, select Clear.

Screenshot 2024-06-18 at 12.34.36.png

  • Reproduce the issue in the Fing Web App. You'll see session output similar to the following image

Screenshot 2024-06-18 at 12.35.42.png

  • After you have reproduced the issue on Fing Web App, select Save All As HAR.

Screenshot 2024-06-18 at 12.38.48.png

  • Back in the browser developer tools pane, select the Console tab. Right-click one of the messages, then select Save All Messages to File, and save the console output to a text file.

Screenshot 2024-06-18 at 12.39.30.png

  • Package the browser trace HAR file, console output, and screen recording files in a compressed format such as .zip.

  • Share the compressed file in your request

How to submit a request to investigate the issue

  • Click the Submit Request link
  • Attach the .zip saved locally and a video/screenshot of the issue  in the Attachment section by clicking on the Add file button
  • Providing as much detail as possible about the issue (conditions, steps to reproduce) and the network affected
  • In the subject enter 'Web App crash/error'
  • Click on Submit

Articles in this section

Was this article helpful?
0 out of 0 found this helpful
Share

Comments

0 comments

Please sign in to leave a comment.