You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-portal/capture-browser-trace.md
+75-27Lines changed: 75 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Capture a browser trace for troubleshooting
3
3
description: Capture network information from a browser trace to help troubleshoot issues with the Azure portal.
4
-
ms.date: 09/01/2022
4
+
ms.date: 02/24/2023
5
5
ms.topic: how-to
6
6
---
7
7
@@ -12,11 +12,11 @@ If you're troubleshooting an issue with the Azure portal, and you need to contac
12
12
> [!IMPORTANT]
13
13
> 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.
14
14
15
-
You can capture this information any [supported browser](azure-portal-supported-browsers-devices.md): Google Chrome, Microsoft Edge, Safari (on Mac), or Firefox. Steps for each browser are shown below.
15
+
You can capture this information any [supported browser](azure-portal-supported-browsers-devices.md): Microsoft Edge, Google Chrome, Safari (on Mac), or Firefox. Steps for each browser are shown below.
16
16
17
-
## Google Chrome and Microsoft Edge
17
+
## Microsoft Edge
18
18
19
-
Google Chrome and Microsoft Edge are both based on the [Chromium open source project](https://www.chromium.org/Home). The developer tools experience is very similar in the two browsers. The screenshots included here show the Google Chrome experience, but you'll see the same options in Microsoft Edge. For more information, see[Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools) and[Microsoft Edge DevTools](/microsoft-edge/devtools-guide-chromium).
19
+
The following steps show how to use the developer tools in Microsoft Edge. For more information, see [Microsoft Edge DevTools](/microsoft-edge/devtools-guide-chromium).
20
20
21
21
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 account.
22
22
@@ -28,35 +28,83 @@ Google Chrome and Microsoft Edge are both based on the [Chromium open source pro
28
28
29
29
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 steps require going to more than one page:
30
30
31
+
1. Select the **Console** tab, select **Console settings**, then select **Preserve Log**.
32
+
33
+
:::image type="content" source="media/capture-browser-trace/edge-console-preserve-log.png" alt-text="Screenshot that highlights the Preserve log option on the Console tab in Edge.":::
34
+
31
35
1. Select the **Network** tab, then select **Preserve log**.
32
36
33
-
37
+
:::image type="content" source="media/capture-browser-trace/edge-network-preserve-log.png" alt-text="Screenshot that highlights the Preserve log option on the Network tab in Edge.":::
34
38
35
-
1. Select the **Console** tab, select **Console settings**, then select **Preserve Log**.
39
+
1. On the **Network** tab, select **Stop recording network log** and **Clear**.
40
+
41
+
:::image type="content" source="media/capture-browser-trace/edge-stop-clear-session.png" alt-text="Screenshot showing the Stop recording network log and Clear options on the Network tab in Edge.":::
42
+
43
+
1. Select **Record network log**, then reproduce the issue in the portal.
36
44
37
-
45
+
:::image type="content" source="media/capture-browser-trace/edge-start-session.png" alt-text="Screenshot showing how to record the network log in Edge.":::
38
46
39
-
1. Select the **Network** tab, then select **Stop recording network log** and **Clear**.
47
+
You'll see session output similar to the following image.
48
+
49
+
:::image type="content" source="media/capture-browser-trace/edge-browser-trace-results.png" alt-text="Screenshot showing session output in Edge.":::
50
+
51
+
1. After you have reproduced the unexpected portal behavior, select **Stop recording network log**, then select **Export HAR** and save the file.
52
+
53
+
:::image type="content" source="media/capture-browser-trace/edge-network-export-har.png" alt-text="Screenshot showing how to Export HAR on the Network tab in Edge.":::
54
+
55
+
1. Stop the Steps Recorder and save the recording.
40
56
41
-
57
+
1. 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.
58
+
59
+
:::image type="content" source="media/capture-browser-trace/edge-console-select.png" alt-text="Sccreenshot showing how to save the console output in Edge.":::
60
+
61
+
1. Package the browser trace HAR file, console output, and screen recording files in a compressed format such as .zip.
62
+
63
+
1. Share the compressed file with Microsoft support by [using the **File upload** option in your support request](supportability/how-to-manage-azure-support-request.md#upload-files).
64
+
65
+
## Google Chrome
66
+
67
+
The following steps show how to use the developer tools in Google Chrome. For more information, see [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools).
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 account.
70
+
71
+
1. Start recording the steps you take in the portal, using [Steps Recorder](https://support.microsoft.com/windows/record-steps-to-reproduce-a-problem-46582a9b-620f-2e36-00c9-04e25d784e47).
72
+
73
+
1. In the portal, navigate to the step prior to where the issue occurs.
74
+
75
+
1. Press F12 to launch the developer tools. You can also launch the tools from the toolbar menu under **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 steps require going to more than one page:
78
+
79
+
1. Select the **Console** tab, select **Console settings**, then select **Preserve Log**.
80
+
81
+
82
+
83
+
1. Select the **Network** tab, then select **Preserve log**.
84
+
85
+
86
+
87
+
1. On the **Network** tab, select **Stop recording network log** and **Clear**.
88
+
89
+
42
90
43
91
1. Select **Record network log**, then reproduce the issue in the portal.
44
92
45
-
93
+
46
94
47
-
You will see session output similar to the following image.
95
+
You'll see session output similar to the following image.
48
96
49
-
97
+
50
98
51
99
1. After you have reproduced the unexpected portal behavior, select **Stop recording network log**, then select **Export HAR** and save the file.
52
100
53
-
101
+
54
102
55
103
1. Stop the Steps Recorder and save the recording.
56
104
57
105
1. 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.
58
106
59
-
107
+
60
108
61
109
1. Package the browser trace HAR file, console output, and screen recording files in a compressed format such as .zip.
62
110
@@ -82,23 +130,23 @@ The following steps show how to use the developer tools in Apple Safari on Mac.
82
130
83
131
1. Select **Develop**, then select **Show Web Inspector**.
84
132
85
-
133
+
86
134
87
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 steps require going to more than one page:
88
136
89
-
1. Select the **Network** tab, then select **Preserve Log**.
137
+
1. Select the **Console** tab, then select **Preserve Log**.
90
138
91
-
139
+
92
140
93
-
1. Select the **Console** tab, then select **Preserve Log**.
141
+
1. Select the **Network** tab, then select **Preserve Log**.
94
142
95
-
143
+
96
144
97
-
1.Select the **Network** tab, then select **Clear Network Items**.
145
+
1.On the **Network** tab, select **Clear Network Items**.
98
146
99
147
100
148
101
-
1. Reproduce the issue in the portal. You will see session output similar to the following image.
149
+
1. Reproduce the issue in the portal. You'll see session output similar to the following image.
102
150
103
151
104
152
@@ -130,19 +178,19 @@ The following steps show how to use the developer tools in Firefox. For more inf
130
178
131
179
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 steps require going to more than one page:
132
180
133
-
1. Select the **Network** tab, select the **Settings** icon, and then select **Persist Logs**.
134
-
135
-
:::image type="content" source="media/capture-browser-trace/firefox-network-persist-logs.png" alt-text="Screenshot of the Network setting for Persist Logs.":::
136
-
137
181
1. Select the **Console** tab, select the **Settings** icon, and then select **Persist Logs**.
138
182
139
183
:::image type="content" source="media/capture-browser-trace/firefox-console-persist-logs.png" alt-text="Screenshot of the Console setting for Persist Logs.":::
140
184
141
-
1. Select the **Network** tab, then select **Clear**.
185
+
1. Select the **Network** tab, select the **Settings** icon, and then select **Persist Logs**.
186
+
187
+
:::image type="content" source="media/capture-browser-trace/firefox-network-persist-logs.png" alt-text="Screenshot of the Network setting for Persist Logs.":::
188
+
189
+
1. On the **Network** tab, select **Clear**.
142
190
143
191
144
192
145
-
1. Reproduce the issue in the portal. You will see session output similar to the following image.
193
+
1. Reproduce the issue in the portal. You'll see session output similar to the following image.
146
194
147
195
0 commit comments