Skip to content

Commit 6ad3b31

Browse files
committed
Add Safari + cleanup
1 parent 4789405 commit 6ad3b31

18 files changed

+55
-5
lines changed

articles/azure-portal/azure-portal-browser-trace.md

Lines changed: 55 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,11 @@ Google Chrome and Microsoft Edge (Chromium) are both based on the [Chromium open
5656

5757
1. Stop Steps Recorder, and save the file.
5858

59-
1. Back in the browser developer tools pane, select the **Console** tab. Select **Save as...**, and save the console output to a text file.
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.
6060

6161
![Screenshot of console output](media/azure-portal-browser-trace/chromium-console-select.png)
6262

63-
1. Package the HAR file, console output, and Steps Recorder in a compressed format like .zip, and share that with Microsoft support.
63+
1. Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support.
6464

6565
## Microsoft Edge (EdgeHTML)
6666

@@ -102,15 +102,65 @@ The following steps show how to use the developer tools in Microsoft Edge (EdgeH
102102

103103
1. Stop Steps Recorder, and save the file.
104104

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. Copy the output and save it to a text file.
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.
106106

107107
![Screenshot of console output](media/azure-portal-browser-trace/edge-console-select.png)
108108

109-
1. Package the HAR file, console output, and Steps Recorder in a compressed format like .zip, and share that with Microsoft support.
109+
1. Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support.
110110

111111
## Apple Safari
112112

113-
Steps go here
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+
![Screenshot of Safari preferences](media/azure-portal-browser-trace/safari-preferences.png)
120+
121+
1. Select the **Advanced** tab, then select **Show Develop menu in menu bar**.
122+
123+
![Screenshot of Safari advanced preferences](media/azure-portal-browser-trace/safari-show-develop-menu.png)
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.comHT208721).
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+
![Screenshot of "Show Web Inspector"](media/azure-portal-browser-trace/safari-show-web-inspector.png)
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+
![Screenshot of "Preserve Log"](media/azure-portal-browser-trace/safari-network-preserve-log.png)
140+
141+
1. Select the **Console** tab, then select **Preserve Log**.
142+
143+
![Screenshot of "Preserve Log"](media/azure-portal-browser-trace/safari-console-preserve-log.png)
144+
145+
1. Select the **Network** tab, then select **Clear Network Items**.
146+
147+
![Screenshot of "Clear Network Items"](media/azure-portal-browser-trace/safari-clear-session.png)
148+
149+
1. Reproduce the issue in the portal. You will see session output similar to the following image.
150+
151+
![Screenshot of browser trace results](media/azure-portal-browser-trace/safari-browser-trace-results.png)
152+
153+
1. After you have reproduced the unexpected portal behavior, select **Export** and save the file.
154+
155+
![Screenshot of "Export"](media/azure-portal-browser-trace/safari-network-export-har.png)
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+
![Screenshot of console output](media/azure-portal-browser-trace/safari-console-select.png)
162+
163+
1. Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support.
114164

115165
## Next steps
116166

31 Bytes
Loading
15 Bytes
Loading
17 Bytes
Loading
19 Bytes
Loading
146 Bytes
Loading
18 Bytes
Loading
21 Bytes
Loading
17 Bytes
Loading
50.5 KB
Loading

0 commit comments

Comments
 (0)