您是否曾经想过临时编辑网页以查看特定颜色,字体和样式的外观? 浏览器中已经存在一个名为“ 检查元素 ”。 对于所有喜欢使用CSS的用户来说,这都是一个梦想成真。

在本教程中,我们将引导您完成项目检查的基础知识以及如何在WordPress网站上使用它。

WordPress元素检查

什么是物品检查工具?

诸如Google Chrome和Mozilla Firefox之类的现代浏览器已经构建了允许Web开发人员调试错误的工具。 这些工具显示页面的HTML,CSS和JavaScript,并显示代码的运行方式。

使用工具“ 检查元素 您可以编辑任何网页的HTML,CSS或JavaScript代码,并实时查看所做的更改(只在您的计算机上).

对于一个所有者 网站Web,这些工具可以帮助您预览特定样式的外观,而无需实际为每个人应用更改。

对于作者而言,这些工具非常棒,因为您可以在截取屏幕快照时轻松更改个人身份信息,而无需实际模糊元素。

对于支持代理,这是识别可能导致您的图库无法加载或阻止其正常运行的错误的好方法。

我们只涉及用例的表面,因为该工具“ 检查元素 真的很强大。

在本文中,我们将重点介绍“ 检查元素 来自Google Chrome,因为它是我们的首选浏览器。 Firefox拥有自己的开发工具,也可以通过选择菜单“ 检查元素 “。

启动“检查元素”工具和代码本地化

您可以运行按这个工具 按Ctrl + Shift + I 在键盘上。 或者,您可以单击网页上的任意位置,然后选择检查浏览器菜单项。

的blogpascher代码inpection

浏览器窗口将一分为二,底部窗口将显示网页的源代码。

开发者工具窗口进一步分为两个窗口。 在您的左侧,您将看到该页面的HTML代码。 在右侧窗格中,您将看到CSS规则。

HTML,CSS代码检查

当您将鼠标移到HTML代码的源上时,将在网页上看到突出显示的区域。 您还将注意到该元素的CSS规则。

HTML元素的CSS规则

您也可以将鼠标指针移到网页上的某个项目上,右键单击并选择“ 检查元素 ”。 您单击的项目将在源代码中突出显示。

代码开发人员和开发人员调试器

元素检查窗口中的HTML和CSS是可编辑的。 您可以双击HTML源代码并根据需要编辑代码。

修改HTML源

您也可以在CSS窗格中双击并编辑样式的属性。 要添加规则,请单击顶部样式窗格上的加号图标。

添加新规则css

当您更改CSS或HTML代码时,这些更改将立即反映在浏览器中。

代码更改生活

请注意,并非此处所做的所有更改都保存在任何地方。 工具 检查元素 是一种调试工具,它不会将更改保存到服务器上的文件中。 这意味着,如果刷新页面,所有更改都将丢失。

要实际进行更改,您需要修改您的样式 WordPress主题 或模板来添加您要保存的更改。

在开始编辑之前 WordPress主题 现有使用工具“ 检查元素 确保通过创建子主题来保存所有更改。

如何找到WordPress的错误

工具 检查元素 有一个名为“ 安慰 其中显示了您网站上存在的所有错误。 在尝试调试错误或寻求主题或插件作者的帮助之前,总是值得在这里查找问题所在。

JavaScript控制台

例如,如果您是客户 OptinMonster 谁想知道为什么他的optin无法加载,那么您可以轻松地发现问题,表明“ 您的网页塞不匹配 “。

如果您的共享栏无法正常运行,则可以看到导致它的JavaScript错误。

这就是本教程的全部内容,希望您可以更好地自定义您的 WordPress博客. 随时与您的朋友分享本教程。