如何正確檢查網站

無論您是測試項目新功能的開發人員，還是想要仔細研究 HTML 和 CSS 代碼的設計人員，檢查網站及其元素的原因有很多。 然而，知道從哪裡開始可能看起來很混亂（起初）。

幸運的是，您可以使用各種簡單的工具、技術和技巧來正確檢查 Web 元素。 此外，幾乎所有瀏覽器和操作系統 (OS) 都有選項。

在這篇文章中，我們將討論您可能想要檢查網站的原因。 然後，我們將向您介紹一些您可以使用的最佳工具，然後再解釋要查找的內容。 讓我們跳進去吧！

為什麼要檢查網站

您可能想要檢查網站的原因有多種。 例如，您可能需要解決問題或查找特定信息。

在瀏覽器中檢查網頁元素讓 WordPress 開發人員、設計師和數字營銷人員可以操縱網頁的外觀並測試更改。 開發人員或測試人員更有可能使用此功能來調試特定元素、進行佈局測試或執行實時 CSS 編輯。

檢查網頁元素對網頁設計師也很有幫助。 如果您想快速測試顏色變化或新字體，您可以在不深入研究 CSS 代碼的情況下進行。

此外，數字營銷人員可以使用 Inspect Element 工具來查看某些更改將如何影響網頁的整體外觀。 例如，您可能想嘗試新的號召性用語 (CTA) 按鈕或不同的配色方案。 您可以使用工具來複製更新，而無需對您的實時站點進行任何更改。

最後，檢查網站是了解網站構建和功能的絕佳方式。 如果您有興趣了解有關 Web 開發的更多信息，檢查網站是一個很好的入門方式。

檢查網站的最佳工具和擴展

您可以使用許多不同的工具和擴展程序來檢查網站。 這裡有一些最受歡迎的選項！

檢查元素

檢查元素工具是最常見的選項。 它使您可以仔細查看構成網頁的 HTML 和 CSS 代碼。 您還可以使用它來實時編輯 CSS 並查看更改後的外觀，而無需進行任何永久更改。

儘管它可以作為 Google Chrome 擴展程序使用，但 Inspect Element 工具也隨所有主要瀏覽器一起提供。 該功能是 Chrome 開發人員工具的一部分，Chrome 開發人員工具是一組程序，可讓您檢查和編輯網頁的 HTML 和 CSS 代碼。

要訪問 Google Chrome 開發者工具，只需按Ctrl+Shift+I （或在 Mac 上按 Cmd+Opt+I ）。 您還可以通過打開 Chrome 菜單並選擇更多工具>開發人員工具來訪問這些工具：

您可以在其他瀏覽器中訪問相同的開發人員工具。 例如，Firefox Developer Tools 具有類似的功能。 要訪問這些工具，只需按Ctrl+Shift+I （或在 Mac 上按 Cmd+Opt+I ）。 您還可以通過打開 Firefox 菜單並選擇Web Developer > Inspector 來找到這些工具。

此外，Safari Developer Tools 使您能夠在 Mac 設備上檢查和編輯網頁的 HTML 和 CSS 代碼。 只需按Cmd+Opt+I 。 您還可以打開 Safari 菜單並在菜單欄中選擇首選項>高級> 顯示開髮菜單。

瀏覽器堆棧

另一個可用於測試網站的平台是 BrowserStack：

這個基於雲的測試平台適用於所有主要瀏覽器和設備。 註冊免費試用後，您可以導航到 Live 儀表板並選擇您的操作系統。

然後，您可以選擇您喜歡的瀏覽器版本以在瀏覽器中啟動實時會話。 最後，您可以像通過 Inspect Element 一樣瀏覽要檢查的網站。

如何檢查網站

讓我們來看看如何使用 Inspect Element 工具檢查網站。 首先只需右鍵單擊任何網頁元素並從上下文菜單中選擇“檢查” ：

這將在您的瀏覽器中打開檢查元素工具。 打開該工具後，您就可以開始處理 HTML 和 CSS 代碼，看看它會如何影響網頁的外觀。

例如，您可以更改元素的顏色、添加或刪除類，甚至更改元素的位置。 您還可以使用頂部的搜索字段來搜索一段文本或圖像。

當然，您使用 Inspect Element 所做的任何更改都只是暫時的。 當您刷新頁面或關閉瀏覽器時，它們不會被保存。 但是，這是在不永久更改您的網站的情況下試用特定更改外觀的好方法。

