您是否曾經(jīng)想臨時(shí)編輯一個(gè)網(wǎng)頁(yè)，看看它在特定樣式下的外觀如何？

可以使用瀏覽器中已有的名為“檢查”或“檢查元素”的工具來(lái)編輯文本、顏色等。對(duì)于所有 DIY 用戶來(lái)說(shuō)，當(dāng)他們發(fā)現(xiàn)這一點(diǎn)時(shí)，他們的夢(mèng)想成真了。

在本文中，我們將向您展示 Inspect Element 的基礎(chǔ)知識(shí)以及如何在您的 wordpress 網(wǎng)站中使用它。

什么是檢查元素或開(kāi)發(fā)人員工具？

Google chrome 和 Mozilla firefox 等現(xiàn)代網(wǎng)絡(luò)瀏覽器具有內(nèi)置工具，允許網(wǎng)絡(luò)開(kāi)發(fā)人員調(diào)試錯(cuò)誤。

這些工具顯示頁(yè)面的 html、css和JavaScript代碼以及瀏覽器如何執(zhí)行代碼。

使用檢查元素工具，您可以編輯任何網(wǎng)頁(yè)的 HTML、CSS 或 JavaScript 代碼并實(shí)時(shí)查看更改（僅在您的計(jì)算機(jī)上）。

對(duì)于 DIY 網(wǎng)站所有者來(lái)說(shuō)，這些工具可以幫助您預(yù)覽網(wǎng)站設(shè)計(jì)的外觀，而無(wú)需為每個(gè)人進(jìn)行更改。

對(duì)于作家來(lái)說(shuō)，這些工具非常棒，因?yàn)槟梢栽诮厝∑聊唤貓D時(shí)輕松更改個(gè)人識(shí)別信息，而無(wú)需完全模糊項(xiàng)目。

對(duì)于支持代理來(lái)說(shuō)，這是識(shí)別可能導(dǎo)致圖庫(kù)無(wú)法加載或滑塊無(wú)法正常工作的錯(cuò)誤的好方法。

我們只是觸及了用例的表面。檢查元素確實(shí)很強(qiáng)大。

在本文中，我們將重點(diǎn)關(guān)注 Google Chrome 中的 Inspect Element，因?yàn)檫@是我們選擇的瀏覽器。Firefox 有自己的開(kāi)發(fā)工具，也可以通過(guò)從瀏覽器菜單中選擇檢查元素來(lái)調(diào)用。

準(zhǔn)備好？讓我們開(kāi)始吧。

視頻教程

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

如果您不喜歡該視頻或需要更多說(shuō)明，請(qǐng)繼續(xù)閱讀。

啟動(dòng) Inspect Element 并找到代碼

您可以通過(guò)按鍵盤(pán)上的 CTRL + Shift + I 鍵來(lái)啟動(dòng)檢查元素工具。或者，您可以單擊網(wǎng)頁(yè)上的任意位置，然后從瀏覽器菜單中選擇檢查元素。

您的瀏覽器窗口將分成兩部分，下面的窗口將顯示網(wǎng)頁(yè)的源代碼。

開(kāi)發(fā)者工具窗口進(jìn)一步分為兩個(gè)窗口。在左側(cè)，您將看到該頁(yè)面的 HTML 代碼。在右側(cè)窗格中，您將看到 CSS 規(guī)則。

當(dāng)您將鼠標(biāo)移到 HTML 源代碼上時(shí)，您將看到受影響的區(qū)域在網(wǎng)頁(yè)上突出顯示。

您還會(huì)注意到 CSS 規(guī)則發(fā)生更改，以顯示您正在查看的元素的 CSS。

您還可以將鼠標(biāo)指針指向網(wǎng)頁(yè)上的某個(gè)元素，右鍵單擊并選擇檢查元素。您指向的元素將在源代碼中突出顯示。

在 Inspect Element 中編輯和調(diào)試代碼

檢查元素窗口中的 HTML 和 CSS 都是可編輯的。您可以雙擊 HTML 源代碼中的任意位置并根據(jù)需要編輯代碼。

您還可以雙擊并編輯 CSS 窗格中的任何屬性和樣式。

要添加自定義樣式規(guī)則，請(qǐng)單擊 CSS 窗格頂部的 + 圖標(biāo)。

當(dāng)您對(duì) CSS 或 HTML 進(jìn)行更改時(shí)，這些更改將立即反映在瀏覽器中。

這些更改將保存在您瀏覽器的臨時(shí)內(nèi)存中，不會(huì)影響您的網(wǎng)站。

請(qǐng)注意，您在此處所做的任何更改都不會(huì)保存在任何地方。Inspect element 是一個(gè)調(diào)試工具，它不會(huì)將您的更改寫(xiě)回服務(wù)器上的文件。這意味著如果刷新頁(yè)面，所有更改都將消失。

要實(shí)際進(jìn)行更改，您必須編輯 WordPress 主題的樣式表或相關(guān)模板以添加要保存的更改。

在開(kāi)始使用檢查元素工具編輯現(xiàn)有 WordPress 主題之前，請(qǐng)確保通過(guò)創(chuàng)建子主題保存所有更改。

輕松查找網(wǎng)站上的錯(cuò)誤

檢查元素有一個(gè)名為控制臺(tái)的區(qū)域，它顯示您網(wǎng)站上存在的所有錯(cuò)誤。當(dāng)嘗試調(diào)試錯(cuò)誤或請(qǐng)求插件作者的支持時(shí)，查看此處以了解錯(cuò)誤是什么總是很有幫助的。

例如，如果您是OptinMonster 客戶，想知道為什么您的 optin 未加載，那么您可以輕松找到問(wèn)題“您的頁(yè)面 slug 不匹配”。

如果您的共享欄無(wú)法正常工作，那么您會(huì)看到存在 JavaScript 錯(cuò)誤。

Inspect Element console 和SupportAlly等工具可幫助您獲得更好的客戶支持，因?yàn)榧夹g(shù)支持團(tuán)隊(duì)喜歡主動(dòng)提供有關(guān)問(wèn)題的詳細(xì)反饋的客戶。

我們希望本文能幫助您了解 Inspect Element 的基礎(chǔ)知識(shí)以及如何在您的 WordPress 網(wǎng)站中使用它。您可能還想查看WordPress 默認(rèn)生成的 CSS 備忘單，以加快您的主題開(kāi)發(fā)技能。