标签： Chrome

如果您与许多网站合作，您可能一直在寻找更快、更有效的方法来完成工作。如果是这样，在大多数主要浏览器中可用的Inspect Element（检查元素工具）可能是一个有用的东西。有了它，您可以快速识别CSS类、预览页面上元素的更改、在移动设备上模拟站点等等。

在本文中，我们将介绍检查元素工具，并向您展示如何在最流行的Web浏览器中访问它。然后，我们将向您介绍一些示例，说明如何将其用作Web开发工作流程的一部分。

如何在主要浏览器中访问检查元素工具

检查元素工具是一种实用程序，可让您查看任何网页的底层源代码。此外，您可以使用它进行临时更改并实时查看结果，同时保持原始源代码不变。如果您需要测试更改或诊断问题，这将非常有用。如果您遇到一个具有您喜欢的功能的网站并且很好奇它是如何实现的，它也可以派上用场。

大多数主要浏览器（包括Chrome、Firefox和Safari）都提供了此工具的变体。让我们看看如何在每个中访问它。

访问Chrome检查元素工具

在Chrome中可以通过三种方式访问​​检查元素工具：

• 右键单击页面上的元素并选择Inspect（检查）。
• 单击窗口右上角的三点菜单，然后选择“更多工具”>“开发者工具”。
• 按键盘上的 Ctrl + Shift + C （在 Mac 上为Cmd + Option + C ）。

当该工具打开时，它会向您显示一个拆分视图。一方面，您可以预览正在检查的网站，以及一些用于调整视图和模拟不同屏幕分辨率的控件：

另一方面，有几个包含信息的窗格。顶部窗格是页面的 HTML。将鼠标悬停在部分代码上将突出显示右侧页面的相关区域：

下面是一个显示页面信息的窗格。此处显示的详细信息因您选择的选项卡而异。在上面的屏幕截图中，它显示了页面的CSS样式。

底部窗格只是关于Chrome 开发者工具的新闻和更新。您可以通过单击X安全地关闭它以减少混乱。

最后，您可以通过单击HTML窗格右上角的三点菜单并选择停靠选项之一来更改这些窗格的位置。

访问Firefox检查元素工具

Firefox中的检查元素工具与Chrome的非常相似，可以通过类似的方式访问：

• 右键单击页面上的元素并选择“检查元素”。
• 单击 Firefox 窗口右上角的汉堡菜单，然后选择更多工具 > Web开发工具。
• 按键盘上的 Ctrl + Shift + C  （在 Mac 上为Cmd + Option + C）。

Firefox默认将信息窗格放在屏幕底部：

但是，您可以通过单击三点菜单并选择其他选项轻松移动它们。

Safari检查元素工具

在Mac计算机上，Safari Web浏览器也提供了检查元素工具。但是，访问它还有一个额外的步骤——您需要启用Safari开发人员工具。

为此，请前往屏幕顶部的菜单栏并导航至Safari>偏好设置>高级。然后，您可以选中相关框以启用开发工具：

启用后，您可以像在其他浏览器中一样访问检查元素工具功能：

• 右键单击一个元素并选择检查元素。
• 在顶部菜单栏中，导航到 开发>显示页面检查器。
• 按 键盘上的Cmd + Option + I。

Safari工具的初始布局与浏览器略有不同：

但是，与Chrome和Firefox一样，您可以通过单击检查器窗口左上角的图标轻松对其进行自定义。

检查元素工具常见用途

现在您知道如何访问“检查元素”工具，让我们看看您可以使用它执行的一些有用操作。有很多可能性，但以下用途是一些最常见的用途。请注意，我们将在这些示例中使用 Chrome，但这些功能在其他浏览器中的工作方式应该类似。

1. 在网站上查找CSS类

您可以利用检查元素的最有用的方法之一是在页面的层叠样式表 (CSS) 中查找详细信息。由于几个原因，这很方便。首先，如果您只是在浏览互联网并遇到一个您非常喜欢其风格的网站，您可以查看 CSS 以收集一些您自己的网页设计的想法。

它在您自己的网站上也很有用。例如，如果一个元素看起来不太正确，您可以快速检查它以确保它使用正确的 CSS。

使用检查元素工具检查样式有两种基本方法。如果您想快速查看单个项目，可以在预览窗格中将鼠标悬停在其上以查看有关它的一些基本信息：

