如何在 Safari Mac 电脑上检查元素?

人们使用网站来查找信息,甚至研究他们的工作或学校活动。 简单的网站是使用网络编程语言设计的,未经培训的人可能会发现难以理解后端。

如果您想了解有关网站及其后端部分的更多信息,您需要检查 Safari Mac 上的元素。

检查元素是每个前端或 UI 开发人员调试 UI 错误或在 CSS 和 HTML 脚本中进行快速编辑所需的功能。

该功能已在 Chrome 和 Firefox 并且只需右键单击即可查看。 尽管如此,Safari Mac 用户需要在检查 Web 元素之前启用它。

在从事 Web 开发项目时,如果不以 Mac 用户的身份检查元素,我很难对 Web 代码进行快速编辑。 我最近了解了检查元素特征,它立即让我的工作变得轻松。

内容

启用开发菜单

大多数普通用户不需要包含 Inspect Element 功能的开发人员菜单。 因此,Safari 浏览器会禁用此选项。

只有在 Safari 浏览器上启用“开发”菜单后,才能检查网站的元素。 激活“开发”菜单至关重要,因为它允许您使用 Apple 的网络检查器进行调试; 因此,您应该为 Safari 启用开发者工具。

以下是在 Mac 版 Safari 中启用“开发”菜单的步骤

  1. 发射 Mac 上的 Safari 浏览器。
  2. 选择 优先 选项。
    它将打开“首选项”窗口。
  3. 切换到 先进的 首选项窗口中的选项卡。
  4. 启用复选框 在菜单栏中显示开发菜单 选项。

它将在 Safari 菜单栏中添加一个单独的开发菜单并激活检查元素功能。

在 Safari Mac 中检查元素

启用开发人员工具后,您可以继续检查 Mac 设备上 Safari 中的元素。

您可以通过多种方式调用检查选项。 您可以选择您认为更容易获得或更受欢迎的那个。

右键单击上下文菜单

您可以立即打开检查元素并在 HTML 代码中进行所需的更改。 只是 右键点击 在要检查元素并选择的网页上 检查元素.

在这种方法中,您永远不会遇到任何困难,但不要忘记首先打开您要检查的页面。

开发菜单中的 Web 检查器

您可以选择从“开发”菜单打开检查元素窗口。

  1. 发射 Mac 上的 Apple Safari。
  2. 点击 发展 菜单栏上的菜单。
  3. 选择选项 显示 Web 检查器 从列表中。
    在 Safari Mac 的开发菜单中显示 Web Inspector 选项

它将弹出“检查元素”窗口,但请确保打开您要检查的页面。

Safari 快捷键

快捷键永远是时间的救星,只需按下几个键,工作就完成了。 您可以使用一组快捷键检查 Safari 浏览器上的元素。

为了调用 Inspect Element 或 Web Inspector,您可以按键 命令 + 选项 + 一世 在键盘上。

Safari Mac 的开发者工具中的 Web Inspector Elements 选项卡

这可能是您打开要检查的页面后可以使用的最短方法。

底线:在 Safari 中检查元素

Inspect Element 对于调查 UI 和更改 HTML 和 CSS 代码的任何人都有帮助。

Inspect Element 在默认情况下启用 Chrome 和 Firefox 浏览器,您可以使用正确的鼠标按钮访问它。 尽管如此,Mac 上的 Safari 用户应该在检查 Web 代码之前启用相同功能的开发菜单。

您可以查看特定元素的源代码并更改文本、删除部分、隐藏详细信息以及将它们修改为 HTML 以查看源代码。 您还可以在样式选项卡上查看项目的格式,尤其是文本元素。

通过启用此功能,您将能够通过单击或快捷键检查网页的元素。

常见问题解答:Safari 检查元素菜单

我们列出了一些与 Mac OS 中 Safari 的开发菜单和检查元素选项相关的最常见问题:

我可以在不启用开发人员工具或开发菜单的情况下检查 Safari 中的元素吗?

不,您无法在未启用“开发”菜单的情况下检查元素。 您必须先启用开发人员工具才能使用 Web 检查器。

右键单击相应页面时如何查看检查元素选项?

在 Safari 的首选项中,启用“在菜单栏上显示开发菜单”以查看 检查元素 当您右键单击网页时。

我可以按照相同的步骤在所有 Apple 设备中启用开发者工具吗?

是的,您需要按照相同的步骤使开发人员工具能够检查任何 Mac 计算机上的元素。 但是,开发菜单或开发者工具仅限于 MacOS,您无法在 iPadOS 或 iOS 上激活或查看选项。