Safari 开放开发者工具
Safari 的开发者工具是 Web 开发者的强大盟友。要在 Safari 中打开开发人员工具，请单击顶部栏中的“开发”菜单，然后选择“显示 Web 检查器”。这解锁了一套用于分析和调试网页的功能。
Web Inspector 允许您实时查看和编辑 HTML、CSS 和 JavaScript。您可以检查页面元素、监视网络活动并测试响应式设计。这些工具可帮助您构建更好的网站并快速解决问题。
如果您没有看到“开发”菜单，您可以在 Safari 的偏好设置中启用它。转到 Safari > 首选项 > 高级，然后选中“在菜单栏中显示开发菜单”。这个简单的步骤允许访问 Safari 的全部开发人员功能。
| 特征 | 描述 |
|---|---|
| 元素 | 检查和编辑页面 HTML/CSS |
| 安慰 | 查看日志并运行 JavaScript |
| 网络 | 监控页面请求 |
| 来源 | 调试 JavaScript 代码 |
| 时间轴 | 分析页面性能 |
Safari 的开发人员工具为 Web 开发人员提供了一组强大的工具来检查、调试和优化网站。这些工具允许您分析网站的代码、跟踪网络活动并识别性能瓶颈。
启用开发菜单
- 打开 Safari 偏好设置：转到 Safari > 偏好设置。
- 转到高级：单击“高级”选项卡。
- 显示开发菜单：选中底部的“在菜单栏中显示开发菜单”框。
打开开发者工具
启用“开发”菜单后，您可以通过多种方式访问开发人员工具：
- 右键单击：右键单击网页上的任何元素，然后选择“检查元素”。
- 开发菜单：转到“开发”>“显示 Web 检查器”。
- 键盘快捷键：按 Option + Command + I。
探索开发者工具
开发者工具面板出现在 Safari 窗口的底部或侧面。它包含多个选项卡，每个选项卡提供不同的功能：
- 要素：检查并修改网页的 HTML 和 CSS。
- 安慰：查看 JavaScript 日志、错误和警告。实时执行 JavaScript 代码。
- 资料来源：调试 JavaScript 代码、设置断点并单步执行代码。
- 网络：监视网络请求和响应、分析加载时间并识别性能问题。
- 表现：分析网站性能、识别瓶颈并优化渲染速度。
- 记忆：分析内存使用情况并识别潜在的内存泄漏。
- 贮存：检查本地存储、会话存储、cookie 和缓存中存储的网站数据。
有效使用开发者工具
- 检查元素：使用“元素”选项卡可识别负责网页上特定元素的 HTML 和 CSS。这对于调试布局问题和进行设计更改很有帮助。
- 调试 JavaScript：使用“控制台”和“源”选项卡来识别和修复 JavaScript 错误。您可以设置断点来暂停代码执行并逐行单步执行代码。
- 分析网络性能：使用“网络”选项卡可以识别加载缓慢的资源并优化网站性能。
- 模拟不同的设备：使用响应式设计模式来测试网站在不同屏幕尺寸和设备上的外观和行为。
面向 Web 开发人员的其他资源
- Safari 开发者文档：Apple 提供了有关 Safari 开发人员工具的全面文档，包括每个功能和用例的详细说明。
- Web 开发人员博客和论坛：通过关注 Web 开发人员博客和参与在线论坛，了解最新的 Web 开发趋势和最佳实践。
- 在线课程和教程：通过涵盖 HTML、CSS、JavaScript 和 Web 性能优化等各种主题的在线课程和教程来增强您的 Web 开发技能。
Safari 开发者工具入门
Safari 的开发者工具为 Web 开发和调试提供了强大的功能。这些工具可帮助您实时检查和修改网页内容。
在 Safari 中启用开发者菜单
要访问 Safari 的开发人员工具，您首先需要启用“开发”菜单。打开 Safari 并单击菜单栏中的“Safari”。选择“设置”（或旧版本上的“首选项”）。单击“高级”选项卡。选中“旁边的框”为 Web 开发人员展示功能”。
“开发”菜单现在将出现在 Safari 的菜单栏中。该菜单包含用于 Web 开发的各种工具和选项。
您还可以使用键盘快捷键启用“开发”菜单。按 Command + 逗号打开 Safari 首选项。使用 Tab 键导航至“高级”选项卡。按空格键切换复选框。
访问 Safari Web 检查器
Web Inspector 是 Safari 的主要开发工具。要打开它，请单击菜单栏中的“开发”并选择“显示网页检查器“。或者，使用键盘快捷键 Option + Command + I。
Web 检查器作为单独的窗口或 Safari 中的面板打开。它为 Web 开发的不同方面提供了多个选项卡：
| 选项卡 | 功能 |
|---|---|
| 元素 | 检查并修改 HTML 和 CSS |
| 安慰 | 查看 JavaScript 输出和错误 |
| 来源 | 调试 JavaScript 代码 |
| 网络 | 监控网络请求 |
| 贮存 | 检查本地存储和 cookie |
您可以使用 Web 检查器对网页进行实时更改。这些更改是临时的，当您刷新页面时将会重置。此功能对于无需修改原始代码的测试和调试非常有用。
使用控制台和调试 JavaScript
Safari 的开发者工具提供了强大的 JavaScript 调试功能。控制台允许直接执行代码，而调试器有助于识别和修复脚本中的问题。
与 JavaScript 控制台交互
Safari 中的 JavaScript 控制台可让您运行代码并检查变量。要访问它，请打开 Safari 的开发人员工具并选择“控制台”选项卡。您可以直接在控制台提示符中键入 JavaScript 命令。它显示代码的输出以及发生的任何错误。
尝试这些控制台命令：
console.log("Hello World")– 将文本打印到控制台document.querySelector("h1").textContent– 获取第一个H1元素的文本window.innerWidth– 显示浏览器窗口宽度
控制台还显示网络请求、安全警告和其他诊断信息。这可以帮助您快速解决问题。
设置断点和调试代码
Safari 的调试器可让您暂停代码执行并检查变量。要使用它，请转到开发人员工具中的“源”选项卡。你会看到你的网站的 JavaScript 文件。
设置断点：
- 单击要暂停的行号
- 刷新页面触发断点
- 使用调试器控件单步调试代码
| 调试器控制 | 功能 |
|---|---|
| 跨过 | 执行当前行 |
| 步入 | 输入函数调用 |
| 走出去 | 退出当前功能 |
| 恢复 | 继续执行 |
您还可以使用仅在满足特定条件时触发的条件断点。这有助于查明复杂脚本中的具体问题。
检查和修改 HTML/CSS
Safari 中的 Web Inspector 为您提供了强大的工具来检查和编辑任何网页上的 HTML 和 CSS。您可以查看文档结构并进行实时样式更改。
检查和编辑 DOM
这网页检查器让您探索页面的文档对象模型 (DOM)。单击“元素”选项卡可查看 HTML 结构。您可以展开和折叠节点以专注于特定区域。
要编辑 HTML，请双击某个元素。这允许您更改标签、属性和内容。您的编辑会立即显示在页面上。右键单击元素可获取更多选项，例如复制、删除或强制状态。
当您将鼠标悬停在页面上时，DOM 树会突出显示元素。这可以帮助您快速找到相应的代码。您还可以使用搜索栏按标签、ID 或类来查找元素。
在 Inspector 中使用 CSS 进行样式设置
样式窗格显示应用于所选元素的 CSS 规则。您可以打开和关闭属性或直接编辑值。新样式立即在页面上生效。
要添加新规则，请单击样式窗格中的 + 按钮。您可以像在样式表中一样使用选择器定位元素。当您键入时，检查器会建议匹配的选择器。
| 特征 | 描述 |
|---|---|
| 颜色选择器 | 视觉上选择颜色 |
| 箱体模型 | 可视化边距、边框和填充 |
| 计算选项卡 | 查看最终应用的样式 |
您还可以直接在“源”选项卡中编辑样式表。这对于进行较大的更改或添加新规则非常有用。请记住，这些编辑是临时的，不会保存到您的文件中。
分析性能和网络问题
Safari 的开发人员工具提供了强大的功能来检查网页性能和网络活动。这些工具有助于识别瓶颈并优化加载时间。
对网络请求进行计时
Safari 开发人员工具中的“网络”选项卡提供了有关页面加载时间和资源请求的详细信息。你可以监控网络活动并查看每个元素加载需要多长时间。
建议阅读：在 macOS 上的 Safari 中检查网页：开发人员工具
要访问此信息：
- 打开 Safari 的开发者工具
- 单击网络选项卡
- 重新加载您的网页
网络面板显示瀑布图，显示每个请求的时间。这种视觉表示可以帮助您快速发现延误。您可以按大小、类型或加载时间对请求进行排序，以查明问题。
Safari 还允许您模拟较慢的网络条件。此功能可让您测试站点在不同连接速度下的性能。
优化页面性能
Safari 的开发人员工具包括时间轴功能，用于分析页面渲染和 JavaScript 执行。这个工具可以帮助你识别性能瓶颈并优化您的代码。
您可以跟踪的关键绩效指标：
| 公制 | 描述 |
|---|---|
| FPS | 每秒帧数 |
| CPU使用率 | 使用的处理能力 |
| 记忆 | 内存消耗 |
要使用时间轴：
- 打开开发者工具
- 选择时间轴选项卡
- 开始录音
- 与您的网页互动
- 停止记录并分析结果
时间轴显示布局何时发生变化以及 JavaScript 何时执行。此信息可帮助您找到运行缓慢的脚本或过多的 DOM 操作。
您还可以使用 Safari 的审核选项卡来获取提高页面速度的建议。它检查常见问题，例如未压缩的资源或低效的 CSS。
常见问题解答
Safari 开发者工具为 Web 开发者提供了强大的功能。这些工具有助于直接在浏览器中检查、调试和优化网站。
如何在 Mac 上启用和访问 Safari 中的开发人员工具？
要在 Mac 上的 Safari 中启用开发人员工具，请转至 Safari > 设置 > 高级。选中“在菜单栏中显示开发菜单”旁边的框。通过单击“开发”>“显示 Web 检查器”或右键单击网页并选择来访问这些工具检查元素。
Mac 上打开 Safari 开发者工具的快捷键是什么？
在 Mac 上打开 Safari 开发人员工具的键盘快捷键是选项 + 命令 + C。这会快速启动 Web Inspector 面板。
是否可以在 iPhone 上使用 Safari 开发人员工具？如果可以，如何使用？
您无法直接在 iPhone 上使用开发人员工具。相反，请将您的 iPhone 连接到 Mac。在 Mac 上打开 Safari 并启用开发人员工具。 iPhone 将出现在“开发”菜单中，允许您检查和调试移动 Safari。
您可以在 iPad 上的 Safari 中访问和使用开发人员工具吗？
与 iPhone 一样，您无法直接在 iPad 上使用开发人员工具。使用 Safari 将 iPad 连接到 Mac。在 Mac 上启用开发人员工具。您的 iPad 将显示在开发菜单，让您远程检查和调试iPad的Safari。
使用 Safari 开发人员工具以移动布局查看网站需要执行哪些步骤？
要以移动布局查看网站：
- 打开 Safari 开发者工具
- 单击响应式设计模式按钮
- 选择移动设备预设或设置自定义尺寸
- 网页现在将以选定的移动布局显示
如何访问 Safari 开发者工具中的“网络”选项卡？
要访问网络选项卡：
- 打开 Safari 开发者工具
- 在顶部菜单中查找“网络”选项卡
- 单击它可以查看网络活动
此选项卡显示所有网络请求，帮助您分析页面加载时间和资源。
| 特征 | 捷径 | 描述 |
|---|---|---|
| 打开开发者工具 | 选项 + 命令 + C | 快速启动 Web Inspector |
| 响应式设计模式 | Command + Shift + M | 切换移动布局视图 |
| 网络选项卡 | 不适用 | 通过开发者工具菜单访问 |
