|
| 1 | +--- |
| 2 | +title: Capture a browser trace for troubleshooting | Microsoft Docs |
| 3 | +description: Capture network information from a browser trace to help troubleshoot issues with the Azure portal. |
| 4 | +services: azure-portal |
| 5 | +keywords: |
| 6 | +author: mblythe |
| 7 | +ms.author: mblythe |
| 8 | +ms.date: 01/09/2020 |
| 9 | +ms.topic: troubleshooting |
| 10 | + |
| 11 | +ms.service: azure-portal |
| 12 | +manager: mtillman |
| 13 | +--- |
| 14 | + |
| 15 | +# Capture a browser trace for troubleshooting |
| 16 | + |
| 17 | +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), or Apple Safari. |
| 18 | + |
| 19 | +## Google Chrome and Microsoft Edge (Chromium) |
| 20 | + |
| 21 | +Google Chrome and Microsoft Edge (Chromium) are both based on the [Chromium open source project](https://www.chromium.org/Home). The following steps show how to use the developer tools, which are very similar in the two browsers. For more information, see [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools) and [Microsoft Edge (Chromium) Developer Tools](/microsoft-edge/devtools-guide-chromium). |
| 22 | + |
| 23 | +1. Sign in to the [Azure portal](https://portal.azure.com). 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. |
| 24 | + |
| 25 | +1. Start recording the steps you take in the portal, using [Steps Recorder](https://support.microsoft.com/help/22878/windows-10-record-steps). |
| 26 | + |
| 27 | +1. In the portal, navigate to the step just prior to where the issue occurs. |
| 28 | + |
| 29 | +1. Press F12 or select  > **More tools** > **Developer tools**. |
| 30 | + |
| 31 | +1. 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: |
| 32 | + |
| 33 | + 1. Select the **Network** tab, then select **Preserve log**. |
| 34 | + |
| 35 | +  |
| 36 | + |
| 37 | + 1. Select the **Console** tab, select **Console settings**, then select **Preserve Log**. Select **Console settings** again to close the settings pane. |
| 38 | + |
| 39 | +  |
| 40 | + |
| 41 | +1. Select the **Network** tab, then select **Stop recording network log** and **Clear**. |
| 42 | + |
| 43 | +  |
| 44 | + |
| 45 | +1. Select **Record network log**, then reproduce the issue in the portal. |
| 46 | + |
| 47 | +  |
| 48 | + |
| 49 | + You will see session output similar to the following image. |
| 50 | + |
| 51 | +  |
| 52 | + |
| 53 | +1. After you have reproduced the unexpected portal behavior, select **Stop recording network log**, then select **Export HAR** and save the file. |
| 54 | + |
| 55 | +  |
| 56 | + |
| 57 | +1. Stop Steps Recorder, and save the file. |
| 58 | + |
| 59 | +1. Back in the browser developer tools pane, select the **Console** tab. Right-click, then select **Save as...**, and save the console output to a text file. |
| 60 | + |
| 61 | +  |
| 62 | + |
| 63 | +1. Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support. |
| 64 | + |
| 65 | +## Microsoft Edge (EdgeHTML) |
| 66 | + |
| 67 | +The following steps show how to use the developer tools in Microsoft Edge (EdgeHTML). For more information, see [Microsoft Edge (EdgeHTML) Developer Tools](/microsoft-edge/devtools-guide). |
| 68 | + |
| 69 | +1. Sign in to the [Azure portal](https://portal.azure.com). 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. |
| 70 | + |
| 71 | +1. Start recording the steps you take in the portal, using [Steps Recorder](https://support.microsoft.com/help/22878/windows-10-record-steps). |
| 72 | + |
| 73 | +1. In the portal, navigate to the step just prior to where the issue occurs. |
| 74 | + |
| 75 | +1. Press F12 or select  > **More tools** > **Developer tools**. |
| 76 | + |
| 77 | +1. 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: |
| 78 | + |
| 79 | + 1. Select the **Network** tab, then clear the option **Clear entries on navigate**. |
| 80 | + |
| 81 | +  |
| 82 | + |
| 83 | + 1. Select the **Console** tab, then select **Preserve Log**. |
| 84 | + |
| 85 | +  |
| 86 | + |
| 87 | +1. Select the **Network** tab, then select **Stop profiling session** and **Clear session**. |
| 88 | + |
| 89 | +  |
| 90 | + |
| 91 | +1. Select **Start profiling session**, then reproduce the issue in the portal. |
| 92 | + |
| 93 | +  |
| 94 | + |
| 95 | + You will see session output similar to the following image. |
| 96 | + |
| 97 | +  |
| 98 | + |
| 99 | +1. After you have reproduced the unexpected portal behavior, select **Stop profiling session**, then select **Export as HAR** and save the file. |
| 100 | + |
| 101 | +  |
| 102 | + |
| 103 | +1. Stop Steps Recorder, and save the file. |
| 104 | + |
| 105 | +1. 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. |
| 106 | + |
| 107 | +  |
| 108 | + |
| 109 | +1. Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support. |
| 110 | + |
| 111 | +## Apple Safari |
| 112 | + |
| 113 | +The following steps show how to use the developer tools in Apple Safari. For more information, see [Safari Developer Tools overview](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac). |
| 114 | + |
| 115 | +1. Enable the developer tools in Apple Safari: |
| 116 | + |
| 117 | + 1. Select **Safari**, then select **Preferences**. |
| 118 | + |
| 119 | +  |
| 120 | + |
| 121 | + 1. Select the **Advanced** tab, then select **Show Develop menu in menu bar**. |
| 122 | + |
| 123 | +  |
| 124 | + |
| 125 | +1. Sign in to the [Azure portal](https://portal.azure.com). 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. |
| 126 | + |
| 127 | +1. Start recording the steps you take in the portal. For more information, see [How to record the screen on your Mac](https://support.apple.com/HT208721). |
| 128 | + |
| 129 | +1. In the portal, navigate to the step just prior to where the issue occurs. |
| 130 | + |
| 131 | +1. Select **Develop**, then select **Show Web Inspector**. |
| 132 | + |
| 133 | +  |
| 134 | + |
| 135 | +1. 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: |
| 136 | + |
| 137 | + 1. Select the **Network** tab, then select **Preserve Log**. |
| 138 | + |
| 139 | +  |
| 140 | + |
| 141 | + 1. Select the **Console** tab, then select **Preserve Log**. |
| 142 | + |
| 143 | +  |
| 144 | + |
| 145 | +1. Select the **Network** tab, then select **Clear Network Items**. |
| 146 | + |
| 147 | +  |
| 148 | + |
| 149 | +1. Reproduce the issue in the portal. You will see session output similar to the following image. |
| 150 | + |
| 151 | +  |
| 152 | + |
| 153 | +1. After you have reproduced the unexpected portal behavior, select **Export** and save the file. |
| 154 | + |
| 155 | +  |
| 156 | + |
| 157 | +1. Stop the screen recorder, and save the file. |
| 158 | + |
| 159 | +1. 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. |
| 160 | + |
| 161 | +  |
| 162 | + |
| 163 | +1. Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support. |
| 164 | + |
| 165 | +## Next steps |
| 166 | + |
| 167 | +[Azure portal overview](azure-portal-overview.md) |
0 commit comments