捕获浏览器跟踪以进行故障排除Capture a browser trace for troubleshooting

如果你正在排查 Azure 门户的问题并需要联系 Azure 支持人员,我们建议先捕获浏览器跟踪和其他一些信息。If you're troubleshooting an issue with the Azure portal, and you need to contact Azure 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. 对于使用的浏览器中的开发人员工具,请按照本文中的步骤进行操作:Google Chrome 或 Microsoft Edge (Chromium)、Microsoft Edge (EdgeHTML)、Apple Safari 或 Firefox。Follow the steps in this article for the developer tools in the browser you use: Google Chrome or Microsoft Edge (Chromium), Microsoft Edge (EdgeHTML), Apple Safari, or Firefox.

Google Chrome 和 Microsoft Edge (Chromium)Google Chrome and Microsoft Edge (Chromium)

Google Chrome 和 (Chromium)都基于 Chromium 开放源代码项目Google Chrome and Microsoft Edge (Chromium) are both based on the Chromium open source project. 以下步骤说明如何使用开发人员工具,这些工具在这两个浏览器中非常类似。The following steps show how to use the developer tools, which are very similar in the two browsers. 有关详细信息,请参阅 Chrome DevToolsMicrosoft Edge (Chromium) 开发工具For more information, see Chrome DevTools and Microsoft Edge (Chromium) Developer Tools.

  1. 登录到 Azure 门户Sign in to the Azure portal. 必须在开始跟踪之前登录,以免跟踪包含登录相关的敏感信息。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.

  2. 使用步骤录制器开始录制在门户中执行的步骤。Start recording the steps you take in the portal, using Steps Recorder.

  3. 在门户中,导航到问题发生之前的那个步骤。In the portal, navigate to the step just prior to where the issue occurs.

  4. 按 F12 或选择 显示浏览器设置图标的屏幕截图。Press F12 or select Screenshot that shows the browser settings icon. > 更多工具 > 开发人员工具 > More tools > Developer tools.

  5. 默认情况下,浏览器只为当前加载的页面保留跟踪信息。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:

    1. 依次选择“网络”选项卡、“保留日志”。 Select the Network tab, then select Preserve log.

      屏幕截图,突出显示了“网络”选项卡上的“保留日志”选项。

    2. 依次选择“控制台”选项卡、“控制台设置”、“保留日志”。 Select the Console tab, select Console settings, then select Preserve Log. 再次选择“控制台设置”关闭设置窗格。Select Console settings again to close the settings pane.

      屏幕截图,突出显示了“控制台”选项卡上的“保留日志”选项。

  6. 选择“网络”选项卡,然后依次选择“停止记录网络日志”、“清除”。 Select the Network tab, then select Stop recording network log and Clear.

    “停止记录网络日志”和“清除”的屏幕截图

  7. 选择“记录网络日志”,然后在门户中重现问题。Select Record network log, then reproduce the issue in the portal.

    显示如何记录网络日志的屏幕截图。

    将会看到如下图所示的会话输出。You will see session output similar to the following image.

    显示会话输出的屏幕截图。

  8. 重现意外的门户行为后,依次选择“停止记录网络日志”、“导出 HAR”并保存文件。 After you have reproduced the unexpected portal behavior, select Stop recording network log, then select Export HAR and save the file.

    显示如何在“网络”选项卡上导出 HAR 的屏幕截图。

  9. 停止步骤记录器,并保存记录。Stop Steps Recorder, and save the recording.

  10. 在“浏览器开发人员工具”窗格中,选择“控制台”选项卡。右键单击其中一条消息,然后选择“另存为…”,并将控制台输出保存为文本文件。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.

    此屏幕截图突出显示了“控制台”选项卡和“另存为...”菜单

  11. 以压缩格式(例如 .zip)打包 HAR 文件、控制台输出和屏幕录制内容,并将其与 Microsoft 支持人员共享。Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support.

Microsoft Edge (EdgeHTML)Microsoft Edge (EdgeHTML)

