Skip to content

Commit 0b3a5cd

Browse files
committed
Add chromium steps
1 parent 02d7c5f commit 0b3a5cd

10 files changed

+47
-5
lines changed

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

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,53 @@ manager: mtillman
1414

1515
# Capture a browser trace for troubleshooting
1616

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 browser you use: Microsoft Edge (EdgeHTML), Microsoft Edge (Chromium), Google Chrome, or Apple Safari.
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 ![Screenshot of browser settings icon](media/azure-portal-browser-trace/chromium-icon-settings.png) > **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+
![Screenshot of "Preserve log"](media/azure-portal-browser-trace/chromium-network-preserve-log.png)
36+
37+
1. Select the **Console** tab, select **Console settings**, then select **Preserve Log**.
38+
39+
![Screenshot of "Preserve Log"](media/azure-portal-browser-trace/chromium-console-preserve-log.png)
40+
41+
1. Select the **Network** tab, then select **Stop recording network log** and **Clear**.
42+
43+
![Screenshot of "Stop recording network log" and "Clear"](media/azure-portal-browser-trace/chromium-stop-clear-session.png)
44+
45+
1. Select **Record network log**, then reproduce the issue in the portal.
46+
47+
![Screenshot of "Start profiling session"](media/azure-portal-browser-trace/chromium-start-session.png)
48+
49+
You will see session output similar to the following image.
50+
51+
![Screenshot of browser trace results](media/azure-portal-browser-trace/chromium-browser-trace-results.png)
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+
![Screenshot of "Export HAR"](media/azure-portal-browser-trace/chromium-network-export-har.png)
56+
57+
1. Stop Steps Recorder, and save the file.
58+
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.
60+
61+
![Screenshot of console output](media/azure-portal-browser-trace/chromium-console-select.png)
62+
63+
1. Package the HAR file, console output, and Steps Recorder in a compressed format like .zip, and share that with Microsoft support.
1864

1965
## Microsoft Edge (EdgeHTML)
2066

@@ -62,10 +108,6 @@ The following steps show how to use the developer tools in Microsoft Edge (EdgeH
62108

63109
1. Package the HAR file, console output, and Steps Recorder in a compressed format like .zip, and share that with Microsoft support.
64110

65-
## Google Chrome
66-
67-
Steps go here
68-
69111
## Apple Safari
70112

71113
Steps go here
26.7 KB
Loading
14.1 KB
Loading
18.1 KB
Loading
419 Bytes
Loading
6.44 KB
Loading
6.43 KB
Loading
6.03 KB
Loading
6.44 KB
Loading
0 Bytes
Loading

0 commit comments

Comments
 (0)