擷取瀏覽器追蹤以進行疑難排解

如果您要針對Azure 入口網站的問題進行疑難排解,而且您需要連絡 Microsoft 支援服務,建議您先擷取一些其他資訊。 例如,共用瀏覽器追蹤、步驟錄製和主控台輸出會很有説明。 此資訊可以提供問題發生時,入口網站中發生狀況的重要詳細資料。

警告

瀏覽器追蹤通常包含敏感性資訊,而且可能包含連結至您身分識別的驗證權杖。 請先移除任何敏感性資訊,再與其他人共用追蹤。 Microsoft 支援僅使用這些追蹤進行疑難排解。

您可以擷取此資訊,任何 支援的瀏覽器 :Microsoft Edge、Google Chrome、Safari(在 Mac 上),或 Firefox。 每個瀏覽器的步驟如下所示。

Microsoft Edge

下列步驟示範如何在 Microsoft Edge 中使用開發人員工具。 如需詳細資訊,請參閱 Microsoft Edge DevTools

注意

下列螢幕擷取畫面顯示具有垂直 活動 列的焦點模式中的 DevTools。 視您的設定而定,您的設定可能會有所不同。 如需詳細資訊,請參閱 使用焦點模式 簡化 DevTools。

  1. 登入 Azure 入口網站。 請務必在開始追蹤之前 登入 ,讓追蹤不包含與您的帳戶相關的敏感性資訊。

  2. 使用步驟收錄程式,開始錄製您在入口網站中所採取的步驟。

  3. 在入口網站中,流覽至發生問題之前的步驟。

  4. 按 F12 啟動 Microsoft Edge DevTools。 您也可以從 [其他工具] 底下的 工具列功能表啟動工具 > 開發人員工具。

  5. 根據預設,瀏覽器只會保留目前載入頁面的追蹤資訊。 設定下列選項,讓瀏覽器保留所有追蹤資訊,即使您的重現步驟需要移至一個以上的頁面也一樣。

    1. 選取 [主控台] 索引標籤,選取 [主控台設定],然後選取 [保留記錄]。

      Screenshot that highlights the Preserve log option on the Console tab in Edge.

    2. 選取 [網路] 索引 標。如果看不到該索引標籤,請按一下 [更多工具 ] 按鈕,然後選取 [ 網路 ]。 然後,從 [ 網路] 索引標籤中,選取 [ 保留記錄 ]。

      Screenshot that highlights the Preserve log option on the Network tab in Edge.

  6. 在 [ 網路] 索引標籤上,選取 [停止錄製網路記錄 ] 和 [ 清除 ]。

    Screenshot showing the Stop recording network log and Clear options on the Network tab in Edge.

  7. 選取 [錄製網路記錄],然後在入口網站中重現問題。

    Screenshot showing how to record the network log in Edge.

    您會看到類似下圖的會話輸出。

    Screenshot showing session output in Edge.

  8. 重現非預期的入口網站行為之後,請選取 [停止錄製網路記錄 ],然後選取 [ 匯出 HAR ] 並儲存檔案。

    Screenshot showing how to Export HAR on the Network tab in Edge.

  9. 停止步驟錄製器並儲存錄製。

  10. 回到瀏覽器開發人員工具窗格,選取 [主控台] 索引標籤。以滑鼠右鍵按一下其中一個訊息,選取 [另存新檔 ...],然後將主控台輸出儲存至文字檔。

    Sccreenshot showing how to save the console output in Edge.

  11. 以 .zip 等壓縮格式封裝瀏覽器追蹤 HAR 檔案、主控台輸出和螢幕錄製檔案。

  12. 在支援要求 中使用 [檔案上傳 ] 選項,與 Microsoft 支援 共用壓縮檔。

Google Chrome

下列步驟示範如何在 Google Chrome 中使用開發人員工具。 如需詳細資訊,請參閱 Chrome DevTools

  1. 登入 Azure 入口網站。 請務必在開始追蹤之前 登入 ,讓追蹤不包含與您的帳戶相關的敏感性資訊。

  2. 使用步驟收錄程式,開始錄製您在入口網站中所採取的步驟。

  3. 在入口網站中,流覽至發生問題之前的步驟。

  4. 按 F12 啟動開發人員工具。 您也可以從 [其他工具] 底下的 工具列功能表啟動工具 > 開發人員工具。

  5. 根據預設,瀏覽器只會保留目前載入頁面的追蹤資訊。 設定下列選項,讓瀏覽器保留所有追蹤資訊,即使您的重現步驟需要移至多個頁面:

    1. 選取 [主控台] 索引標籤,選取 [主控台設定],然後選取 [保留記錄]。

      Screenshot that highlights the Preserve log option on the Console tab in Chrome.

    2. 選取 [網路] 索引標籤,然後選取 [保留記錄]。

      Screenshot that highlights the Preserve log option on the Network tab in Chrome.

  6. 在 [ 網路] 索引標籤上,選取 [停止錄製網路記錄 ] 和 [ 清除 ]。

    Screenshot of

  7. 選取 [錄製網路記錄],然後在入口網站中重現問題。

    Screenshot that shows how to record the network log in Chrome.

    您會看到類似下圖的會話輸出。

    Screenshot that shows the session output in Chrome.

  8. 重現非預期的入口網站行為之後,請選取 [停止錄製網路記錄 ],然後選取 [ 匯出 HAR ] 並儲存檔案。

    Screenshot that shows how to Export HAR on the Network tab in Chrome.

  9. 停止步驟錄製器並儲存錄製。

  10. 回到瀏覽器開發人員工具窗格,選取 [主控台] 索引標籤。以滑鼠右鍵按一下其中一個訊息,選取 [另存新檔 ...],然後將主控台輸出儲存至文字檔。

    Screenshot that shows how to save the console output in Chrome.

  11. 以 .zip 等壓縮格式封裝瀏覽器追蹤 HAR 檔案、主控台輸出和螢幕錄製檔案。

  12. 在支援要求 中使用 [檔案上傳 ] 選項,與 Microsoft 支援 共用壓縮檔。

