您是否曾经想临时编辑一个网页，看看它在特定样式下的外观如何？
可以使用浏览器中已有的名为“检查”或“检查元素”的工具来编辑文本、颜色等。对于所有DIY用户来说，当他们发现这一点时，他们的梦想成真了。
在本文中，我们将向您展示InspectElement的基础知识以及如何在您的WordPress网站中使用它。
什么是检查元素或开发人员工具？
GoogleChrome和MozillaFirefox等现代网络浏览器具有内置工具，允许网络开发人员调试错误。
这些工具显示页面的HTML、CSS和JavaScript代码以及浏览器如何执行代码。
使用检查元素工具，您可以编辑任何网页的HTML、CSS或JavaSCript代码并实时查看更改（仅在您的计算机上）。
对于DIY网站所有者来说，这些工具可以帮助您预览网站设计的外观，而无需为每个人进行更改。
对于作家来说，这些工具非常棒，因为您可以在截取屏幕截图时轻松更改个人识别信息，而无需完全模糊项目。
对于支持代理来说，这是识别可能导致图库无法加载或滑块无法正常工作的错误的好方法。
我们只是触及了用例的表面。检查元素确实很强大。
在本文中，我们将重点关注GoogleChrome中的InspectElement，因为这是我们选择的浏览器。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=https://www.yaozhongpeng.com/static/image/nopic320.png>
如果您不喜欢该视频或需要更多说明，请继续阅读。
启动InspectElement并找到代码
您可以通过按键盘上的CTRL+Shift+I键来启动检查元素工具。或者，您可以单击网页上的任意位置，然后从浏览器菜单中选择检查元素。
您的浏览器窗口将分成两部分，下面的窗口将显示网页的源代码。
开发者工具窗口进一步分为两个窗口。在左侧，您将看到该页面的HTML代码。在右侧窗格中，您将看到CSS规则。
当您将鼠标移到HTML源代码上时，您将看到受影响的区域在网页上突出显示。
您还会注意到CSS规则发生更改，以显示您正在查看的元素的CSS。
您还可以将鼠标指针指向网页上的某个元素，右键单击并选择检查元素。您指向的元素将在源代码中突出显示。
在InspectElement中编辑和调试代码
检查元素窗口中的HTML和CSS都是可编辑的。您可以双击HTML源代码中的任意位置并根据需要编辑代码。
您还可以双击并编辑CSS窗格中的任何属性和样式。
要添加自定义样式规则，请单击CSS窗格顶部的+图标。
当您对CSS或HTML进行更改时，这些更改将立即反映在浏览器中。
这些更改将保存在您浏览器的临时内存中，不会影响您的网站。
请注意，您在此处所做的任何更改都不会保存在任何地方。Inspectelement是一个调试工具，它不会将您的更改写回服务器上的文件。这意味着如果刷新页面，所有更改都将消失。
要实际进行更改，您必须编辑WordPress主题的样式表或相关模板以添加要保存的更改。
在开始使用检查元素工具编辑现有WordPress主题之前，请确保通过创建子主题保存所有更改。
轻松查找网站上的错误
检查元素有一个名为控制台的区域，它显示您网站上存在的所有错误。当尝试调试错误或请求插件作者的支持时，查看此处以了解错误是什么总是很有帮助的。
例如，如果您是OptinMonster客户，想知道为什么您的optin未加载，那么您可以轻松找到问题“您的页面slug不匹配”。
如果您的共享栏无法正常工作，那么您会看到存在JavaScript错误。
InspectElementConsole和SupportAlly等工具可帮助您获得更好的客户支持，因为技术支持团队喜欢主动提供有关问题的详细反馈的客户。
我们希望本文能帮助您了解InspectElement的基础知识以及如何在您的WordPress网站中使用它。您可能还想查看WordPress默认生成的CSS备忘单，以加快您的主题开发技能。