在这里，您可以在我们的博客上看到标题的配色方案、字体、边距等。在详细窗格中，该工具还会突出显示相关代码，以便您可以准确了解发生了什么。单击预览中的元素将更新样式窗格以显示其CSS：

如果将鼠标悬停在元素上似乎没有做任何事情，请确保检查器窗格中的光标图标以蓝色突出显示：

如果您知道要查找的特定CSS类或样式并希望查看使用它的每个元素，您还可以使用搜索功能。在检查器打开的情况下，按键盘上的 Ctrl + Shift + F （在 Mac上为Cmd + Shift + F ）。这将打开一个搜索框，您可以在其中搜索页面的代码。 相关结果将突出显示，就像您在搜索文档一样。

2. 对站点进行故障排除

检查元素工具对于解决问题非常方便。例如，如果元素的颜色或字体看起来不太正确，您可以使用我们在上一节中描述的工具快速检查它。

您还可以从“检查元素”工具直接编辑页面的HTML。只需双击要更改的代码即可对其进行编辑。

请注意，网站上的代码实际上 并未更改——如果您刷新页面，它将恢复到其原始形式。但是，此功能对于快速测试和故障排除非常有用。

最后，内置调试器是一种更高级的工具，您可以使用它来查看页面的任何错误消息。要访问它，请单击检查元素工具窗口顶部的Console控制台：

还有其他选项卡可用于查看来源、网络活动等。要访问完整列表，请单击检查器顶部的双箭头图标。

注：平时使用我们的主题或者插件的站长，当遇到异常问题，使用此种方法查找故障并通过工单提交错误信息截图给我们，将有利于我们快速定位和解决问题。

3. 编辑文本以预览更改

检查元素工具的最佳用途之一是快速预览页面文本、字体或颜色的更改。这样，您甚至无需登录WordPress仪表板就可以准确地看到您的想法。

要编辑元素，请右键单击它并选择“检查”。 这将打开具有该元素代码焦点的工具。如果您已经打开了检查元素工具，您还可以单击预览窗格中的项目以突出显示相关代码。

接下来，只需双击代码以使其可编辑。例如，我们在这里更改了博客的标题：

您还可以更改颜色。只需选择元素并滚动 样式窗格即可找到相关部分。您可以单击颜色方块以调出颜色选择器：

如果您知道要使用的颜色，也可以直接编辑颜色的十六进制代码。

4. 预览图像变化

检查元素工具还可以轻松预览图像更改。这也是尝试不同图像尺寸的绝佳方式。

只需在预览窗格中选择要更改的图像，然后在HTML窗格中双击其URL：

然后，您可以粘贴不同图像的URL进行测试。如果图片在您的WordPress媒体库中，您可以在附件详细信息中快速找到URL：

甚至还有一个方便的按钮可以将URL复制到剪贴板。再次记住，您在检查器中所做的任何更改都只是暂时的，并且只对您可见，因此请随意尝试。

5. 使用设备仿真测试站点

最后，检查元素的另一个有用功能是能够模拟不同的屏幕尺寸甚至特定设备。这使您能够测试站点的响应能力，并准确了解它在各种移动设备形式下的显示效果。

打开检查元素工具，单击看起来像堆叠的手机和平板电脑的图标：

这将启用设备仿真。请注意，当您打开检查器时，它可能会默认启用。使用周围的手柄调整页面预览的大小，或单击预览窗格顶部的下拉菜单以选择各种设备：

您还可以输入特定的纵横比，甚至可以通过单击预览窗格顶部的“旋转”图标来检查移动设备旋转时页面的外观。要模拟各种传感器，例如位置和触摸，请单击检查器窗格中的三点菜单，然后选择更多工具 >传感器。

小结

无论您是 Web 开发新手还是经验丰富的专业人士，检查元素工具都是一个强大的实用程序，绝对应该在您的武器库中。它易于访问，几乎普遍可用，并且可以快速轻松地进行各种操作。

在本文中，我们演示了如何在Chrome、Firefox和Safari中访问检查元素工具。我们还向您展示了如何使用它来定位CSS类、对网站进行故障排除、临时更改文本和图像以及模拟移动设备。使用此工具包，您拥有使检查元素工具成为工作流程一部分所需的一切。

如果您偶然发现WordPress中的错误，您可能会被要求清除浏览器缓存以修复它。这通常是一项简单的任务，但由于该过程因平台而异，您的故障排除指南可能不会提供完成它所需的具体步骤。

