如何正确检查网站

无论您是测试项目新功能的开发人员，还是想要仔细研究 HTML 和 CSS 代码的设计人员，检查网站及其元素的原因有很多。 然而，知道从哪里开始可能看起来很混乱（起初）。

幸运的是，您可以使用各种简单的工具、技术和技巧来正确检查 Web 元素。 此外，几乎所有浏览器和操作系统 (OS) 都有选项。

在这篇文章中，我们将讨论您可能想要检查网站的原因。 然后，我们将向您介绍一些您可以使用的最佳工具，然后再解释要查找的内容。 让我们跳进去吧！

为什么要检查网站

您可能想要检查网站的原因有多种。 例如，您可能需要解决问题或查找特定信息。

在浏览器中检查网页元素让 WordPress 开发人员、设计师和数字营销人员可以操纵网页的外观并测试更改。 开发人员或测试人员更有可能使用此功能来调试特定元素、进行布局测试或执行实时 CSS 编辑。

检查网页元素对网页设计师也很有帮助。 如果您想快速测试颜色变化或新字体，您可以在不深入研究 CSS 代码的情况下进行。

此外，数字营销人员可以使用 Inspect Element 工具来查看某些更改将如何影响网页的整体外观。 例如，您可能想尝试新的号召性用语 (CTA) 按钮或不同的配色方案。 您可以使用工具来复制更新，而无需对您的实时站点进行任何更改。

最后，检查网站是了解网站构建和功能的绝佳方式。 如果您有兴趣了解有关 Web 开发的更多信息，检查网站是一个很好的入门方式。

检查网站的最佳工具和扩展

您可以使用许多不同的工具和扩展程序来检查网站。 这里有一些最受欢迎的选项！

检查元素

检查元素工具是最常见的选项。 它使您可以仔细查看构成网页的 HTML 和 CSS 代码。 您还可以使用它来实时编辑 CSS 并查看更改后的外观，而无需进行任何永久更改。

尽管它可以作为 Google Chrome 扩展程序使用，但 Inspect Element 工具也随所有主要浏览器一起提供。 该功能是 Chrome 开发人员工具的一部分，Chrome 开发人员工具是一组程序，可让您检查和编辑网页的 HTML 和 CSS 代码。

要访问 Google Chrome 开发者工具，只需按Ctrl+Shift+I （或在 Mac 上按 Cmd+Opt+I ）。 您还可以通过打开 Chrome 菜单并选择更多工具>开发人员工具来访问这些工具：

您可以在其他浏览器中访问相同的开发人员工具。 例如，Firefox Developer Tools 具有类似的功能。 要访问这些工具，只需按Ctrl+Shift+I （或在 Mac 上按 Cmd+Opt+I ）。 您还可以通过打开 Firefox 菜单并选择Web Developer > Inspector 来找到这些工具。

此外，Safari Developer Tools 使您能够在 Mac 设备上检查和编辑网页的 HTML 和 CSS 代码。 只需按Cmd+Opt+I 。 您还可以打开 Safari 菜单并在菜单栏中选择首选项>高级> 显示开发菜单。

浏览器栈

另一个可用于测试网站的平台是 BrowserStack：

这个基于云的测试平台适用于所有主要浏览器和设备。 注册免费试用后，您可以导航到 Live 仪表板并选择您的操作系统。

然后，您可以选择您喜欢的浏览器版本以在浏览器中启动实时会话。 最后，您可以像通过 Inspect Element 一样浏览要检查的网站。

如何检查网站

让我们来看看如何使用 Inspect Element 工具检查网站。 首先只需右键单击任何网页元素并从上下文菜单中选择“检查” ：

这将在您的浏览器中打开检查元素工具。 打开该工具后，您就可以开始处理 HTML 和 CSS 代码，看看它会如何影响网页的外观。

例如，您可以更改元素的颜色、添加或删除类，甚至更改元素的位置。 您还可以使用顶部的搜索字段来搜索一段文本或图像。

