Skip to content

Files

Latest commit

JnHsJnHs
fix link
Aug 16, 2021
010e2f7 · Aug 16, 2021

History

History
206 lines (107 loc) · 12.3 KB

capture-browser-trace.md

File metadata and controls

206 lines (107 loc) · 12.3 KB
title description ms.date ms.topic
Capture a browser trace for troubleshooting
Capture network information from a browser trace to help troubleshoot issues with the Azure portal.
08/16/2021
troubleshooting

Capture a browser trace for troubleshooting

If you're troubleshooting an issue with the Azure portal, and you need to contact Microsoft support, we recommend you first capture a browser trace and some additional information. The information you collect can provide important details about the portal at the time the issue occurs. Follow the steps in this article for the developer tools in the browser you use: Google Chrome or Microsoft Edge (Chromium), Microsoft Edge (EdgeHTML), Apple Safari, or Firefox.

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.

Google Chrome and Microsoft Edge (Chromium)

Google Chrome and Microsoft Edge (Chromium) are both based on the Chromium open source project. The following steps show how to use the developer tools, which are very similar in the two browsers. For more information, see Chrome DevTools and Microsoft Edge (Chromium) 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 sign-in.

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

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

  4. Press F12 or select Screenshot that shows the browser settings icon. > 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 requires going to more than one page:

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

      Screenshot that highlights the Preserve log option on the Network tab.

    2. Select the Console tab, select Console settings, then select Preserve Log. Select Console settings again to close the settings pane.

      Screenshot that highlights the Preserve log option on the Console tab.

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

    Screenshot of "Stop recording network log" and "Clear"

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

    Screenshot that shows how to record the network log.

    You will see session output similar to the following image.

    Screenshot that shows the session output.

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

    Screenshot that shows how to Export HAR on the Network tab.

  9. Stop 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.

    Screenshot that highlights the Console tab and the Save as... menu

  11. Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support.

Microsoft Edge (EdgeHTML)

The following steps show how to use the developer tools in Microsoft Edge (EdgeHTML). For more information, see Microsoft Edge (EdgeHTML) 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 sign-in.

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

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

  4. Press F12 or select Screenshot of the browser settings icon. > 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 requires going to more than one page:

    1. Select the Network tab, then clear the option Clear entries on navigate.

      Screenshot of "Clear entries on navigate"

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

      Screenshot of "Preserve Log"

  6. Select the Network tab, then select Stop profiling session and Clear session.

    Screenshot of "Stop profiling session" and "Clear session"

  7. Select Start profiling session, then reproduce the issue in the portal.

    Screenshot of "Start profiling session"

    You will see session output similar to the following image.

    Screenshot that shows the output for the profiling session.

  8. After you have reproduced the unexpected portal behavior, select Stop profiling session, then select Export as HAR and save the file.

    Screenshot of "Export as HAR"

  9. Stop Steps Recorder, and save the recording.

  10. 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. Right-click, then select Copy, and save the console output to a text file.

    Screenshot that highlights the Copy menu option.

  11. Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support.

Apple Safari

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

  1. Enable the developer tools in Apple Safari:

    1. Select Safari, then select Preferences.

      Screenshot of Safari preferences

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

      Screenshot of Safari advanced preferences

  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 sign-in.

  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 just prior to where the issue occurs.

  5. Select Develop, then select Show Web Inspector.

    Screenshot of "Show Web Inspector"

  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 requires going to more than one page:

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

      Screenshot that shows the Preserve Log option.

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

      Screenshot that shows the Preserve Log on the Console tab.

  7. Select the Network tab, then select Clear Network Items.

    Screenshot of "Clear Network Items"

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

    Screenshot that shows the output after you've reproduced the issue.

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

    Screenshot of "Export"

  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.

    Screenshot that highlights you can view and copy the output.

  12. Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support.

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 sign-in.

  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 just prior to where the issue occurs.

  4. Press F12 or select Screenshot of browser settings icon > Web Developer > Toggle 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 requires going to more than one page:

    1. Select the Network tab, then select Persist Logs.

      Screenshot that highlights the Persist Logs option.

    2. Select the Console tab, select Console settings, then select Persist Logs.

      Screenshot of "Persist Logs"

  6. Select the Network tab, then select Clear.

    Screenshot of "Clear"

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

    Screenshot of browser trace results

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

    Screenshot of "Export HAR"

  9. Stop 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 Export Visible Messages To, and save the console output to a text file.

    Screenshot of console output

  11. Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support.

Next steps