在这篇文章中，我们将解释您的浏览器缓存是什么以及您可能需要清除它的原因。然后，我们将提供在三种最流行的 Internet 浏览器中执行此过程的综合步骤：Google Chrome、Safari和Mozilla Firefox。

浏览器缓存简介

我们在过去的几篇文章中讨论了浏览器缓存的基础知识。该过程涉及浏览器存储网页副本，以便他们可以在后续访问时轻松更快地加载内容。

我们通常谈论浏览器缓存，以使其能够加速您自己的网站。但是，其他站点也使用这种技术，因此您自己的浏览器也存储了各种网页的副本。

您可以手动配置浏览器缓存，但对于WordPress用户来说，使用插件来实现它更为常见。无论如何，在几种情况下您需要清除缓存并重新加载网页的新副本。

为什么需要清除浏览器缓存

正如我们已经说过的，浏览器缓存对于加快页面加载时间很有用。这对您作为网站所有者以及想要快速访问 Internet 上的关键信息的用户都有帮助。

但是，您还希望信息是最新的和准确的。如果您的浏览器加载的是页面的旧副本而不是最新版本，则您可能正在查看不再相关的内容。

这通常不是问题，因为浏览器的构建是为了检测更改并在更新时重新加载之前存储的页面。但是，如果您的浏览器没有注意到您尝试访问的内容已被修改，就会出现问题。

可能出现这种情况的一些具体情况包括：

• 对WordPress网站上似乎没有更新的内容进行更改时。
• 更新新代码未正确执行的插件或主题。
• 安装了一个图像优化插件，但仍然看到前端加载了旧的、未压缩的文件。

清除浏览器缓存还有助于解决一些常见错误，包括：

• 401回复
• 502 bad gateway错误
• 插件冲突

简而言之，如果您在使用WordPress网站时遇到任何问题，在做其他任何事情之前尝试清除浏览器缓存永远不会有什么坏处。它不会导致任何进一步的问题，并且通常是您可以自行处理的非常快速的解决方案。

如何清除不同浏览器的缓存

每当您访问某个网站时，您的 Web 浏览器都会将来自该网站的某些信息保存在您计算机硬盘上的“浏览器缓存”中。大多数情况下，这是一件好事，因为它无需在浏览网页时一遍又一遍地下载相同的静态资源，从而有助于加快您的 Web 浏览体验。

例如，网站的标志不太可能改变——因此将这个标志本地存储在浏览器缓存中而不是每次访问新页面时让浏览器下载标志是有意义的。但有时这种缓存实际上会导致您的浏览体验出现问题。那时您需要清除浏览器缓存。

在本条目中，我们将首先向您简要介绍您可能需要清除浏览器缓存的时间。然后，我们将向您展示如何清除大多数主要浏览器的浏览器缓存。如果你想快速跳到“如何”，你可以点击下面的链接之一，否则，我们将从头开始。

• 如何强制刷新所有浏览器的单个页面
• 如何清除Chrome浏览器缓存
• 如何清除Firefox浏览器的缓存
• 如何清除Safari浏览器缓存
• 如何清除Internet Explorer浏览器缓存
• 如何清除Microsoft Edge浏览器缓存
• 如何清除Opera浏览器缓存

如何强制刷新单个页面

在您直接清除整个浏览器缓存之前，您可以尝试一种称为“强制刷新”的技巧。通常，当您刷新页面时，您的浏览器仍会提供页面的缓存版本，而不是再次下载所有资产。但是您实际上可以通过使用一些简单的热键绕过缓存并强制完全刷新：

• Windows和Linux浏览器：CTRL + F5
• Apple Safari：SHIFT +Reload工具栏按钮
• Mac版Chrome和Firefox：CMD + SHIFT + R

同样，此方法仅绕过您所在特定页面的缓存。它使浏览器缓存的其余部分保持不变。因此，如果您只遇到一个页面的问题，则此选项非常有用。但是，如果您想完全重置您的体验（例如，跨整个站点），最好只清除整个浏览器缓存。

如何清除Chrome浏览器缓存

谷歌浏览器是迄今为止最受欢迎的网络浏览器。统计数据显示，它占全球互联网使用量的一半以上。幸运的是，它的设置非常易于导航，可以快速简单地清除缓存。

Step 1：打开Chrome浏览器设置

首先，单击浏览器窗口右上角的三点图标：

然后，选择设置：

这将在新选项卡中打开您的浏览器设置。

Step 2：进入隐私设置和安全性

