在 macOS 上的 Safari 中检查网页：开发人员工具
Safari 的 Web Inspector 可让您检查 macOS 上的网页。对于网络开发人员和好奇的用户来说，它是一个方便的工具。要使用 Web Inspector，您需要在 Safari 的设置中将其打开。
启用后，Web Inspector 将打开一个网页详细信息的世界。您可以看到组成页面的 HTML、CSS 和 JavaScript。该工具可帮助您查找错误、测试设计并了解网站的工作原理。
Web Inspector 易于使用。右键单击网页的任何部分，然后选择“检查元素”。将弹出一个新窗口，其中包含该页面的所有代码。您可以更改内容并立即在页面上查看结果。
打开开发菜单
要利用 Safari 的开发人员工具，您首先需要激活“开发”菜单。导航至狩猎之旅>偏好设置>先进的并选中“在菜单栏中显示开发菜单”旁边的框。这将解锁一套旨在增强您的 Web 开发工作流程的工具。
1. 单击 Safari 菜单中的首选项
2. 单击“高级”选项卡
3. 检查 Web 开发人员的显示功能
4. 将显示“开发”菜单
精确检查元件
“检查元素”工具是您了解网页结构的门户。右键单击任何元素并选择“检查元素”。将出现一个面板，显示负责该元素的外观和行为的 HTML、CSS 和 JavaScript 代码。
调试 JavaScript 代码
Safari 的 JavaScript 控制台对于识别和修复代码中的错误至关重要。使用控制台记录消息、检查变量并逐步执行代码。您可以从“开发”菜单或按选项 + 命令 + C。
监控网络活动
Safari 开发者工具中的“网络”选项卡提供了网页发出的所有网络请求的详细视图。这可以帮助您诊断性能瓶颈、识别加载缓慢的资源并优化网站的加载速度。
响应式设计测试
Safari 的响应式设计模式允许您模拟不同的屏幕尺寸和设备，以确保您的网站在各种平台上都能正常显示和运行。此功能对于创建适应各种屏幕分辨率的响应式网站非常宝贵。
附加开发工具
| 工具 | 描述 |
|---|---|
| 贮存 | 检查和管理存储在 cookie、本地存储和会话存储中的网站数据。 |
| 时间表 | 分析网站渲染、脚本和布局过程的性能。 |
| 层数 | 可视化网页的各层并识别渲染问题。 |
| 资源 | 查看和编辑网页使用的资源（图像、字体等）。 |
| 安慰 | 查看 JavaScript 日志、警告和错误。 |
| 搜索 | 搜索网页的 HTML、CSS 和 JavaScript 代码。 |
| 调试器 | 单步执行 JavaScript 代码、设置断点并检查变量。 |
| 网络 | 监视网络活动，包括请求和响应。 |
| 元素 | 查看和编辑网页的 HTML 和 CSS。 |
| 响应式设计 | 模拟不同的屏幕尺寸和设备。 |
| 表现 | 分析网站性能并确定需要改进的领域。 |
| 记忆 | 监视内存使用情况并检测内存泄漏。 |
| 安全 | 查看网站的安全详细信息，包括证书和连接信息。 |
| 审计 | 获取有关改进网站可访问性、性能和 SEO 的建议。 |
| Web 检查器扩展 | 通过自定义扩展来扩展 Safari 开发人员工具的功能。 |
要点
- Safari 的 Web Inspector 必须在设置中打开
- Web Inspector 显示网页背后的代码
- 您可以使用 Web Inspector 来测试和了解网站
在 Safari 中启用 Web Inspector
Web Inspector 是一个用于检查 Safari 中网页的强大工具。它允许您查看代码和调试问题。
键绑定是：⌘⌥i
在菜单栏中显示开发菜单
要使用 Web Inspector，您需要先打开“开发”菜单。打开 Safari 并单击顶部菜单栏中的 Safari > 首选项。单击高级选项卡。选中“在菜单栏中显示开发菜单”旁边的框。
“开发”菜单现在将出现在 Safari 的菜单栏中。该菜单为网络开发人员提供了许多有用的选项。
访问 Web 检查器功能
一旦“开发”菜单可见，您就可以打开 Web Inspector。转到您要检查的网页。单击菜单栏中的“开发”>“显示 Web 检查器”。您还可以使用键盘快捷键 Option + Command + I。
打开 Web Inspector 的另一种方法是右键单击网页的任何部分，然后选择“检查元素”。这将打开检查器并聚焦于该特定元素。
Web Inspector 有多个带有不同工具的选项卡。元素选项卡显示页面的 HTML 结构。控制台选项卡显示 JavaScript 输出和错误。其他选项卡可帮助您检查网络活动、存储等。
利用 Web Inspector 进行开发
Web Inspector 是一款功能强大的工具，适合在 macOS 上使用 Safari 的开发人员。它可以让您直接在浏览器中查看和更改网页代码。
检查和修改 HTML 和 CSS
Web Inspector 显示页面的 HTML 和 CSS。您可以看到元素是如何嵌套和样式化的。单击任意元素可查看其详细信息。您可以实时编辑 CSS 属性来测试更改。这有助于快速解决布局问题。
元素选项卡显示页面结构。它显示 HTML 标签和属性。您可以展开和折叠部分以专注于特定部分。双击文本可直接编辑内容。
样式窗格显示所选元素的 CSS 规则。您可以打开和关闭规则或更改值。可以添加新样式来快速测试想法。这些更改是临时的，并会在您重新加载页面时重置。
调试和故障排除
Web Inspector 有助于查找和修复代码问题。控制台选项卡显示错误警告和日志。您可以在此处运行 JavaScript 命令来测试想法。
“源”选项卡允许您在代码中设置断点。这会暂停执行，以便您可以逐行执行。您可以观察变量并了解值在代码运行时如何变化。
网络选项卡显示页面加载的所有资源。这包括图像脚本和数据文件。您可以看到加载时间和文件大小。这有助于发现性能问题。
高级 Web 检查器工具
Web Inspector 具有用于更深入分析的工具。 “存储”选项卡显示站点保存的数据，例如 cookie 和本地存储。您可以查看和编辑此数据。
“时间线”选项卡记录一段时间内的页面活动。它显示脚本何时运行和布局更新。这有助于找到代码中缓慢的部分。
“图层”选项卡可视化页面的合成图层。这对于发现渲染问题很有用。您可以看到元素如何堆叠和重新绘制。
这些工具为开发人员提供了其网页的完整视图。它们使构建快速且无错误的网站变得更加容易。
Safari 包含内置开发人员工具 - 您无需安装任何内容即可调试浏览器中的问题。
