借助其 Inspect Element 工具，Safari 可让您修改任何网页的前端代码。 如果您想使用不同的文本或图像测试页面的外观，可以通过使用 Inspect Element 更改其代码来实现。

这是一个针对初学者的简单指南，说明如何开始在 Safari 中尝试使用 Inspect Element 来编辑网站的文本和图像，并且只需要最少的编码知识。

Inspect Element 是一个开发者工具。 它可以在 Safari 上使用，但也可以在其他网络浏览器上使用，例如 Chrome, Firefox， 和 Edge. 使用 Inspect Element，您可以窥视网站的幕后，以揭示其前端代码，例如 HTML 和 CSS。 但是，它不会授予您对后端的可见性，例如其数据库。

您不仅可以看到此代码，还可以对其进行调整。 这意味着您可以更改网站的外观。 您可以替换图像、改写某些文本、使用不同的字体、切换其配色方案等等。 但是，这些编辑是本地的。 除了您之外，它们不会出现在其他任何人面前； 一旦您刷新或离开页面，它们就会消失。

如果您是一名初出茅庐的 Web 开发人员，Inspect Element 是一个很棒的工具。 您可以从字面上看到为您最喜欢的网站提供支持的代码，并在真实环境中根据需要对其进行调整。 使用 Inspect Element 可以获得许多有趣的见解。

为了 example，企业主可以查看竞争对手网站中包含的关键字，或者设计师可以使用 Inspect Element 来识别他们认为有吸引力的字体或在他们的网站上快速测试不同的配色方案.

现在，我们将专注于使用 Inspect Element 编辑网页的基础知识。

您可以使用开发人员菜单在 Safari 上打开 Inspect Element：

选择此选项后，您可以 右键点击 在网页上并选择 检查元素. 或者，您可以选择 开发 在菜单栏中，然后 显示 Web 检查器.

要开始编辑元素， 右键点击 您要编辑的内容并单击 检查元素. 这将打开开发人员窗口，并突出显示相关部分。 您可能会发现您希望添加的特定元素（例如图像或文本）被隐藏了； 要找到它，请使用 箭头 在左侧展开嵌套部分。

为了帮助缩小您的选择范围，请单击 目标图标 从检查元素工具栏中。 现在，当您浏览代码时，它会突出显示网站上的该部分。 或者，您可以使用光标定位网站上的某个部分。 当您想在网页的拥挤区域中磨练特定的东西时，这很方便。

要在站点的源代码中找到一段文本后使其可编辑， 双击 它。 您可以直接在代码中键入新文本，或删除现有文本。 给定文本字符串的编辑完成后，点击 Enter，网页上的文字会发生变化。

真的就这么简单！ 唯一不起作用的情况是文本实际上是图像的一部分，例如徽标。

虽然图像在前端以视觉方式呈现给您，但在网站代码中它们显示为链接。 你可以 右键点击 和图像并选择 检查元素 跳转到该图像在代码中的位置。 网站图像通常具有 JPG、GIF 或 PNG 文件扩展名，但并非唯一。

双击 这些图像字符串，您可以对其进行编辑，或者根据需要将它们保存到您的系统中。 如果要替换图像，请将其切换为替换图像 URL。 或者您可以完全删除代码字符串以从视图中删除图像。

Safari 的 Inspect Element 工具可让您轻松查找和更改与文本和图像对应的代码，这就像切换文本或 URL 字符串一样简单。 使用 Inspect Element 编辑完网站后，只需刷新页面，一切都会恢复正常。