进入浏览器设置后，点击隐私设置和安全性，或向下滚动直到到达以下部分：

接下来，选择清除浏览数据：

这将打开一个小的弹出窗口。

Step 3：清除缓存的图片和文件

在清除浏览数据窗口中，您可以选择要从Chrome中删除的多种数据类型。您可以指定任意数量并一次性删除它们，但为了清除浏览器缓存，请确保选择缓存的图片和文件：

最后，点击清除数据。

如何清除Firefox浏览器缓存

Firefox占浏览器市场份额不到 5%。但是，一些较旧的应用程序可能在这个更成熟的平台上运行得更好。它还为开发人员提供了一些方便的工具。这是清除其缓存的方法。

Step 1：进入Firefox设置

要在Firefox中打开浏览器设置，请单击右上角的汉堡图标，然后选择设置：

 

这将打开常规设置页面。

Step 2：查看您的隐私和安全设置

与Chrome一样，您需要从左侧菜单导航到浏览器设置的隐私与安全部分，以访问缓存选项：

请注意，您无法像在Chrome中那样通过滚动来访问这些选项。

Step 3：清除您的数据

接下来，向下滚动，直到找到Cookie和站点数据部分：

单击 清除数据…按钮：

Firefox仅提供两种类型的站点数据，您可以在此处删除。确保选中已缓存网络数据，然后单击清除按钮：

然后Firefox会要求您再确认您的选择，此时您需要点击立即清除。

如何清除Safari浏览器缓存

Safari排在Chrome之后，成为下一个最受欢迎的浏览器，部分原因可能是它是Apple产品的默认平台。由于它在智能手机上如此受欢迎，我们也包含了在Safari移动版中清除浏览器缓存的相应步骤。

Step 1：访问Safari设置

首先，您需要访问您的设置。在台式机或笔记本电脑上，只需打开浏览器并在计算机工具栏中选择Safari ：

在您的移动设备上，打开“设置”应用：

接下来，向下滚动直到看到Safari：

点击它以打开其设置。

Step 2：清除所有历史记录和网站数据

与Chrome不同的是，Safari不提供选择和选择要删除的浏览器数据的选项。因此，每当您清除浏览器缓存时，您也将删除您的历史记录、cookie和其他数据。

对于您的桌面浏览器，选择清除历史记录…

从结果下拉列表中选择所有历史记录，然后单击清除历史记录按钮：

在您的移动设备上，向下滚动到清除历史记录和网站数据选项并点击它：

弹出窗口将要求您确认是否要继续：

点击清除历史记录和数据以完成清除缓存。

如何清除Internet Explorer浏览器缓存

要清除Internet Explorer的浏览器缓存，请单击右上角的齿轮图标以访问“工具”菜单。然后，找到安全并从子菜单中选择删除浏览器历史…：

Internet Explorer删除浏览历史记录

您还可以使用快捷方式访问菜单：CTRL + SHIFT + DEL。 Internet Explorer将打开一个弹出窗口。确保只选中Internet临时文件和网站文件框以避免清除重要信息。然后，单击底部的删除按钮：

清除Internet Explorer浏览器缓存

如何清除Microsoft Edge浏览器缓存

若要清除Microsoft Edge的浏览器缓存，请单击 浏览器窗口右上角的更多图标（三个小点）。

Microsoft Edge设置

向下滚动并单击选择要清除的内容。

选择要在Microsoft Edge中清除的内容

确保只选择缓存数据和文件框以避免清除重要信息。您还可以使用快捷方式访问菜单：  CTRL + SHIFT + DEL。 然后，单击底部的清除按钮。

清除Microsoft Edge浏览器缓存

如何清除Opera浏览器缓存

要清除Opera的浏览器缓存，请单击左上角的Opera图标，找到更多工具选项，然后从子菜单中选择清除浏览数据：

Opera清除浏览数据

在大多数情况下，您应该将时间周期设置为:过去4周。然后，确保只选中缓存的图像和文件框，然后单击清除浏览数据按钮：

清除Opera中的浏览器缓存

小结

知道如何清除浏览器缓存意味着您可以快速修复在使用 WordPress 或只是浏览网页时可能遇到的许多错误。幸运的是，无论您喜欢哪种浏览器，这个过程都非常简单。

在这篇博文中，我们提供了在Google Chrome、Safari和Mozilla Firefox等浏览器清除缓存的完整演练。对于每个浏览器，您都需要访问您的设置，找到清除浏览数据的选项，并确保包含您的缓存。