您還可以通過按Ctrl+Shift+I （或 Mac 上的Cmd+Opt+I ）打開Developer tools來訪問該工具。 然後，單擊窗口頂部的“元素”選項卡：

最後，您還可以通過打開 Chrome 菜單並選擇我們之前討論過的更多工具>開發人員工具來訪問 Inspect Element。

如何更改元素

如果要更改網頁上的元素，請右鍵單擊它並選擇Inspect 。 在打開的元素面板中，找到您要更改的部分並雙擊它。

當您打開“元素”框時，您可以使用面板左上角的“檢查”光標圖標來突出顯示要修改的元素的源代碼。 當您右鍵單擊突出顯示的代碼時，選擇Edit as HTML ：

該框將展開，然後您可以更改文本。 要預覽更改，您可以取消選擇該元素。 您也可以雙擊文本進行編輯。

您還可以使用此技術更改元素的 CSS 代碼。 為此，請右鍵單擊它並選擇Inspect 。 在元素面板中，找到要更改的元素並選擇element.style屬性。 然後您可以在大括號中添加您的代碼或聲明。

如何隱藏或刪除元素

您可能還想隱藏或刪除網頁上的元素。 找到要隱藏或刪除的元素後，右鍵單擊它並選擇檢查以啟動檢查元素工具。

在這裡，右鍵單擊元素，然後選擇刪除元素或隱藏元素選項：

刪除按鈕刪除文檔對像模型 (DOM) 元素。 隱藏按鈕將簡單地隱藏元素，但它仍將位於 DOM 中。

如何檢查 CSS 類

有幾種方法可以檢查 CSS 類。 然而，最簡單的方法是右鍵單擊要查看的元素並選擇Inspect 。 然後打開Styles選項卡可以看到它的 CSS 樣式：

請注意，此選項卡僅向您顯示應用的內聯樣式，而不顯示來自樣式表的樣式。

如果您想查看應用於某個元素的所有 CSS 樣式，您可以使用Computed選項卡。 它向您展示了應用於元素的所有 CSS 樣式，包括來自樣式表的樣式：

完成網頁檢查後，只需關閉“檢查元素”工具即可。 您的更改不會被保存，因此您不必擔心不小心破壞某些東西。

檢查網站時要注意什麼

無論您使用哪種方法訪問 Inspect Element，您都會看到相同的界面。 它由兩個面板組成：HTML 面板和 CSS 面板。

HTML 窗格顯示網頁的結構。 您可以看到各種元素是如何嵌套和關聯的。

CSS 窗格向您顯示應用於所選元素的樣式。 您還可以編輯 CSS 規則以查看您的更改將如何影響元素的外觀。

如果您要在網站上查找特定內容，無論是某段文本還是圖像，您都可以使用 Inspect Element 來幫助您找到它。 它有一個搜索字段，您可以在其中查找特定元素。

當您檢查網站時，需要注意以下幾點：

• HTML：定義網頁結構的代碼。 注意元素的組織方式以及它們如何相互作用。
• CSS：定義網頁樣式的代碼。
• JavaScript ：定義網頁行為的代碼。 它影響元素如何交互以及頁面如何響應用戶輸入。
• 設計：網站的整體外觀。 它會影響佈局的用戶友好程度以及它與網站目的的契合程度。
• 內容：網站的文本、圖像和其他媒體。

檢查網站時應該尋找什麼主要取決於您是設計師、開發人員還是數字營銷人員。 正如我們之前所討論的，Inspect Element 工具可以幫助您處理從設計測試到故障排除問題的所有事情。

結論

Inspect Element 對於設計人員和開發人員來說是一項有價值的功能。 您可以使用它來查看和編輯網頁的 HTML 和 CSS。 當您想更改正在處理的網頁或查看其編碼方式時，此工具會很有用。

大多數 Web 瀏覽器都提供 Inspect Element。 您可以通過右鍵單擊網頁並從菜單中選擇“檢查”來訪問它。 打開檢查窗口後，您將看到網頁的 HTML 和 CSS 代碼，並可以進行各種更改。

您在網站管理或優化方面需要幫助嗎？ 了解 WP Engine 如何幫助處理從 WordPress 託管到站點和客戶管理的所有問題！