你有没有想过暂时编辑一个网页，看看它是如何与特定的颜色，字体，样式等。这是可能的工具已经存在于您的浏览器称为检查元素。 当所有的DIY用户发现这一点时，这是一个梦想成真。 在这篇文章中，我们将向您展示inspect元素的基础知识以及如何将它用于您的WordPress网站。
什么是检查元素或开发人员工具？
像谷歌浏览器和Mozilla Firefox这样的现代浏览器都有内置的工具，可以让网页开发者调试错误。 这些工具显示页面的HTML，CSS和JavaScript代码以及浏览器如何执行代码。
使用Inspect Element工具，您可以编辑任何网页的HTML，CSS或JavaSCript代码，并且只能在您的计算机上查看您的更改。
对于DIY网站所有者来说，这些工具可以帮助您预览网站设计的外观，而不必为每个人做出更改。
对于编写者来说，这些工具非常棒，因为在截取屏幕截图时，您可以轻松更改个人识别信息，而无需完全模糊项目。
对于支持代理，这是一个很好的方式来确定可能导致您的画廊不加载或滑块不能正常工作的错误。
我们只是抓住用例的表面。 检查元素真的很强大。
在本文中，我们将重点关注Google Chrome中的检查元素，因为这是我们选择的浏览器。 Firefox有自己的开发工具，也可以通过从浏览器菜单中选择检查元素来调用。
准备？ 让我们开始吧。
启动检查元素并查找代码
您可以通过按键盘上的CTRL + SHIFT + I键启动检查元素工具。 或者，您可以单击网页上的任意位置，然后从浏览器菜单中选择检查元素。
您的浏览器窗口将被拆分为两个，而较低的窗口将显示网页的源代码。
开发人员工具窗口进一步分为两个窗口。 在左侧，您将看到该页面的HTML代码。 在右侧窗格中，您将看到CSS规则。
当您将鼠标移到HTML源代码上时，您将看到网页上突出显示的受影响区域。 您还会注意到，CSS规则会更改为显示您正在查看的元素的CSS。
您还可以将鼠标指针指向网页上的某个元素，右键单击并选择检查元素。 您指向的元素将在源代码中突出显示。
在检查元素中编辑和调试代码
检查元素窗口中的HTML和CSS都是可编辑的。 您可以在HTML源代码中的任意位置双击并根据需要编辑代码。
您也可以在CSS窗格中双击并编辑任何属性和样式。 要添加自定义样式规则，请单击CSS窗格顶部的+图标。
当您对CSS或HTML进行更改时，这些更改将立即反映在浏览器中。
请注意，您在这里所做的任何更改都不会保存在任何地方。 Inspect元素是一个调试工具，它不会将更改写回到服务器上的文件中。 这意味着如果刷新页面，所有的更改将会消失。
要实际进行更改，您必须编辑WordPress主题的样式表或相关模板以添加要保存的更改。
在使用Inspect Element工具开始编辑现有的WordPress主题之前，请确保您通过创建子主题来保存所有更改。
轻松找到您网站上的错误
检查元素有一个称为控制台的区域，显示您的网站上存在的所有错误。 当试图调试错误或请求插件作者的支持时，在这里查看错误是很有帮助的。
例如，如果您是一位OptinMonster客户，想知道为什么您的optin没有被加载，那么您可以很容易地发现问题“您的页面slu does不匹配”。
如果你的分享栏不能正常工作，那么你可以看到有一个JavaScript错误。
像Inspect Element Console和SupportAlly这样的工具可以帮助您获得更好的客户支持，因为技术支持团队喜欢主动提供问题详细反馈的客户。
我们希望这篇文章能够帮助您了解检查元素的基本知识以及如何在WordPres网站上使用它。 您可能还想看看默认的WordPress生成的CSS备忘单，以加快您的主题开发技能。