当然，您使用 Inspect Element 所做的任何更改都只是暂时的。 当您刷新页面或关闭浏览器时，它们不会被保存。 但是，这是在不永久更改您的网站的情况下试用特定更改外观的好方法。

您还可以通过按Ctrl+Shift+I （或 Mac 上的Cmd+Opt+I ）打开Developer tools来访问该工具。 然后，单击窗口顶部的“元素”选项卡：

最后，您还可以通过打开 Chrome 菜单并选择我们之前讨论过的更多工具>开发人员工具来访问 Inspect Element。

如何更改元素

如果要更改网页上的元素，请右键单击它并选择Inspect 。 在打开的元素面板中，找到您要更改的部分并双击它。

当您打开“元素”框时，您可以使用面板左上角的“检查”光标图标来突出显示要修改的元素的源代码。 当您右键单击突出显示的代码时，选择Edit as HTML ：

该框将展开，然后您可以更改文本。 要预览更改，您可以取消选择该元素。 您也可以双击文本进行编辑。

您还可以使用此技术更改元素的 CSS 代码。 为此，请右键单击它并选择Inspect 。 在元素面板中，找到要更改的元素并选择element.style属性。 然后您可以在大括号中添加您的代码或声明。

如何隐藏或删除元素

您可能还想隐藏或删除网页上的元素。 找到要隐藏或删除的元素后，右键单击它并选择检查以启动检查元素工具。

在这里，右键单击元素，然后选择删除元素或隐藏元素选项：

删除按钮删除文档对象模型 (DOM) 元素。 隐藏按钮将简单地隐藏元素，但它仍将位于 DOM 中。

如何检查 CSS 类

有几种方法可以检查 CSS 类。 然而，最简单的方法是右键单击要查看的元素并选择Inspect 。 然后打开Styles选项卡可以看到它的 CSS 样式：

请注意，此选项卡仅向您显示应用的内联样式，而不显示来自样式表的样式。

如果您想查看应用于某个元素的所有 CSS 样式，您可以使用Computed选项卡。 它向您展示了应用于元素的所有 CSS 样式，包括来自样式表的样式：

完成网页检查后，只需关闭“检查元素”工具即可。 您的更改不会被保存，因此您不必担心不小心破坏某些东西。

检查网站时要注意什么

无论您使用哪种方法访问 Inspect Element，您都会看到相同的界面。 它由两个面板组成：HTML 面板和 CSS 面板。

HTML 窗格显示网页的结构。 您可以看到各种元素是如何嵌套和关联的。

CSS 窗格向您显示应用于所选元素的样式。 您还可以编辑 CSS 规则以查看您的更改将如何影响元素的外观。

如果您要在网站上查找特定内容，无论是某段文本还是图像，您都可以使用 Inspect Element 来帮助您找到它。 它有一个搜索字段，您可以在其中查找特定元素。

当您检查网站时，需要注意以下几点：

• HTML：定义网页结构的代码。 注意元素的组织方式以及它们如何相互作用。
• CSS：定义网页样式的代码。
• JavaScript ：定义网页行为的代码。 它影响元素如何交互以及页面如何响应用户输入。
• 设计：网站的整体外观。 它会影响布局的用户友好程度以及它与网站目的的契合程度。
• 内容：网站的文本、图像和其他媒体。

检查网站时应该寻找什么主要取决于您是设计师、开发人员还是数字营销人员。 正如我们之前所讨论的，Inspect Element 工具可以帮助您处理从设计测试到故障排除问题的所有事情。

结论

Inspect Element 对于设计人员和开发人员来说是一项有价值的功能。 您可以使用它来查看和编辑网页的 HTML 和 CSS。 当您想更改正在处理的网页或查看其编码方式时，此工具会很有用。

大多数 Web 浏览器都提供 Inspect Element。 您可以通过右键单击网页并从菜单中选择“检查”来访问它。 打开检查窗口后，您将看到网页的 HTML 和 CSS 代码，并可以进行各种更改。

您在网站管理或优化方面需要帮助吗？ 了解 WP Engine 如何帮助处理从 WordPress 托管到站点和客户管理的所有问题！