检查元素基础：DIY用户定制WordPress
你是否曾想过暂时编辑网页，看看特定样式的效果？利用浏览器自带的检查元素工具，你可以编辑网页的HTML和CSS样式，而无需保存任何更改。在本文中，我们将向你展示如何在WordPress站点上使用检查工具。
什么是检查工具？
现代网页浏览器如Google Chrome、Firefox、Safari和Microsoft Edge拥有内置工具，允许网页开发人员调试错误。这些工具显示网页的HTML、CSS和JavaScript代码，以及浏览器如何执行这些代码。你可以通过访问任何页面并选择右键菜单中的‘检查’来打开这些开发者工具。
使用检查工具，你可以编辑任何网页的HTML、CSS或JavaScript代码，并看到你的更改出现在屏幕上（我们稍后会展示如何操作）。这些更改不会影响原始网页，当你关闭窗口或重新加载页面时，它们会消失。这使得DIY网站所有者和开发人员能够进行测试和调试。
你可以用CSS应用你的样式，看看它们的效果。技术写作者可以编辑HTML以改变屏幕上的文本，隐藏个人身份信息。开发人员可以用它查找常见的WordPress错误、404错误、调试JavaScript问题等。
这些开发者工具功能强大，对高级用户极其有用。在本文中，我们将专注于Google Chrome中的检查工具，因为这是最常用的浏览器。其他浏览器如Firefox、Safari和Microsoft Edge也有自己的开发者工具，可以通过浏览器菜单中的检查元素选项调用。
启动检查工具并定位代码
你可以通过按键盘上的CTRL + Shift + I（MacOS上为Command + Options + I）启动检查工具。你也可以在网页上任意位置点击右键，选择‘检查’。你还可以从浏览器的主菜单中访问该工具。在Google Chrome中，点击右上角的三点菜单，然后依次选择 更多工具 » 开发者工具。
你的浏览器窗口将分成两部分。一边是你正在查看的页面，另一边是HTML代码和CSS规则。检查窗口的位置可以更改，点击三点菜单并选择‘停靠侧边’位置即可。将鼠标移动到HTML源代码上时，网页上受影响的区域会被高亮显示。
在检查元素中编辑和调试代码
检查元素窗口中的HTML和CSS都是可编辑的。你可以双击HTML源代码中的任意位置，随意编辑代码。你也可以双击并编辑CSS面板中的任何属性和样式。要添加自定义的样式规则，点击CSS面板顶部的+图标。随着CSS或HTML的更改，这些更改会立即反映在浏览器中。这些更改只会保存在你浏览器的临时内存中，不会影响你的网站。重要提示：这里进行的任何更改都不会保存。检查元素是一个调试工具，它不会将更改写回到服务器上的文件。如果你刷新页面，所有更改都会消失。要使更改生效，你需要向你的主题中添加自定义CSS或编辑相关模板以保存更改。开始使用检查元素工具编辑WordPress主题之前，请确保创建一个WordPress备份。
轻松查找你网站上的错误
检查工具有一个名为控制台的区域，显示页面加载时发生的错误。在尝试调试错误或请求插件作者的支持时，查看这里是否有错误或警告总是有帮助的。使用控制台标签，你可以排除几种常见问题。例如，你可以做以下几件事：找出为什么你添加的图像没有显示；为什么插件或主题行为异常；哪个插件或浏览器扩展可能导致冲突。即使是非技术用户也可以查看这里，找到问题的线索。比如，如果你是OptinMonster客户，想知道为什么你的Optin未加载，你可以轻松找到问题‘你的页面别名不匹配’。像检查元素控制台和SupportAlly这样的小工具帮助你获得更好的客户支持。技术支持团队喜欢那些主动提供详细问题反馈的客户。
如何在移动设备上使用检查工具（iOS或Android）
移动浏览器默认未启用开发者选项。制造商认为大多数移动用户不会使用它。要在移动设备上排除故障并使用检查工具，最简单的方法是使用桌面浏览器中的移动仿真功能。然后，你可以从顶部选择一个设备或屏幕尺寸。Chrome将模拟该屏幕大小。
常见问题
以下是用户关于如何使用检查工具的常见问题。
1. 我可以在任意网站上使用检查工具吗？
是的，你可以在任意网站上使用检查工具。只需右键点击并从浏览器菜单中选择检查工具即可查看任何网站的代码。研究其他网站的代码是学习和提升你自己CSS/HTML技能的快捷方式。
2. 为什么在我的浏览器中找不到检查工具？
Google Chrome可能会隐藏右键菜单中的检查选项，特别是当多个扩展添加各自的选项时。然而，你总是可以通过点击浏览器屏幕右上角的三点菜单，选择 更多工具 » 开发者工具 打开检查工具。你也可以使用键盘上的CTRL + Shift + I（Mac上为Command + Options + I）打开检查工具。
额外资源
作为一个DIY WordPress初学者，能够对你的网站进行更改是令人兴奋的。多年来，我们见过无数没有网站建设经验的初学者成为该领域的专业人士。
如果你想进一步探索如何利用检查工具在WordPress站点上完成更多操作，以下资源是一个很好的起点:
如何自定义你的WordPress主题 – 本指南向初学者展示了如何一步步自定义你的WordPress主题。
如何正确添加自定义CSS到WordPress – 本教程展示了多种简单方法向WordPress添加自定义CSS。
如何优化WordPress中的CSS交付 – 过多的单个CSS文件可能会降低性能。该教程展示了如何优化CSS交付以提升WordPress速度。
默认WordPress生成的CSS备忘单 – 本指南展示了许多默认情况下WordPress添加到不同元素的CSS类。你可以在自定义CSS代码中使用这些CSS类来改变这些元素的外观。
我们希望本文帮助你了解检查元素的基础知识以及如何在你的WordPress站点上使用它。你也可以查看默认WordPress生成的CSS备忘单，以加快你的主题开发技能。如果你喜欢这篇文章，请订阅我们的YouTube频道获取WordPress视频教程。你也可以在Twitter和Facebook上找到我们。
