WordPress 从头开始
您是否曾经想要临时编辑网页，看看它在特定颜色、字体、样式等下的外观如何。可以使用浏览器中已有的名为 Inspect Element 的工具来实现。对于所有 DIY 用户来说，当他们发现这一点时，他们的梦想成真了。在本文中，我们将向您展示检查元素的基础知识以及如何在您的 WordPress 网站中使用它。
您是否曾经想临时编辑网页以查看特定颜色、字体、样式等的外观。您的浏览器中已存在名为 Inspect Element 的工具。这对所有 DIY 用户来说都是梦想成真。在本文中，我们将向您展示检查元素的基础知识以及如何在 WordPress 网站中使用它。
什么是检查元素或开发人员工具？ （What is Inspect Element or Developer Tools?）
Modern web browsers like Google Chrome and Mozilla Firefox has built-in tools which allow web developers to debug errors. These tools show the HTML, CSS, and JavaScript code for a page and how the browser executes the code.
诸如Google Chrome和Mozilla Firefox之类的现代网络浏览器具有内置工具，可让网络开发人员调试错误。 这些工具显示页面HTML， CSS和JavaScript代码以及浏览器如何执行代码。
使用 Inspect Element 工具，您可以编辑任何网页的 HTML、CSS 或 JavaSCript 代码并实时查看您的更改（仅在您的计算机上）。
使用 Inspect Element 工具，您可以编辑任何网页 HTML、CSS 或 JavaSCript 代码并实时查看您的更改（仅在您的计算机上）。
对于 DIY 网站所有者来说，这些工具可以帮助您预览网站设计的外观，而无需实际为每个人进行更改。
对于 DIY 网站所有者来说，这些工具可以帮助您预览网站设计的外观，而无需实际对每个人进行更改。
对于作家来说，这些工具非常棒，因为您可以在截取屏幕截图时轻松更改个人识别信息，而无需完全模糊项目。
对于作者来说，这些工具非常有用，因为您可以在截取屏幕截图时轻松更改个人身份信息，而不必完全模糊该项目。
对于支持代理来说，这是识别可能导致图库无法加载或滑块无法正常工作的错误的好方法。
对于支持代理来说，这是识别可能导致图库无法加载或滑块无法正常工作的错误的好方法。
我们只是触及了用例的表面。检查元素确实很强大。
我们只是触及了用例的表面。检查元素确实很强大。
在本文中，我们将重点关注 Google Chrome 中的 Inspect Element，因为这是我们选择的浏览器。 Firefox 有自己的开发工具，也可以通过从浏览器菜单中选择检查元素来调用。
在本文中，我们将重点介绍 Google Chrome 中的 Inspect Element，因为这是我们选择的浏览器。 Firefox 有自己的开发人员工具，也可以通过从浏览器菜单中选择检查元素来调用该工具。
准备好？让我们开始吧。
准备？开始吧。
影片教学 （Video Tutorial）
如果您不喜欢该视频或需要更多说明，请继续阅读。
如果您不喜欢该视频或需要更多说明，请继续阅读。
启动检查元素并找到代码 （Launching Inspect Element and Locating The Code）
您可以通过按键盘上的 CTRL + Shift + I 键来启动检查元素工具。或者，您可以单击网页上的任意位置，然后从浏览器菜单中选择检查元素。
您可以通过按键盘上的 CTRL + Shift + I 键来启动检查元素工具。或者，您可以单击网页上的任意位置，然后从浏览器菜单中选择“检查元素”。
您的浏览器窗口将分成两部分，下面的窗口将显示网页的源代码。
您的浏览器窗口将分为两个窗口，下部窗口显示网页的源代码。
开发者工具窗口进一步分为两个窗口。在左侧，您将看到该页面的 HTML 代码。在右侧窗格中，您将看到 CSS 规则。
开发人员工具窗口进一步分为两个窗口。您将在左侧看到该页面的 HTML 代码。在右侧窗格中，您将看到 CSS 规则。
当您将鼠标移到 HTML 源代码上时，您将看到受影响的区域在网页上突出显示。您还会注意到 CSS 规则发生更改，以显示您正在查看的元素的 CSS。
当您将鼠标移到 HTML 源代码上时，您将看到受影响的区域在网页上突出显示。您还会注意到 CSS 规则发生变化，以显示您正在查看的元素的 CSS。
您还可以将鼠标指针指向网页上的某个元素，右键单击并选择检查元素。您指向的元素将在源代码中突出显示。
您还可以将鼠标指针指向网页上的元素，右键单击并选择“检查元素”。您指向的元素将在源代码中突出显示。
在检查元素中编辑和调试代码 （Editing and Debugging Code in Inspect Element）
检查元素窗口中的 HTML 和 CSS 都是可编辑的。您可以双击 HTML 源代码中的任意位置并根据需要编辑代码。
检查元素窗口中的 HTML 和 CSS 都是可编辑的。您可以双击 HTML 源代码中的任意位置并根据需要编辑代码。
您还可以双击并编辑 CSS 窗格中的任何属性和样式。要添加自定义样式规则，请单击 CSS 窗格顶部的 + 图标。
您还可以双击并编辑 CSS 窗格中的任何属性和样式。要添加自定义样式规则，请单击 CSS 窗格顶部的 + 图标。
当您对 CSS 或 HTML 进行更改时，这些更改将立即反映在浏览器中。
当您更改 CSS 或 HTML 时，这些更改会立即反映在浏览器中。
请注意，您在此处所做的任何更改都不会保存在任何地方。 Inspect element 是一个调试工具，它不会将您的更改写回服务器上的文件。这意味着如果刷新页面，所有更改都将消失。
请注意，您在此处所做的任何更改都不会保存在任何地方。 Inspect 元素是一种调试工具，不会将更改写回服务器上的文件。这意味着如果刷新页面，所有更改都将消失。
要实际进行更改，您必须编辑 WordPress 主题的样式表或相关模板以添加要保存的更改。
要实际进行更改，您必须编辑 WordPress 主题的样式表或相关模板以添加要保存的更改。
Before you start editing your existing WordPress theme using Inspect Element tool, make sure you that you save all your changes by creating a 儿童主题.
在使用Inspect Element工具开始编辑现有的WordPress主题之前，请确保通过创建副标题来了保存所有更改。
轻松找到您网站上的错误 （Easily Find Errors On Your Site）
Inspect element has an area called Console which shows all the errors that exist on your website. When trying to debug an error or 请求插件作者的支持, it’s always helpful to look here to see what the errors are.
Inspect元素具有一个称为Console的区域，该区域显示您的网站上存在的所有错误。 当尝试调试错误或当向插件作者请求支持时 ，查看此处的错误内容总是很有帮助的。
For example, if you were an OptinMonster 客户 wondering why your optin is not loading, then you can easily find the problem “your page slug does not match”.
例如，如果您是OptinMonster 客户，想知道为什么未加载选择参加 ，那么您可以轻松地找到“您的页面信息不匹配”的问题。
如果您的共享栏无法正常工作，那么您会看到存在 JavaScript 错误。
如果您的共享栏无法正常工作，您会看到存在 JavaScript 错误。
Tools like the Inspect Element Console and 支持盟友 help you get better customer support because the technical support team love customers who take initiative in providing detailed feedback of the issue.
Inspect Element Console和支持盟友类的工具可帮助您获得更好的客户支持，因为技术支持团队喜欢主动提供有关问题详细反馈的客户。
We hope this article helped you learn the basics of inspect element and how to use it with your WordPres site. You may also want to take a look at the WordPress 默认生成 CSS 备忘单 to speed up your theme development skills.
我们希望本文能帮助您学习inspect元素的基础知识以及如何在WordPres网站上使用它。 您可能还想看看WordPress一代的默认 CSS 备忘单，以加快您的主题开发技能。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and 谷歌+.
如果您喜欢这篇文章，请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和谷歌+上找到我们。
翻译自: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
WordPress 从头开始