您是否曾經想臨時編輯一個網頁，看看它在特定樣式下的外觀如何？
可以使用瀏覽器中已有的名為“檢查”或“檢查元素”的工具來編輯文本、顏色等。對于所有 DIY 用戶來說，當他們發現這一點時，他們的夢想成真了。
在本文中，我們將向您展示 Inspect Element 的基礎知識以及如何在您的 wordpress 網站中使用它。
什么是檢查元素或開發人員工具？
Google chrome 和 Mozilla firefox 等現代網絡瀏覽器具有內置工具，允許網絡開發人員調試錯誤。
這些工具顯示頁面的 html、css和JavaScript代碼以及瀏覽器如何執行代碼。
使用檢查元素工具，您可以編輯任何網頁的 HTML、CSS 或 JavaScript 代碼并實時查看更改（僅在您的計算機上）。
對于 DIY 網站所有者來說，這些工具可以幫助您預覽網站設計的外觀，而無需為每個人進行更改。
對于作家來說，這些工具非常棒，因為您可以在截取屏幕截圖時輕松更改個人識別信息，而無需完全模糊項目。
對于支持代理來說，這是識別可能導致圖庫無法加載或滑塊無法正常工作的錯誤的好方法。
我們只是觸及了用例的表面。檢查元素確實很強大。
在本文中，我們將重點關注 Google Chrome 中的 Inspect Element，因為這是我們選擇的瀏覽器。Firefox 有自己的開發工具，也可以通過從瀏覽器菜單中選擇檢查元素來調用。
準備好？讓我們開始吧。
視頻教程
https://www.youtube.com/embed/9oYhq84ZqaE?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent訂閱 WPBeginner
https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-Static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com
如果您不喜歡該視頻或需要更多說明，請繼續閱讀。
啟動 Inspect Element 并找到代碼
您可以通過按鍵盤上的 CTRL + Shift + I 鍵來啟動檢查元素工具。或者，您可以單擊網頁上的任意位置，然后從瀏覽器菜單中選擇檢查元素。
您的瀏覽器窗口將分成兩部分，下面的窗口將顯示網頁的源代碼。
開發者工具窗口進一步分為兩個窗口。在左側，您將看到該頁面的 HTML 代碼。在右側窗格中，您將看到 CSS 規則。
當您將鼠標移到 HTML 源代碼上時，您將看到受影響的區域在網頁上突出顯示。
您還會注意到 CSS 規則發生更改，以顯示您正在查看的元素的 CSS。
您還可以將鼠標指針指向網頁上的某個元素，右鍵單擊并選擇檢查元素。您指向的元素將在源代碼中突出顯示。
在 Inspect Element 中編輯和調試代碼
檢查元素窗口中的 HTML 和 CSS 都是可編輯的。您可以雙擊 HTML 源代碼中的任意位置并根據需要編輯代碼。
您還可以雙擊并編輯 CSS 窗格中的任何屬性和樣式。
要添加自定義樣式規則，請單擊 CSS 窗格頂部的 + 圖標。
當您對 CSS 或 HTML 進行更改時，這些更改將立即反映在瀏覽器中。
這些更改將保存在您瀏覽器的臨時內存中，不會影響您的網站。
請注意，您在此處所做的任何更改都不會保存在任何地方。Inspect element 是一個調試工具，它不會將您的更改寫回服務器上的文件。這意味著如果刷新頁面，所有更改都將消失。
要實際進行更改，您必須編輯 WordPress 主題的樣式表或相關模板以添加要保存的更改。
在開始使用檢查元素工具編輯現有 WordPress 主題之前，請確保通過創建子主題保存所有更改。
輕松查找網站上的錯誤
檢查元素有一個名為控制臺的區域，它顯示您網站上存在的所有錯誤。當嘗試調試錯誤或請求插件作者的支持時，查看此處以了解錯誤是什么總是很有幫助的。
例如，如果您是OptinMonster 客戶，想知道為什么您的 optin 未加載，那么您可以輕松找到問題“您的頁面 slug 不匹配”。
如果您的共享欄無法正常工作，那么您會看到存在 JavaScript 錯誤。
Inspect Element console 和SupportAlly等工具可幫助您獲得更好的客戶支持，因為技術支持團隊喜歡主動提供有關問題的詳細反饋的客戶。
我們希望本文能幫助您了解 Inspect Element 的基礎知識以及如何在您的 WordPress 網站中使用它。您可能還想查看WordPress 默認生成的 CSS 備忘單，以加快您的主題開發技能。