以下步骤说明如何在 Microsoft Edge (EdgeHTML) 中使用开发人员工具。The following steps show how to use the developer tools in Microsoft Edge (EdgeHTML). 有关详细信息,请参阅 Microsoft Edge (EdgeHTML) 开发人员工具For more information, see Microsoft Edge (EdgeHTML) Developer Tools.

  1. 登录 Azure 门户Sign in to the Azure portal. 必须在开始跟踪之前登录,以免跟踪包含登录相关的敏感信息。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.

  2. 使用步骤录制器开始录制在门户中执行的步骤。Start recording the steps you take in the portal, using Steps Recorder.

  3. 在门户中,导航到问题发生之前的那个步骤。In the portal, navigate to the step just prior to where the issue occurs.

  4. 按 F12 或选择 浏览器设置图标的屏幕截图。Press F12 or select Screenshot of the browser settings icon. > 更多工具 > 开发人员工具 > More tools > Developer tools.

  5. 默认情况下,浏览器只为当前加载的页面保留跟踪信息。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:

    1. 选择“网络”选项卡,然后清除“清除浏览项”选项。 Select the Network tab, then clear the option Clear entries on navigate.

      “清除浏览项”的屏幕截图

    2. 依次选择“控制台”选项卡、“保留日志”。 Select the Console tab, then select Preserve Log.

      “保留日志”的屏幕截图

  6. 选择“网络”选项卡,然后依次选择“停止分析会话”、“清除会话”。 Select the Network tab, then select Stop profiling session and Clear session.

    “停止分析会话”和“清除会话”的屏幕截图

  7. 选择“启动分析会话”,然后在门户中重现问题。Select Start profiling session, then reproduce the issue in the portal.

    “启动分析会话”的屏幕截图

    将会看到如下图所示的会话输出。You will see session output similar to the following image.

    显示分析会话输出的屏幕截图。

  8. 重现意外的门户行为后,依次选择“停止分析会话”、“导出为 HAR”并保存文件。 After you have reproduced the unexpected portal behavior, select Stop profiling session, then select Export as HAR and save the file.

    “导出为 HAR”的屏幕截图

  9. 停止步骤记录器,并保存记录。Stop Steps Recorder, and save the recording.

  10. 在“浏览器开发人员工具”窗格中,选择“控制台”选项卡,然后展开窗口。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.

    突出显示“复制”菜单选项的屏幕截图。

  11. 以压缩格式(例如 .zip)打包 HAR 文件、控制台输出和屏幕录制内容,并将其与 Microsoft 支持人员共享。Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support.

Apple SafariApple Safari

以下步骤说明如何在 Apple Safari 中使用开发人员工具。The following steps show how to use the developer tools in Apple Safari. 有关详细信息,请参阅 Safari 开发人员工具概述For more information, see Safari Developer Tools overview.

  1. 在 Apple Safari 中启用开发人员工具:Enable the developer tools in Apple Safari:

    1. 依次选择“Safari”、“Preferences”(首选项)。 Select Safari, then select Preferences.

      Safari 首选项的屏幕截图

    2. 依次选择“Advanced”(高级)选项卡、“Show Develop menu in menu bar”(在菜单栏中显示“开发”菜单)。 Select the Advanced tab, then select Show Develop menu in menu bar.

      Safari 高级首选项的屏幕截图

  2. 登录 Azure 门户Sign in to the Azure portal. 必须在开始跟踪之前登录,以免跟踪包含登录相关的敏感信息。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.

  3. 开始记录在门户中执行的步骤。Start recording the steps you take in the portal. 有关详细信息,请参阅如何在 Mac 上录制屏幕For more information, see How to record the screen on your Mac.

  4. 在门户中,导航到问题发生之前的步骤。In the portal, navigate to the step just prior to where the issue occurs.

  5. 依次选择“Develop”(开发)、“Show Web Inspector”(显示 Web 检查器)。 Select Develop, then select Show Web Inspector.

    “Show Web Inspector”(显示 Web 检查器)的屏幕截图

  6. 默认情况下,浏览器只保留当前加载页的跟踪信息。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:

    1. 依次选择“Network”(网络)选项卡、“Preserve Log”(保留日志)。 Select the Network tab, then select Preserve Log.

      显示“保留日志”选项的屏幕截图。

    2. 依次选择“Console”(控制台)选项卡、“Preserve Log”(保留日志)。 Select the Console tab, then select Preserve Log.

      屏幕截图,显示了“控制台”选项卡上的“保留日志”。

  7. 依次选择“Network”(网络)选项卡、“Clear Network Items”(清除网络项)。 Select the Network tab, then select Clear Network Items.

    “Clear Network Items”(清除网络项)的屏幕截图

  8. 在门户中重现问题。Reproduce the issue in the portal. 将会看到如下图所示的会话输出。You will see session output similar to the following image.

    此屏幕截图显示了重现问题后的输出。

  9. 重现意外的门户行为后,选择“Export”(导出)并保存文件。After you have reproduced the unexpected portal behavior, select Export and save the file.

    “导出”的屏幕截图

  10. 停止屏幕记录器并保存记录。Stop the screen recorder, and save the recording.

  11. 在“浏览器开发人员工具”窗格中,选择“控制台”选项卡,然后展开窗口。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. 按命令键+C 复制输出,并将其保存到文本文件中。Use Command-C to copy the output and save it to a text file.

    屏幕截图,突出显示你可以查看和复制输出。

  12. 将 HAR 文件、控制台输出和屏幕录制打包为压缩格式(如 .zip),并与 Microsoft 支持人员共享。Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support.

