开发工具代码编辑器数据科学【免费下载链接】positronPositron, a next-generation data science IDE项目地址https://gitcode.com/gh_mirrors/po/positron点击查看免费下载导读本指南围绕 Positron 仓库中.claude/skills/drive-positron/references/reading-ui-state.md这份调试手册展开它解决的是驱动 Electron 工作台workbench时一个最隐蔽的陷阱几乎每一种错误的 UI 读取方式都会返回一个看似合理、实则错误的答案而不是报错。读完本文你将掌握如何通过 CDPChrome DevTools Protocol与 Playwright CLI 可靠地读取虚拟化列表quick pick、树视图、Notebook 单元格列表、识别被关闭后仍残留在 DOM 中的输入控件、理解分隔符heading的真实渲染方式并学会用截图对照 回读自证的方法杜绝误报。本文所有结论均可在当前仓库的源码与脚本中逐一验证。先建立铁律读取结果与截图冲突时读取是错的原文开篇就给出了整篇指南的第一原则Every failure below produces a plausible, wrong answer rather than an error. If a reading of the workbench disagrees with a screenshot, the reading is wrong until proven otherwise.下面每一种失败都会产生看似合理但错误的答案而不是报错。如果对工作台的读取与截图不一致在没有被证明之前读取是错的。这条原则决定了后续所有技巧的姿势DOM 读取只是假设截屏才是事实凡是读到某某不存在列表缺少条目必须先怀疑自己的测量方法而不是产品。这也是下文确认测量方法能看到它自以为看到的东西一节的出发点。虚拟化列表用 transform 移动窗口而不是scrollTop原理monaco-list只渲染焦点附近的一行窗口Positron 继承自 VS Code其工作台中的大量列表quick pick、树视图、Notebook 单元格列表都构建在monaco-list之上。它并不是把全部条目渲染进 DOM而是只渲染聚焦行周围的一个窗口屏幕外的行根本不在 DOM 中渲染窗口的位置由.monaco-list-rows上的 CSStransform决定。在 listView.ts 中可以看到开启transformOptimization时容器行会通过translate3d定位渲染窗口const transformOptimization options.transformOptimization ?? DefaultOptions.transformOptimization; if (transformOptimization) { this.rowsContainer.style.transform translate3d(0px, 0px, 0px); }而每行真实的位置索引以data-index属性写在行节点上listView.tsitem.row!.domNode.setAttribute(data-index, ${index});三条必然推论基于只渲染窗口 transform 定位这一事实必然导出三个容易踩坑的推论数.monaco-list-row元素 数渲染窗口而不是数列表。一个有 40 项的列表在 DOM 里读出来可能只有 12 行看起来就像缺了条目。设置element.scrollTop无效且不报错读回scrollTop永远是0无论列表当前显示到哪。因为窗口是 transform 移动的虚拟滚动状态并不体现在scrollTop上scrollTop只作用于滚动容器本身见 listView.ts。每行的真实位置要看data-index而不是它是第几个兄弟元素——后者只是它在渲染窗口内的位置。正确做法用控件自己处理的按键驱动列表并逐帧收割要完整读取一个虚拟化列表不要试图一次性抓 DOM而是用控件自己处理的按键驱动它每走一步收割当前渲染出来的所有行。仓库提供了现成脚本 quickpick-enum.sh.claude/skills/drive-positron/scripts/quickpick-enum.sh --session positron它通过 ArrowDown 键逐步移动焦点每步收割.monaco-list-row中可见的行输出index|kind|label|description|detail|active每行一条、按列表顺序排列并在结束时把选择器留在它启动时所在的条目上。其脚本头注释quickpick-enum.sh明确复述了本文的要点快速拾取渲染进虚拟化的 Monaco 树只有焦点周围的行窗口存在其余不在 DOM 中窗口靠 CSS transform 移动而非scrollTop。脚本在一次eval调用内完成整个走查quickpick-enum.sh注释给出了原因如果从 bash 逐键调用每次按键都要启动一个进程步与步之间的时间间隔会让拾取器有机会失焦或在两次读取之间重新过滤。关闭的 quick input 控件不会离开 DOM隐患关闭只是隐藏第二个拾取器会让querySelector拿到旧的关闭一个 quick pick 只是把它隐藏并不会把它从 DOM 中移除。第二次打开拾取器时DOM 里会多出一个.quick-input-widget于是document.querySelector(.quick-input-widget)永远返回第一个通常是早已关闭的那个陈旧控件。正确的取法是按可见性挑选活着的控件Array.from(document.querySelectorAll(.quick-input-widget)) .find(w w.offsetParent ! null)offsetParent ! null正是 quickpick-enum.sh 中选控件的过滤条件const widget Array.from(document.querySelectorAll(.quick-input-widget)) .find(w w.offsetParent ! null);同样的隐患也适用于按键press之类按键操作若瞄准一个已经关闭的拾取器按键会落到焦点实际所在处——在 Positron 中往往是控制台Console。结果是这些键被静默地当作输入执行看起来没有反应实际却污染了控制台输入。因此凡是向拾取器发键先确认它仍然开着、焦点确实在它上面。Quick pick 的分隔符是行而方向键会跳过它们分隔符的两种渲染形态拾取器里的分组标题separator / heading有两种出现方式具体取决于这个 pick 的实现作为独立的一行该行的.quick-input-list-entry携带quick-input-list-separator-as-item类附着在它下面的条目上以.quick-input-list-separator元素存在于该条目 entry 内部当条目没有分隔符时以display: none隐藏。第二种形态还有个更深的坑quickpick-enum.sh 的注释指出附着式分隔符属于被回收复用的行模板渲染器隐藏它时只是display: none而不清空其文本所以上一次条目的旧标题文字仍然可读——必须只在它实际显示offsetParent ! null时才采集const readAttachedGroup row { const separator row.querySelector(.quick-input-list-separator); if (!separator || separator.offsetParent null) { return undefined; } const label clean(separator); return label ? label : undefined; };方向键焦点永远只落在条目上方向键的焦点只会落在可选项items上永远不会落在分隔符行上——quickInput.ts会把焦点过滤到QuickPickItemElement。因此单纯沿列表走查报告的是条目的顺序标题必须从恰好渲染出来的那些行里捡用data-index才能把标题行与条目行重新交织回真实的列表顺序quickpick-enum.sh 正是按index排序后把附着式标题插回其所属条目的上方。单选框在列表末尾循环走查必须以焦点回到起点为终止条件单选拾取器在列表末尾会循环回到开头。源码依据在 quickInput.tsthis.ui.list.shouldLoop !this.canSelectMany;即shouldLoop !canSelectMany——单选canSelectMany为假时列表允许循环。这条实现事实直接决定走查策略一个期望走到底部就停的走查会永远跑下去一个在焦点回到起始行时停下的走查既覆盖了全部条目又把拾取器还原到了它被发现时的状态quickpick-enum.sh 中current startIndex即判定wrapped停止多选拾取器不循环走查改为焦点不再移动current previous→no-loop-end时停止。报告某物不存在之前先证明你的测量方法能看到确定存在的东西这是整份文档的收尾铁律一个匹配不到任何东西的选择器、一个读错了容器的列表、和一个真正为空的列表在输出上是无法区分的。便宜且有效的自检截图对照先截屏再拿截图与读取结果比对。不一致 读取是错的。回读刚设置的值要读回来验证而不是假设写入生效了。已知答案计数先用答案已知的东西例如截图中可见的分隔符数量验证计数方法再相信对未知对象的计数。这套自检与整篇文档的第一条铁律形成闭环截图是唯一可信的事实源DOM 读取永远是待验证的假设。把文档放进 workflow在哪里用这些技巧这份参考文档隶属于drive-positron技能SKILL.md该技能负责通过 CDP 驱动一个可丢弃的 Positron 开发构建。技能正文在Read a whole quick pick一节明确要求在信任任何其他对列表、树或 quick input 控件的读取之前先读references/reading-ui-state.mdSKILL.md因为它涵盖虚拟化、关闭拾取器遗留的隐藏控件、以及分隔符的渲染方式。配合的实操流程是用 launch.sh 在隔离的临时 profile 中启动 Positron用 Playwright CLI 附加到 CDP 端口./node_modules/.bin/playwright-cli -spositron attach --cdphttp://127.0.0.1:$CDP_PORT打开某个 quick pick然后用quickpick-enum.sh完整枚举其条目不要数.monaco-list-row不要设置scrollTop任何缺失结论先截屏自证测量方法有效。该 workflow 定位为自动化测试的补充而非替代当需要回归覆盖时应补充对应的 e2e 测试见.claude/skills/author-e2e-tests页面对象则优先使用test/e2e/pages/下维护的版本。小结把reading-ui-state.md的三层要点记牢Positron UI 状态读取就不会再自欺陷阱症状正确姿势虚拟化列表数行数少、scrollTop读写无效恒为 0用 ArrowDown 驱动走查读data-index逐帧收割关闭的 quick input 残留 DOMquerySelector拿到陈旧控件、按键落入控制台用offsetParent ! null过滤出活控件分隔符渲染形态焦点跳过标题行、附着式标题文本残留两种形态分别识别用data-index交织回真实顺序循环终止用焦点回到起点测量方法不可见缺失与方法错误无法区分截图对照、写入回读、已知答案计数自检核心依据都在当前仓库中可复现虚拟化与 transform 见 listView.ts循环行为见 quickInput.ts走查实现见 quickpick-enum.sh技能工作流见 SKILL.md。遇到任何UI 与预期不符的排查场景先截屏再按本文的读取方法重新测量。赞分享开发工具代码编辑器数据科学【免费下载链接】positronPositron, a next-generation data science IDE项目地址https://gitcode.com/gh_mirrors/po/positron点击查看免费下载相关推荐CopilotKit 共享状态读取Shared State Read实战让 AG2 Agent 直接读取前端 UI 状态CopilotKit 共享状态读取Shared State Read实战让 AG2 Agent 直接读取前端 UI 状态 CopilotKit 的 Sha人工智能AI AgentAgent 框架前端后端Reactive Resume免费开源简历生成器一条命令自托管Reactive Resume免费开源简历生成器一条命令自托管 周五下午你要把简历投出去可 PDF 一过解析器栏目全乱了邮箱被拆成两行工作经历顺序前端后端AI 应用MCP 服务dsh-pluginCocos Creator UI列表优化ScrollView虚拟列表实现Cocos Creator UI列表优化ScrollView虚拟列表实现 你是否遇到过游戏中UI列表滑动卡顿的问题当列表项超过100个时帧率骤降甚至应用崩游戏开发图形学3D渲染上一篇SeaTunnel Kafka Sink 连接器完全指南配置、Exactly-Once 语义与生产实践下一篇OpenProject 15.0.0 版本解析活动时间线重塑、Emoji 评论反应与 SSO 管理界面创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考