已加载全部内容

macOS 中检查 Web Views 的发现

链接
分类
文章开发2022-03-30 11:20:00
简介

通过在 macOS 中检查元素功能,可以发现大量非 WebKit 标准 CSS 属性及 React 的使用,或可从中推测 macOS 未来功能。

相似条目

笔记

Beta

本文介绍通过终端执行 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 元素,例如 。这些元素被作者判断为 Web Components,用于构建嵌入式 web view 的界面结构。

本文指出 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 打包应用。