Microsoft Edge瀏覽器F12開發者工具中的網絡工具

Microsoft Edge 為其用戶提供了可供開發人員甚至計算機網絡學生使用的網絡工具，以確保下載網頁正常運行所需的資源，並且與服務器端 API 的通信不會受到干擾。在這篇文章中，我們將介紹 Microsoft Edge 的網絡工具，以便您可以更好地了解您的網頁。

F12 在 Edge 中做什麼？

Microsoft Edge 中的 F12 按鈕可打開開發人員工具。借助該工具，人們可以了解網站，訪問構建網站的代碼，然後進行所需的更改。它還具有一個網絡工具，可以幫助開發人員了解和模擬網站的行為如何根據互聯網而變化。

網絡工具是為開發人員優化網頁而構建的。人們可以使用各種內置工具來監視其工具網頁對互聯網的響應方式。它確保資源始終被下載。不僅如此，它還會檢查請求參數和從服務器 API 收到的響應。

以下是兩種打開方式開發工具。

1. 進入網頁並點擊F12。如果這是您第一次，系統會要求您單擊打開開發工具按鈕。
2. 右鍵單擊網頁，然後單擊“檢查”。

打開 DevTools 後，單擊網絡選項卡訪問網絡工具。如果沒有“網絡”選項卡，請單擊箭頭 (>>) 按鈕，然後選擇“網絡”。

在了解用戶可用的工具之前，我們首先需要對網絡工具的用戶界面進行一些概述。 UI分為三個部分，讓我們逐一討論。

1. 網絡工具的最頂部有一個工具欄，用於對工具進行更改並添加網絡過濾器。
2. 在頂部工具欄下方，我們有一個概覽圖。從這裡我們可以檢查流量並過濾網絡請求。
3. 最後，我們有一個網絡日誌部分。它包含各個網絡活動的記錄並允許您檢查它們。

我們將使用演示網頁來了解網絡工具及其行為。要訪問它，請轉至microsoftedge.github.io。

您可以使用 Microsoft Edge 的 F12 開發人員工具中的網絡工具執行多種操作。我們在下面列出了它們，因此請查看您認為有用的那些。

1. 記錄網絡活動
2. 查看更多信息
3. 驗證連接速度是否較慢
4. 捕獲屏幕截圖
5. 檢查源詳細信息
6. 搜索網絡標頭和響應
7. 過濾資源
8. 阻止請求

讓我們詳細談談它們。

1]記錄網絡活動

首先，我們有日誌網絡活動監視器。顧名思義，該工具跟踪頁面引起或經歷的所有網絡活動。網絡日誌中有不同的行。它們都代表一個資源，並且默認按時間順序列出。這裡，列表頂部的資源通常是 HTML 文檔。而且，無論我們最後的請求是什麼，都將記錄在列表的底部。

以下是網絡日誌的列。

• 姓名：顯示請求的名稱及其擴展名。
• 地位：顯示所請求響應的 HTTP 狀態代碼。
• 類型：顯示資源類型。
• 發起人：顯示收到請求的原因。
• 時間：顯示請求的持續時間。
• 瀑布：以圖形方式表示請求的所有階段。

每當發出請求時，每一列都會被寫入。

現在，了解正在記錄的內容。轉到前面提到的演示網頁，然後單擊獲取數據按鈕。然後，您可以檢查網絡日誌，因為列表底部將有一個 JSON 文件條目，或者如果您是第一次使用該網頁，這將是唯一的條目。

2]查看更多信息

網絡工具中的列配置為隱藏大部分信息。這樣做是為了防止屏幕變得混亂。您只需右鍵單擊任意列並選擇域即可查看更多信息。這將添加顯示響應域的域列。要檢查整個 URL，請將鼠標懸停在特定條目的名稱上，您將能夠檢查其 URL。

3]驗證較慢的連接

使用您網站的用戶的互聯網連接速度很可能不如您。這就是為什麼，優化網頁以實現最慢的連接應該是我們的首要責任。要檢查我們的網站在此參數上的優化程度，我們應該刺激較慢的連接。請按照下面給出的演示來了解如何執行相同的操作。

• 進入節流下拉菜單；最初，它將被標記為“無節流”。
• 選擇3G 速度慢。
  

• 現在，長按網頁上的刷新按鈕，就會標記為。
• 最後，選​​擇清空緩存並硬刷新。

刷新網頁後查看時間柱子。您可以看到網站處理請求所需的時間存在顯著差異。

4]捕獲屏幕截圖

截圖記錄了某個時刻的網頁和請求。您只需單擊網絡工具窗口第二行中的齒輪按鈕即可訪問屏幕截圖，然後選中與捕獲屏幕截圖。您將看到三個縮略圖。單擊他們可以查看他們的活動。

5]檢查來源詳細信息

我們還可以查看來源的詳細信息來了解更多信息。做同樣的事情非常簡單。點擊網絡教程從網絡日誌的名稱列。這將打開一個帶有多個選項卡的新窗口。您可以點擊預覽要了解您的頁面的外觀，請訪問回覆了解 HTML 代碼，然後定時了解網絡活動。

6]搜索網絡標頭和響應

您可以在網絡工具中找到搜索欄，可用於搜索網絡標頭和響應。要訪問它，請單擊“搜索”按鈕，該按鈕是一個放大鏡。這將打開左側面板。您可以在代碼中搜索您需要的任何內容。

7]過濾資源

如果您想整理工作窗口，請嘗試網絡工具的“過濾器”選項。過濾器按鈕看起來像或者會有一個過濾器搜索欄。您可以單擊工具欄中的同一按鈕來觸發開始過濾。

你可以按字符串、正則表達式或屬性過濾。因此，舉例來說，如果您只想查看 PNG 圖像，只需在過濾器欄中右擊“png”即可。

一個也可以按資源類型過濾。例如，如果單擊 CSS 按鈕，則所有其他資源類型都將被過濾掉。

8]阻止請求

有時，由於一些技術故障，某些頁面資源將不可用。我們需要確保我們的頁面看起來仍然美觀並執行所需的任務。為此，我們需要執行以下步驟。

1. 打Ctrl + Shift + P（適用於 Windows 和 Linux）和Command + Shift + P（適用於 macOS）。
2. 現在，輸入堵塞並選擇顯示請求阻止。
3. 然後勾選旁邊的框啟用網絡請求阻止並單擊(+)按鈕。

您可以從這裡阻止您想要的請求。

這些是人們可以使用網絡工具做的各種事情。

有關的：

開發者工具中的網絡在哪裡？

在開發者工具中訪問網絡工具非常容易。您所要做的就是首先打開開發人員工具，然後單擊箭頭 (>>) 按鈕。有各種選項卡。單擊網絡，它將顯示網絡工具。

提示：看看你可以怎樣做。

Edge 開發工具與 Chrome 相同嗎？

是的，它們是一樣的。這兩種瀏覽器都使用相同的 Chromium 瀏覽器引擎，因此它們在開發人員工具中提供相同的功能集。但是，您可以使用 Visual Studio Code 的 Microsoft Edge DevTools 擴展，它允許您在 VS Code 中使用瀏覽器元素和網絡工具。

如何使用 EDGE 開發工具？

打開 Microsoft Edge Web 瀏覽器以訪問開發人員工具。單擊鍵盤上的 F12。單擊“更多工具”圖標，然後單擊“更多工具”>“開發人員工具”（如果按 Ctrl+Shift+I）或單擊“設置和更多省略號”圖標作為選項。