1. 立项原因： 修改界面时，仅凭截图和文字描述，往往难以准确说明目标元素、样式细节及页面层级。开发人员需要反复检查元素、复制代码和补充说明。DomScan 将元素选择、信息采集、备注与导出串联起来，减少人工整理上下文的工作。
2. 适用行业： 适合软件开发、网站建设及桌面应用开发中的前端工程师、独立开发者、测试人员，以及需要沟通界面修改需求的产品与设计团队。
3. 业务场景： 在界面调整、样式问题排查、缺陷反馈或 AI 辅助开发时，连接目标应用，选中需要处理的元素，填写要求，再将结构、样式和截图一起交给后续处理人员或工具。
已实现功能： 用户可通过点选窗口或应用列表确定目标，查看连接状态；接入成功后，悬停高亮并选择界面元素，支持多选、拖选、层级导航和撤销。选中后可查看 HTML、计算样式、尺寸及定位信息，逐项填写修改要求，再复制上下文或导出 Markdown、JSON。
特色功能包括跨域与嵌套 iframe 拾取、元素截图、图文复制、截图保存路径回写，以及定位复验和框架源码信息探测。需要更完整资料时，可按需生成详细报告与资源包。紧凑主面板、自定义快捷键、活动窗口跟随和选择恢复，方便连续采集。
技术实现
采用 Swift 原生桌面程序与 JavaScript DOM 拾取脚本组合实现。Chromium、Electron 目标通过 Chrome DevTools Protocol（CDP） 接入；WKWebView 目标通过 DomScanBridge Debug 桥接接入。
主要模块包括窗口与目标发现、引擎连接、元素拾取、上下文整理、截图与剪贴板交付、连接诊断、会话记录及设置管理。原生控件与窗口截图使用 macOS 辅助功能接口和 ScreenCaptureKit 补充采集。
实现亮点
- 按引擎组织接入，复用拾取逻辑。 为 Chromium/CDP 与 WKWebView 分别提供连接方式，共享 DOM 选择能力，覆盖不同桌面 Web 容器，减少逐个应用定制的重复工作。
- 将视觉信息与结构信息一起交付。 将元素截图、HTML、样式、定位信息和用户备注组织成上下文，支持图文复制、文件导出及截图路径回写，让接收者更容易理解修改目标。
- 将常用流程收敛到紧凑面板。 主界面突出选择目标、采集元素、填写要求和复制，连接诊断、详细信息及高级设置按需打开，在保留功能的同时减少界面干扰。
实现难点
- 不同应用的网页接入方式不一致 → 分别实现 CDP 连接与 WKWebView Debug 桥接，并区分“窗口已选中”和“HTML 已连接”，提供分阶段诊断 → 用户能够判断目标是否具备接入条件，减少无效重试。
- 跨域、嵌套及跨进程 iframe 难以统一拾取 → 按 frame 管理执行上下文与拾取实例，结合页面、frame 路径和元素定位记录目标 → 支持复杂嵌入页面中的元素采集，并降低不同页面元素混淆的风险。
- 长元素截图容易受缩放、滚动及容器差异影响 → Chromium 采用元素截图链路，WKWebView 结合长图拼接与滚动位置恢复，并核对截图范围和像素结果 → 支持已验证场景下的长元素截图；未覆盖的 WKWebView 子 frame 场景明确提供区域截图补充方式。
评论