separate and update Edge and Chrome

Author: JnHs

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

@@ -1,7 +1,7 @@
 ---
 title: Capture a browser trace for troubleshooting
 description: Capture network information from a browser trace to help troubleshoot issues with the Azure portal.
-ms.date: 09/01/2022
+ms.date: 02/24/2023
 ms.topic: how-to
 ---
 
@@ -12,11 +12,59 @@ If you're troubleshooting an issue with the Azure portal, and you need to contac
 > [!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.
 
-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.
+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.
 
-## Google Chrome and Microsoft Edge
+## Microsoft Edge
 
-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).
+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).
+
+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.
+
+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).
+
+1. In the portal, navigate to the step prior to where the issue occurs.
+
+1. Press F12 to launch the developer tools. You can also launch the tools from the toolbar menu under **More tools** > **Developer tools**.
+
+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:
+
+    1. Select the **Network** tab, then select **Preserve log**.
+
+          ![Screenshot that highlights the Preserve log option on the Network tab.](media/capture-browser-trace/chromium-network-preserve-log.png)
+
+    1. Select the **Console** tab, select **Console settings**, then select **Preserve Log**.
+
+          ![Screenshot that highlights the Preserve log option on the Console tab.](media/capture-browser-trace/chromium-console-preserve-log.png)
+
+1. Select the **Network** tab, then select **Stop recording network log** and **Clear**.
+
+    ![Screenshot of "Stop recording network log" and "Clear" on the Network tab.](media/capture-browser-trace/chromium-stop-clear-session.png)
+
+1. Select **Record network log**, then reproduce the issue in the portal.
+
+    ![Screenshot that shows how to record the network log.](media/capture-browser-trace/chromium-start-session.png)
+
+    You will see session output similar to the following image.
+
+    ![Screenshot that shows the session output.](media/capture-browser-trace/chromium-browser-trace-results.png)
+
+1. 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.](media/capture-browser-trace/chromium-network-export-har.png)
+
+1. Stop the Steps Recorder and save the recording.
+
+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.
+
+    ![Screenshot that shows how to save the console output.](media/capture-browser-trace/chromium-console-select.png)
+
+1. Package the browser trace HAR file, console output, and screen recording files in a compressed format such as .zip.
+
+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).
+
+## Google Chrome
+
+The following steps show how to use the developer tools in Microsoft Edge. For more information, see [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools).
 
 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.