Safari

下列步驟示範如何在 Mac 上的 Apple Safari 中使用開發人員工具。 如需詳細資訊,請參閱 Safari 開發人員工具概觀

  1. 在 Safari 中啟用開發人員工具:

    1. 選取 [Safari],然後選取 [偏好設定]。

    2. 選取 [進階] 索引標籤,然後選取 [在功能表列中顯示開發功能表]。

      Screenshot of the Safari advanced preferences options.

  2. 登入 Azure 入口網站。 請務必在開始追蹤之前 登入 ,讓追蹤不包含與您的帳戶相關的敏感性資訊。

  3. 開始錄製您在入口網站中所採取的步驟。 如需詳細資訊,請參閱如何在 Mac 上錄製螢幕

  4. 在入口網站中,流覽至發生問題之前的步驟。

  5. 選取 [開發],然後選取 [顯示 Web 檢查程式]。

    Screenshot of the

  6. 根據預設,瀏覽器只會保留目前載入頁面的追蹤資訊。 設定下列選項,讓瀏覽器保留所有追蹤資訊,即使您的重現步驟需要移至多個頁面:

    1. 選取 [主控台] 索引標籤,然後選取 [保留記錄]。

      Screenshot that shows the Preserve Log on the Console tab.

    2. 選取 [網路] 索引標籤,然後選取 [保留記錄]。

      Screenshot that shows the Preserve Log option on the Network tab.

  7. 在 [ 網路] 索引標籤上,選取 [ 清除網路專案 ]。

    Screenshot of

  8. 請在入口網站中重現問題。 您會看到類似下圖的會話輸出。

    Screenshot that shows the output after you've reproduced the issue.

  9. 重現非預期的入口網站行為之後,請選取 [匯出 ] 並儲存檔案。

    Screenshot of the

  10. 停止螢幕錄製器,並儲存錄製。

  11. 回到瀏覽器開發人員工具窗格,選取 [主控台] 索引標籤並展開視窗。 將游標放在主控台輸出的開頭,然後拖曳並選取輸出的完整內容。 使用 Command-C 複製輸出,並將它儲存至文字檔。

    Screenshot that shows where you can view and copy the console output.

  12. 以 .zip 等壓縮格式封裝瀏覽器追蹤 HAR 檔案、主控台輸出和螢幕錄製檔案。

  13. 在支援要求 中使用 [檔案上傳 ] 選項,與 Microsoft 支援 共用壓縮檔。

Firefox

下列步驟示範如何使用 Firefox 中的開發人員工具。 如需詳細資訊,請參閱 Firefox 開發人員工具

  1. 登入 Azure 入口網站。 請務必在開始追蹤之前 登入 ,讓追蹤不包含與您的帳戶相關的敏感性資訊。

  2. 開始錄製您在入口網站中所採取的步驟。 在 Windows 上使用步驟錄製器 ,或查看 如何在 Mac 上錄製畫面。

  3. 在入口網站中,流覽至發生問題之前的步驟。

  4. 按 F12 啟動開發人員工具。 您也可以從 [其他工具] [Web 開發人員工具] 底下的 工具列功能表啟動工具 >

  5. 根據預設,瀏覽器只會保留目前載入頁面的追蹤資訊。 設定下列選項,讓瀏覽器保留所有追蹤資訊,即使您的重現步驟需要移至多個頁面:

    1. 選取 [主控台] 索引 標籤,選取 設定 圖示,然後選取 [ 保存記錄 ]。

      Screenshot of the Console setting for Persist Logs.

    2. 選取 [網路] 索引 標籤,選取 設定 圖示,然後選取 [ 保存記錄 ]。

      Screenshot of the Network setting for Persist Logs.

  6. 在 [ 網路] 索引標籤上,選取 [ 清除 ]。

    Screenshot of the

  7. 請在入口網站中重現問題。 您會看到類似下圖的會話輸出。

    Screenshot showing example browser trace results.

  8. 重現非預期的入口網站行為之後,請選取 [ 全部儲存為 HAR ]。

    Screenshot of the

  9. 停止 Windows 上的步驟錄製器或 Mac 上的螢幕錄製,並儲存錄製。

  10. 回到瀏覽器開發人員工具窗格,選取 [ 主控台 ] 索引標籤。以滑鼠右鍵按一下其中一則訊息,然後選取 [ 將所有訊息儲存至檔案 ],然後將主控台輸出儲存至文字檔。

    Screenshot of the Save All Messages to File command on the Console tab.

  11. 以 .zip 等壓縮格式封裝瀏覽器追蹤 HAR 檔案、主控台輸出和螢幕錄製檔案。

  12. 在支援要求 中使用 [檔案上傳 ] 選項,與 Microsoft 支援 共用壓縮檔。

下一步