如何在 Microsoft Edge 中查看網站源代碼？
已發表: 2021-09-20在 Windows 11 中，微軟終於擺脫了他們臭名昭著的標誌性 Internet Explorer 瀏覽器。 您將只擁有基於 Google Chromium 代碼庫的 Edge。 因此，您會覺得 Edge 瀏覽器在很多方面都與 Google Chrome 相似。 當您想分析網頁的源代碼時，您可以在 Edge 中輕鬆完成，而無需尋找 Chrome 或 Firefox。 在本文中，我們將解釋如何在 Microsoft Edge 瀏覽器中查看 HTML、CSS 和 JavaScript 等網站源代碼。
網站源代碼
通常，網頁是用 HTML 編寫的，並使用不同類型的文件，如 CSS、JavaScript、圖像、視頻等。Edge 等瀏覽器會處理這些 HTML/CSS/JavaScript，並且只向讀者展示可讀的文本和媒體內容。 但是，在許多情況下，您可能需要分析源代碼以獲取更多詳細信息。
- 您是一名開發人員或博主，希望檢查源代碼以進行故障排除。
- 您正在查看的網頁很有吸引力，您想找到頁面上使用的顏色和字體。
- 您希望在實時瀏覽器中編輯源代碼並測試結果，而無需實際修改原始代碼。 例如，您想對標題應用不同的顏色或檢查字體大小。
- 測試頁面的移動響應能力或查找頁面上加載的元素。
在某些情況下，您還可以通過查看源代碼找到網站上使用的主題和插件。 無論是什麼原因，您都可以通過兩種方式分析源代碼。
- 通過直接查看完整的源代碼
- 將檢查元素選項與 Microsoft Edge DevTools 結合使用
讓我們詳細解釋這兩種方法。
查看完整的源代碼
假設您想查找頁面上使用的 CSS 和 JS 文件。 您可以通過查看完整的源代碼輕鬆完成此操作。 在 Edge 中打開頁面，右鍵單擊任何空白區域，然後從上下文菜單中選擇“查看頁面源”。
這將打開一個新頁面，顯示您正在查看的頁面的完整源代碼，如下所示。
您可以找到每個元素的 HTML 代碼、<head> 和 </head> 部分之間的鏈接 CSS 文件、元標記、關閉 body 標記 </body> 之前的鏈接腳本。 儘管這在許多情況下很有用，但您不會找到將哪些 CSS 樣式應用於頁面上的哪些 HTML 元素的詳細信息。 例如，通過查看完整的源代碼，您無法找到標題元素的字體系列。 您必須單擊 .css 或 .min.css 文件鏈接並在該文件中搜索以查找用於標題的樣式。 這是一項艱鉅的任務，因為您不知道標題屬於從 H1 到 H6 的哪個 HTML 標題標籤。 此外，您可能無法通過單獨查看 CSS 來找到為標題標籤應用的自定義 CSS 類。
如今，許多網站將所有 CSS 文件組合在一起，以減少 HTTP 請求的數量並改進緩存。 因此，當頁面的 CSS 文件組合為單個文件時，查看完整的源代碼將無濟於事。 解決方案是將元素的 HTML 和 CSS 一起查看，以便為您提供該特定元素的完整圖片。
檢查 Edge 中的元素選項
您可以使用此選項分析網頁上的任何元素以獲取其 HTML 和 CSS。 要使用它，請啟動 Edge 瀏覽器並打開您要分析的網頁。 您必須打開 Microsoft Edge DevTools（或 Edge Developer Tools）才能開始分析網頁上的元素。 有多種方法可以打開 Edge DevTools。
- 只需右鍵單擊任何空白區域，然後從上下文菜單中選擇“檢查”。
- 您可以在 Windows 中按 F11，這適用於大多數台式機和筆記本電腦型號。 或者，按“Control + Shift + I”鍵打開 Edge 開發人員工具部分。
- 按“Alt + F”打開菜單並轉到“更多工具>開發人員工具”。
默認情況下，Edge 將打開瀏覽器底部的開發人員工具部分，如下所示。
您可以通過拖動並單擊開發人員工具菜單欄上的三點水平圖標來調整高度，以將位置更改為頂部/底部或在新窗口中打開它。
雖然 DevTools 有很多菜單項，但你只需要使用其中的幾個來分析 Edge 中的網站源代碼。 首次打開 DevTools 時會出現一個“歡迎”選項卡，您只需將其關閉即可。
查看源 HTML 和 CSS 代碼
如前所述，網頁上的每個元素都包含帶有 CSS 樣式的源 HTML 代碼。 要查看源 HTML 和 CSS，您必須選擇元素。
- DevTools 菜單中的第一個圖標是元素選擇工具。
- 單擊圖標並將鼠標懸停在要查找源 HTML 的元素上。 例如，讓我們找到“我們的優質服務”標題的詳細信息。
將鼠標懸停在該標題元素上時，Edge 會向您顯示一個包含大部分所需詳細信息的浮動彈出窗口。 你可以發現標題是h3，字體大小是26px，字體系列是Museo500Regular，顏色是#0875c9。 您還可以單擊“元素”選項卡下顯示的元素，並在右側窗格的“樣式”部分下查看類似的 CSS 詳細信息。 使用選擇元素工具，您可以獲得任何元素的 HTML 和 CSS 的完整詳細信息。
在“樣式”部分下，您可以看到每個樣式的 CSS 文件鏈接。 您可以單擊文件鏈接在“來源”選項卡下打開它，我們將在下面的部分中進行解釋。
網頁內容的實時編輯
現在您想對標題應用一些更改並查看它在實時站點上的外觀。 為此，您必須登錄網站的管理員面板並更新源內容。 但是，您會遇到諸如使用不同顏色或字體大小可視化元素等問題。 簡單的方法是編輯“元素”部分下的源 HTML 或“樣式”部分下的 CSS 樣式。
要編輯 HTML，首先選擇“元素”選項卡下的元素並右鍵單擊它。 或者，您可以單擊顯示在所選元素最左側的三點圖標。 您可以通過從上下文菜單中選擇該選項來簡單地刪除或隱藏元素。 如果要編輯，請選擇“編輯為 HTML”選項。
這將打開文本編輯器，您可以在編輯器中更改 HTML 標記或向元素添加其他 CSS 類。 編輯完成後，在 DevTools 中點擊任意空白區域退出編輯。 編輯器將自動驗證和更正標籤。 例如，如果您將起始標記更改為 <h4>，而忘記更改結束標記並保留為 </h3>，它將自動變回原來的 <h3>...</h3> 標記。
同樣，您可以在“樣式”選項卡下更改 CSS 樣式。 例如，將h3標題的字體增加到40px並將顏色更改為#c94608。
您可以在頁面上看到即時預覽，讓您了解修改後的 CSS 和 HTML 的外觀。 但是，更改是暫時的，刷新或重新加載頁面將恢復原始內容。 您可以在後端進行更改以將它們永久應用到網頁上。
網頁錯誤故障排除
DevTools 的主要目的之一是找到阻止頁面正常顯示的瀏覽器問題。 正如你在上面的截圖中看到的，Edge 在 DevTools 菜單欄中顯示了兩個數字（34 和 33）。
- 第一個數字圖標顯示您可以在“控制台”選項卡下看到的瀏覽器控制台錯誤和警告。
- 第二個數字將在 DevTools 內的單獨窗口中顯示未解決的問題（如果有），您可以獨立關閉。
錯誤、警告和提示與標籤一起顯示，以幫助您了解問題。 單擊每個項目可在您的頁面上獲取有關問題和受影響資源的更多詳細信息。 您必須修改代碼並再次重新測試以檢查錯誤是否已修復。
獨立查看源文件
Edge DevTools 中的“Sources”選項卡類似於查看完整的源代碼。 但是，它在結構中分別顯示了從域的每個部分和從外部域加載的資源。 您可以選擇任何文件並在 DevTools 中預覽內容。
當你選擇一個縮小的文件時，Edge 會提示你一個問題“漂亮地打印這個縮小的文件？”。 縮小將刪除文件中的所有空格和換行符，並使其對用戶不可讀。 您可以使用漂亮的打印將縮小的文件轉換為帶有換行符和空格的可讀模式。 您可以單擊“Pretty-print”按鈕或單擊狀態欄中顯示的 { }。
網絡、性能等所有其他項目對於頁面加載時間的高級分析、檢查 HTTP 標頭、查找安全問題和測試 SEO 性能分數都很有用。 完成分析後，您可以關閉 DevTools。
最後的話
最新的 Edge Chromium 版本比任何其他瀏覽器都強大。 您可以使用 Microsoft Edge DevTools 查看網頁源代碼以進行故障排除和設計。 也可以獲得完整的源代碼查看頁面上使用的文件。