通过在 macOS 中检查元素功能,可以发现大量非 WebKit 标准 CSS 属性及 React 的使用,或可从中推测 macOS 未来功能。
通过在 macOS 中检查元素功能,可以发现大量非 WebKit 标准 CSS 属性及 React 的使用,或可从中推测 macOS 未来功能。
本文介绍通过终端执行 defaults write 命令设置 WebKitDeveloperExtras 为 true,可在 macOS 系统 WebView 中启用「检查元素」右键菜单。该设置让用户能调用 Safari Web Inspector 检查原生应用内的网页视图,如系统偏好设置中的 Apple Music 面板。
文章提到 macOS WebView 使用 WebKit 的非标准 CSS 关键字来调用系统颜色和字体,实现与原生 UI 的视觉一致。作者以 font-family: -apple-system 为例,说明这种做法如何帮助网页视图在系统应用中更好地融合,并最终影响标准演进。
本文中提到,在 macOS 系统偏好设置的“家庭共享”面板下的 Apple Music 选项中,加载了一个 javascript-packed.js 文件。该文件使用 React 来驱动对应的 web view 界面,实现类似原生 UI 的交互功能。
文章指出,在 macOS 系统偏好设置的“Apple ID”面板中,检查器显示了自定义 DOM 元素,例如
本文指出 macOS 中的 WebView 基于 WebKit 渲染引擎,支持非标准 CSS 关键字以模拟系统字体和样式。作者观察到 WebKit 允许网页视图无缝融入原生应用界面,并推测这推动了 Safari/WebKit 对系统字体等特性的支持。
文章中的 WebView 指嵌入 macOS 原生应用(如系统偏好设置)的网页视图,用于呈现部分系统界面。作者通过启用检查功能,揭示这些 WebView 实际加载了 JavaScript 文件(如使用 React 的 javascript-packed.js)和自定义元素。它们被用来模拟原生 UI,同时支持 CSS 样式与系统颜色集成。
文章演示了在 macOS 系统偏好设置的 Family Sharing 面板中,通过上下文菜单可直接唤出 Safari Web Inspector 检查 WebView 内容。作者用它查看了 DOM 结构、React 脚本和自定义 Web 组件元素,展示了系统网页视图的内部实现细节。
本文讨论了在 macOS 系统偏好设置的 Apple Music 和 Apple ID 等面板中,部分界面实际由 WebView 实现。作者通过终端命令启用检查功能,展示了如何用 Safari Web Inspector 查看这些原生应用中的网页内容。文章指出这种做法让系统界面能借助 Web 技术实现,同时保持与原生 UI 的融合。
本文将 macOS 原生应用中嵌入的 web view 与 Electron 应用类比,指出两者都能通过 Safari 检查器查看和调试内部网页内容。但这些 web view 实际运行在系统原生应用中,而非独立的 Electron 打包应用。
可左右滑动查看