FirefoxFirefox

以下步骤说明如何在 Firefox 中使用开发人员工具。The following steps show how to use the developer tools in Firefox. 有关详细信息,请参阅 Firefox 开发人员工具For more information, see Firefox Developer Tools.

  1. 登录 Azure 门户Sign in to the Azure portal. 必须在开始跟踪之前登录,以免跟踪包含登录相关的敏感信息。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.

  2. 开始记录在门户中执行的步骤。Start recording the steps you take in the portal. 在 Windows 上使用步骤记录器,或者查看如何在 Mac 上记录屏幕Use Steps Recorder on Windows, or see How to record the screen on your Mac.

  3. 在门户中,导航到问题发生之前的步骤。In the portal, navigate to the step just prior to where the issue occurs.

  4. 按 F12 或选择浏览器设置图标的屏幕截图 > “Web 开发人员” > “切换工具” 。Press F12 or select Screenshot of browser settings icon > Web Developer > Toggle Tools.

  5. 默认情况下,浏览器只保留当前加载页的跟踪信息。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:

    1. 选择“网络”选项卡,然后选择“保留日志” 。Select the Network tab, then select Persist Logs.

      突出显示“保留日志”选项的屏幕截图。

    2. 依次选择“控制台”选项卡、“控制台设置”、“保留日志” 。Select the Console tab, select Console settings, then select Persist Logs.

      “保留日志”的屏幕截图

  6. 选择“网络”选项卡,然后选择“清除” 。Select the Network tab, then select Clear.

    “清除”的屏幕截图

  7. 在门户中重现问题。Reproduce the issue in the portal. 将会看到如下图所示的会话输出。You will see session output similar to the following image.

    浏览器跟踪结果的屏幕截图

  8. 重现意外的门户行为后,请选择“HAR 导出/导入”,然后选择“将所有内容另存为 HAR” 。After you have reproduced the unexpected portal behavior, select HAR Export/Import then Save All As HAR.

    “导出 HAR”的屏幕截图

  9. 停止 Windows 上的步骤录制或 Mac 上的屏幕录制,并保存录制。Stop Steps Recorder on Windows or the screen recording on Mac, and save the recording.

  10. 在“浏览器开发人员工具”窗格中,选择“控制台”选项卡。右键单击其中一条消息,然后选择“将可见消息导出到”,并将控制台输出保存为文本文件。Back in the browser developer tools pane, select the Console tab. Right-click one of the messages, then select Export Visible Message To, and save the console output to a text file.

    控制台输出屏幕截图

  11. 以压缩格式(例如 .zip)打包 HAR 文件、控制台输出和屏幕录制内容,并将其与 Microsoft 支持人员共享。Package the HAR file, console output, and screen recording in a compressed format like .zip, and share that with Microsoft support.

后续步骤Next steps

Azure 门户概述Azure portal overview