Capture a browser trace for troubleshooting - Azure portal (2023)

  • Article

If you're troubleshooting an issue with the Azure portal, and you need to contact Microsoft support, you may want to first capture some additional information. For example, it can be helpful to share a browser trace, a step recording, and console output. This information can provide important details about what exactly is happening in the portal when your issue occurs.

Important

Microsoft support uses these traces for troubleshooting purposes only. Please be mindful who you share your traces with, as they may contain sensitive information about your environment.

You can capture this information any supported browser: Microsoft Edge, Google Chrome, Safari (on Mac), or Firefox. Steps for each browser are shown below.

Microsoft Edge

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

Note

The screenshots below show the DevTools in Focus Mode with a vertical Activity Bar. Depending on your settings, your configuration may look different. For more information, see Simplify DevTools using Focus Mode.

  1. Sign in to the Azure portal. It's important to sign in before you start the trace so that the trace doesn't contain sensitive information related to your account.

  2. Start recording the steps you take in the portal, using Steps Recorder.

  3. In the portal, navigate to the step prior to where the issue occurs.

  4. Press F12 to launch Microsoft Edge DevTools. You can also launch the tools from the toolbar menu under More tools > Developer tools.

  5. 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.

    1. Select the Console tab, select Console settings, then select Preserve Log.

      Capture a browser trace for troubleshooting - Azure portal (1)

    2. 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.

      Capture a browser trace for troubleshooting - Azure portal (2)

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

    Capture a browser trace for troubleshooting - Azure portal (3)

  7. Select Record network log, then reproduce the issue in the portal.

    Capture a browser trace for troubleshooting - Azure portal (4)

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

    Capture a browser trace for troubleshooting - Azure portal (5)

  8. After you have reproduced the unexpected portal behavior, select Stop recording network log, then select Export HAR and save the file.

    Capture a browser trace for troubleshooting - Azure portal (6)

  9. Stop the Steps Recorder and save the recording.

  10. 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.

    Capture a browser trace for troubleshooting - Azure portal (7)

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

  12. Share the compressed file with Microsoft support by using the File upload option in your support request.

Google Chrome

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

  1. Sign in to the Azure portal. It's important to sign in before you start the trace so that the trace doesn't contain sensitive information related to your account.

  2. Start recording the steps you take in the portal, using Steps Recorder.

  3. In the portal, navigate to the step prior to where the issue occurs.

  4. Press F12 to launch the developer tools. You can also launch the tools from the toolbar menu under More tools > Developer tools.

  5. 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:

    1. Select the Console tab, select Console settings, then select Preserve Log.

      Capture a browser trace for troubleshooting - Azure portal (8)

    2. Select the Network tab, then select Preserve log.

      Capture a browser trace for troubleshooting - Azure portal (9)

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

    Capture a browser trace for troubleshooting - Azure portal (10)

  7. Select Record network log, then reproduce the issue in the portal.

    Capture a browser trace for troubleshooting - Azure portal (11)

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

    Capture a browser trace for troubleshooting - Azure portal (12)

  8. After you have reproduced the unexpected portal behavior, select Stop recording network log, then select Export HAR and save the file.

    Capture a browser trace for troubleshooting - Azure portal (13)

  9. Stop the Steps Recorder and save the recording.

  10. 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.

    Capture a browser trace for troubleshooting - Azure portal (14)

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

  12. Share the compressed file with Microsoft support by using the File upload option in your support request.

Safari

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

  1. Enable the developer tools in Safari:

    1. Select Safari, then select Preferences.

    2. Select the Advanced tab, then select Show Develop menu in menu bar.

      Capture a browser trace for troubleshooting - Azure portal (15)

  2. Sign in to the Azure portal. It's important to sign in before you start the trace so that the trace doesn't contain sensitive information related to your account.

  3. Start recording the steps you take in the portal. For more information, see How to record the screen on your Mac.

  4. In the portal, navigate to the step prior to where the issue occurs.

  5. Select Develop, then select Show Web Inspector.

    Capture a browser trace for troubleshooting - Azure portal (16)

  6. 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:

    1. Select the Console tab, then select Preserve Log.

      Capture a browser trace for troubleshooting - Azure portal (17)

    2. Select the Network tab, then select Preserve Log.

      Capture a browser trace for troubleshooting - Azure portal (18)

  7. On the Network tab, select Clear Network Items.

    Capture a browser trace for troubleshooting - Azure portal (19)

  8. Reproduce the issue in the portal. You'll see session output similar to the following image.

    Capture a browser trace for troubleshooting - Azure portal (20)

  9. After you have reproduced the unexpected portal behavior, select Export and save the file.

    Capture a browser trace for troubleshooting - Azure portal (21)

  10. Stop the screen recorder, and save the recording.

  11. 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.

    Capture a browser trace for troubleshooting - Azure portal (22)

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

  13. Share the compressed file with Microsoft support by using the File upload option in your support request.

Firefox

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

  1. Sign in to the Azure portal. It's important to sign in before you start the trace so that the trace doesn't contain sensitive information related to your account.

  2. Start recording the steps you take in the portal. Use Steps Recorder on Windows, or see How to record the screen on your Mac.

  3. In the portal, navigate to the step prior to where the issue occurs.

  4. Press F12 to launch the developer tools. You can also launch the tools from the toolbar menu under More tools > Web developer tools.

  5. 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:

    1. Select the Console tab, select the Settings icon, and then select Persist Logs.

      Capture a browser trace for troubleshooting - Azure portal (23)

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

      Capture a browser trace for troubleshooting - Azure portal (24)

  6. On the Network tab, select Clear.

    Capture a browser trace for troubleshooting - Azure portal (25)

  7. Reproduce the issue in the portal. You'll see session output similar to the following image.

    Capture a browser trace for troubleshooting - Azure portal (26)

  8. After you have reproduced the unexpected portal behavior, select Save All As HAR.

    Capture a browser trace for troubleshooting - Azure portal (27)

  9. Stop the Steps Recorder on Windows or the screen recording on Mac, and save the recording.

  10. 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.

    Capture a browser trace for troubleshooting - Azure portal (28)

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

  12. Share the compressed file with Microsoft support by using the File upload option in your support request.

Next steps

  • Read more about the Azure portal.
  • Learn how to open a support request in the Azure portal.
  • Learn more about file upload requirements for support requests.
Top Articles
Latest Posts
Article information

Author: Amb. Frankie Simonis

Last Updated: 14/06/2023

Views: 6279

Rating: 4.6 / 5 (56 voted)

Reviews: 87% of readers found this page helpful

Author information

Name: Amb. Frankie Simonis

Birthday: 1998-02-19

Address: 64841 Delmar Isle, North Wiley, OR 74073

Phone: +17844167847676

Job: Forward IT Agent

Hobby: LARPing, Kitesurfing, Sewing, Digital arts, Sand art, Gardening, Dance

Introduction: My name is Amb. Frankie Simonis, I am a hilarious, enchanting, energetic, cooperative, innocent, cute, joyous person who loves writing and wants to share my knowledge and understanding with you.