VS Code Copilot Chat 扩展自动化实战基于 CDP 与 playwright/cli 启动、交互与调试指南【免费下载链接】vscodeVisual Studio Code项目地址: https://gitcode.com/GitHub_Trending/vscode6/vscode本文围绕 Copilot Chat 扩展仓库中的自动化技能文档 SKILL.md完整讲解如何通过playwright/cli挂载到 VS Code Insiders 暴露的 Chrome DevTools ProtocolCDP端口实现对 Copilot Chat 扩展的 UI 自动化从带调试端口启动实例、attach 附加连接、用 snapshot/ref 工作流操作 Monaco 编辑器输入框到代码修改后的重启与清理。读完你可以独立搭建一套可复现的启动—交互—截图取证—排障自动化链路用于测试扩展 UI、自动操作聊天面板或调试扩展行为。原理为什么可以用 Web 自动化工具驱动 VS CodeVS Code 构建于 Electron/Chromium 之上启动时可以通过--remote-debugging-port参数暴露一个 CDP 端口。playwright/cli能够直接 attach 到这个端口从而把操作网页的那套snapshot快照—interact交互—re-snapshot再快照工作流原样用到 VS Code 窗口上Build先编译扩展Launch用扩展开发参数加远程调试端口启动 VS Code InsidersAttachnpx playwright/cli附加到 CDP 端口Snapshot快照发现可交互元素每个元素带ref引用Interact用元素 ref 执行fill/type/press等命令Re-snapshot导航或状态变化后重新快照获取新 ref。需要注意CSS 选择器是内部实现细节。像.interactive-input-part、.monaco-editor、.view-line这类选择器属于 VS Code 内部结构可能随版本变化。自动化在 VS Code 更新后失效时应重新 snapshot 并检查选择器是否改变。前置条件技能文档明确列出四项前提结合当前仓库可以逐条核实playwright/cli可用性在仓库根目录执行npm install后即可通过npx playwright/cli调用命令该工具通过 devDependencies 提供也可以npm install -g playwright/cli全局安装。从源码结构看extensions/copilot/package.json 的 devDependencies 中声明了playwright: ^1.61.1与文档描述一致。必须使用code-insiders该扩展依赖大量 proposed VS Code APIStable 版 VS Code不会激活它必须用 VS Code Insiders。文档写作时扩展使用 58 个 proposed API而当前仓库中 package.json 的enabledApiProposals已列出63个 proposed APIengines.vscode要求为^1.137.0——proposed API 数量还在增长这进一步说明 Insiders 是唯一可行的宿主。扩展必须先编译npm run compile做一次性构建npm run watch用于迭代开发。对应 package.json 中的脚本定义compile为node .esbuild.mts --devwatch为npm-run-all -lp watch:esbuild watch:typecheck。CSS 选择器是内部实现细节见上文原理部分。启动命令、关键参数与两个必踩的坑启动命令# 构建并用扩展开发模式启动 npm run compile # 使用持久化的 user-data-dir保证认证状态跨会话保留。 # .vscode-ext-debug 相对于项目根目录 —— 在 worktree 中同样可用且已被 gitignore。 code-insiders --extensionDevelopmentPath$PWD --remote-debugging-port9223 --user-data-dir$PWD/.vscode-ext-debug # Windows (PowerShell): # code-insiders --extensionDevelopmentPath$PWD --remote-debugging-port9223 --user-data-dir$PWD\.vscode-ext-debug # 等待 VS Code 启动完成重试直到附加成功 for i in 1 2 3 4 5; do npx playwright/cli attach --cdphttp://127.0.0.1:9223 2/dev/null break || sleep 3; done # 确认连接到的是正确目标而不是 about:blank # 如果 tab-list 显示的目标不对先 npx playwright/cli close 再重新 attach npx playwright/cli tab-list npx playwright/cli snapshot$PWD在仓库根目录即 extensions/copilot下运行时指当前工作目录仓库自带的调试配置 extensions/copilot/.vscode/launch.json 中同样使用--extensionDevelopmentPath${workspaceFolder}的模式来启动扩展开发宿主。关键参数说明参数作用要点--extensionDevelopmentPathpath从源码加载扩展必须先编译在仓库根目录运行时使用$PWD--remote-debugging-port9223开启 CDP选 9223 是为了避开其他应用常用 9222 的端口冲突--user-data-dirpath使用独立 profile启动新进程必须用持久路径如$PWD/.vscode-ext-debug不要用/tmp/...其中--user-data-dir目录被 extensions/copilot/.gitignore 第 45 行的.vscode-ext-debug/规则忽略不会污染版本库。坑 1缺少--user-data-dir时进程直接退出没有--user-data-dir时VS Code 会检测到已运行的实例、把参数转发过去然后立即退出——你会看到 Sent env to running instance. Terminating... 且 CDP 永远不会启动。使用独立 user-data-dir 才能保证启动一个真正的新进程并监听 9223 端口。坑 2临时目录会丢失认证Copilot Chat 扩展需要已认证的 GitHub 会话才能工作。用临时目录如/tmp/...会创建一个全新 profile没有认证状态——你会撞上 Sign in to use Copilot 登录墙模型解析随之失败并报 Language model unavailable。必须始终使用持久化的--user-data-dir如$PWD/.vscode-ext-debug首次启动时手动登录一次后续启动就会复用该认证会话认证、设置和扩展状态都会跨会话保留。Attach 与多 Webview 的 Tab 管理# 附加到指定 CDP 端口 npx playwright/cli attach --cdphttp://127.0.0.1:9223attach 之后后续所有命令都作用于已连接的应用无需重复附加。VS Code 内部使用多个 webview主窗口、侧边栏、各个 webview 面板等。当快照中看不到目标元素时用 tab 命令列出并切换# 列出所有可用目标窗口、webview 等 npx playwright/cli tab-list # 按索引切换到指定 tab npx playwright/cli tab-select 2截图取证建立可视化的证据链文档强调在每个关键节点截图——启动后、交互前后、出错时。截图能直观记录 UI 状态对调试失败和记录成果价值很大。推荐把截图保存进.vscode-ext-debug/screenshots/已被 gitignore并用带时间戳的子目录隔离每次运行避免互相覆盖# 为本次运行创建带时间戳的截图目录 SCREENSHOT_DIR.vscode-ext-debug/screenshots/$(date %Y-%m-%dT%H-%M-%S) mkdir -p $SCREENSHOT_DIR # Windows (PowerShell): # $screenshotDir .vscode-ext-debug\screenshots\$(Get-Date -Format yyyy-MM-ddTHH-mm-ss) # New-Item -ItemType Directory -Force -Path $screenshotDir # 保存一张截图 npx playwright/cli screenshot --filename$SCREENSHOT_DIR/after-launch.png在 macOS 上若截图报 Permission denied需要给终端授予屏幕录制权限System Settings → Privacy Security → Screen Recording作为兜底可以用后文的eval校验片段确认文本是否已输入它不依赖屏幕权限。操作 Monaco 编辑器兼容性矩阵与推荐姿势VS Code 中所有文本输入——包括 Copilot Chat 输入框——都由 Monaco Editor 承载。Monaco 编辑器在可访问性快照中表现为 textbox但要用特定命令才能正确交互。fill ref—— 首选方案fill命令带快照 ref一步完成聚焦和输入# 快照找到聊天输入框的 ref npx playwright/cli snapshot # 寻找形如: textbox The editor is not accessible... [refe51] # 直接用 ref 填入 —— 自动处理聚焦 npx playwright/cli fill e51 Hello from George! # 发送消息 npx playwright/cli press Enter # 重新快照前等待响应生成完毕。 # 轮询直到 Stop generating 按钮消失 for i in $(seq 1 30); do npx playwright/cli snapshot 2/dev/null | grep -q Stop generating || break sleep 1 done npx playwright/cli snapshot这是最简单、最可靠的方式对主编辑器的聊天输入框和侧边栏聊天面板都有效。提示如果fill静默丢字编辑器保持为空ref 可能已过期或编辑器尚未就绪。重新 snapshot 拿到新 ref 再试可以用下文校验 Monaco 中文本的片段确认文本是否已输入。type—— 聚焦之后可用如果焦点已在 Monaco 编辑器上type可以工作# 先聚焦可用空字符串 fill或 JS 鼠标事件聚焦 npx playwright/cli fill e51 # 随后 type 可输入后续文本 npx playwright/cli type More text herepress—— 单键按压万能兜底只要焦点在 Monaco 编辑器上press永远可用适合特殊键、快捷键以及逐字符输入文本# 逐字符输入所有构建都可用 npx playwright/cli press H npx playwright/cli press e npx playwright/cli press l npx playwright/cli press l npx playwright/cli press o npx playwright/cli press Space # 空格用 Space # 全选 # macOS: npx playwright/cli press Metaa # Linux / Windows: npx playwright/cli press Controla npx playwright/cli press Backspace # 删除选中内容 npx playwright/cli press Enter # 发送消息 / 换行 # 发送到新会话 # macOS: npx playwright/cli press MetaShiftEnter # Linux / Windows: npx playwright/cli press ControlShiftEnter不可行的方式方式结果原因对编辑器click refElement blocked by another elementMonaco 在 textarea 之上覆盖了一个透明 div通过eval设置textarea.value并派发input事件无效果Monaco 不读取 textarea 的 value 属性兜底用 JavaScript 鼠标事件聚焦fill不生效时例如 ref 过期可以用 JS 事件聚焦编辑器npx playwright/cli eval (() { const inputPart document.querySelector(.interactive-input-part); const editor inputPart.querySelector(.monaco-editor); const rect editor.getBoundingClientRect(); const x rect.x rect.width / 2; const y rect.y rect.height / 2; editor.dispatchEvent(new MouseEvent(mousedown, { bubbles: true, clientX: x, clientY: y })); editor.dispatchEvent(new MouseEvent(mouseup, { bubbles: true, clientX: x, clientY: y })); editor.dispatchEvent(new MouseEvent(click, { bubbles: true, clientX: x, clientY: y })); return activeElement: document.activeElement?.className; })() # JS 聚焦之后type 和 press 即可工作 npx playwright/cli type Text after JS focusJS 鼠标事件触发后document.activeElement会成为带native-edit-context类的DIV——这正是 VS Code 的原生文本编辑表面。校验 Monaco 中文本是否输入成功Monaco 把文本渲染在.view-line元素里而不是 textareanpx playwright/cli eval (() { const inputPart document.querySelector(.interactive-input-part); return Array.from(inputPart.querySelectorAll(.view-line)).map(vl vl.textContent).join(|); })()清空 Monaco 输入# macOS: npx playwright/cli press Metaa # Linux / Windows: npx playwright/cli press Controla npx playwright/cli press Backspace代码修改后的重启工作流修改扩展源码后必须重启 VS Code 才能加载新构建——extension host 只在启动时加载编译后的 bundle不存在热重载。标准步骤重新编译扩展杀掉使用本调试 user-data-dir 的 VS Code 实例用相同参数重新启动# 1. 重新编译 npm run compile # 2. 杀掉绑定本调试 profile 的 VS Code 实例再重新启动 # macOS / Linux: kill $(ps ax -ww -o pid,command | grep $PWD/.vscode-ext-debug | grep -v grep | awk {print $1} | head -1) # Windows (PowerShell): # Get-CimInstance Win32_Process | Where-Object { $_.CommandLine -like *$PWD\.vscode-ext-debug* } | ForEach-Object { Stop-Process -Id $_.ProcessId } # 3. 重新启动 code-insiders \ --extensionDevelopmentPath$PWD \ --remote-debugging-port9223 \ --user-data-dir$PWD/.vscode-ext-debug # 4. 重新附加 npx playwright/cli for i in 1 2 3 4 5; do npx playwright/cli attach --cdphttp://127.0.0.1:9223 2/dev/null break || sleep 3; done npx playwright/cli snapshot提示高频迭代时可在另一个终端运行npm run watch让编译自动进行但仍需杀掉并重启 VS Code 才能加载新 bundle。排障清单Connection refused 或 Cannot connect确认 VS Code Insiders 是用--remote-debugging-port9223启动的若 VS Code 此前已在运行退出后带该参数重启检查端口是否被其他进程占用macOS / Linuxlsof -i :9223Windowsnetstat -ano | findstr 9223快照中看不到目标元素VS Code 使用多个 webview。用npx playwright/cli tab-list列出目标再用npx playwright/cli tab-select index切换到正确的 tab。Monaco 输入框无法输入标准click对 Monaco 编辑器无效见上文兼容性矩阵fill ref是首选press逐键输入在所有构建上可用type在建立焦点后可用。macOS 截图 Permission deniednpx playwright/cli screenshot报权限错误时终端需要 Screen Recording 权限System Settings → Privacy Security → Screen Recording。兜底方案用eval校验片段确认文本已输入不需要屏幕权限。收尾清理任务完成后务必杀掉调试 VS Code 实例——留着它不仅浪费资源还会一直占用 CDP 端口# 断开 npx playwright/cli npx playwright/cli close # 杀掉调试 VS Code 实例 # macOS / Linux: kill $(ps ax -ww -o pid,command | grep $PWD/.vscode-ext-debug | grep -v grep | awk {print $1} | head -1) # Windows (PowerShell): # Get-CimInstance Win32_Process | Where-Object { $_.CommandLine -like *$PWD\.vscode-ext-debug* } | ForEach-Object { Stop-Process -Id $_.ProcessId }小结这套自动化方案的核心可以归纳为三句话用--extensionDevelopmentPath --remote-debugging-port9223 持久化 --user-data-dir三件套启动可附加、可认证的 Insiders 实例用 snapshot-ref 工作流加fill/press命令安全地驱动 Monaco 输入框用时间戳截图目录保留每次运行的视觉证据链。完整可执行的命令与兼容性细节均以 extensions/copilot/.agents/skills/launch/SKILL.md 为准相关仓库佐证材料包括 extensions/copilot/package.jsonproposed API 列表、compile/watch 脚本、playwright devDependency、extensions/copilot/.vscode/launch.json--extensionDevelopmentPath调试配置与 extensions/copilot/.gitignore.vscode-ext-debug/忽略规则。需要留意的是文中的 CSS 选择器与 API 计数均会随版本漂移自动化失效时先重新 snapshot 再对照当前构建排查。【免费下载链接】vscodeVisual Studio Code项目地址: https://gitcode.com/GitHub_Trending/vscode6/vscode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
VS Code Copilot Chat 扩展自动化实战：基于 CDP 与 @playwright/cli 启动、交互与调试指南
VS Code Copilot Chat 扩展自动化实战基于 CDP 与 playwright/cli 启动、交互与调试指南【免费下载链接】vscodeVisual Studio Code项目地址: https://gitcode.com/GitHub_Trending/vscode6/vscode本文围绕 Copilot Chat 扩展仓库中的自动化技能文档 SKILL.md完整讲解如何通过playwright/cli挂载到 VS Code Insiders 暴露的 Chrome DevTools ProtocolCDP端口实现对 Copilot Chat 扩展的 UI 自动化从带调试端口启动实例、attach 附加连接、用 snapshot/ref 工作流操作 Monaco 编辑器输入框到代码修改后的重启与清理。读完你可以独立搭建一套可复现的启动—交互—截图取证—排障自动化链路用于测试扩展 UI、自动操作聊天面板或调试扩展行为。原理为什么可以用 Web 自动化工具驱动 VS CodeVS Code 构建于 Electron/Chromium 之上启动时可以通过--remote-debugging-port参数暴露一个 CDP 端口。playwright/cli能够直接 attach 到这个端口从而把操作网页的那套snapshot快照—interact交互—re-snapshot再快照工作流原样用到 VS Code 窗口上Build先编译扩展Launch用扩展开发参数加远程调试端口启动 VS Code InsidersAttachnpx playwright/cli附加到 CDP 端口Snapshot快照发现可交互元素每个元素带ref引用Interact用元素 ref 执行fill/type/press等命令Re-snapshot导航或状态变化后重新快照获取新 ref。需要注意CSS 选择器是内部实现细节。像.interactive-input-part、.monaco-editor、.view-line这类选择器属于 VS Code 内部结构可能随版本变化。自动化在 VS Code 更新后失效时应重新 snapshot 并检查选择器是否改变。前置条件技能文档明确列出四项前提结合当前仓库可以逐条核实playwright/cli可用性在仓库根目录执行npm install后即可通过npx playwright/cli调用命令该工具通过 devDependencies 提供也可以npm install -g playwright/cli全局安装。从源码结构看extensions/copilot/package.json 的 devDependencies 中声明了playwright: ^1.61.1与文档描述一致。必须使用code-insiders该扩展依赖大量 proposed VS Code APIStable 版 VS Code不会激活它必须用 VS Code Insiders。文档写作时扩展使用 58 个 proposed API而当前仓库中 package.json 的enabledApiProposals已列出63个 proposed APIengines.vscode要求为^1.137.0——proposed API 数量还在增长这进一步说明 Insiders 是唯一可行的宿主。扩展必须先编译npm run compile做一次性构建npm run watch用于迭代开发。对应 package.json 中的脚本定义compile为node .esbuild.mts --devwatch为npm-run-all -lp watch:esbuild watch:typecheck。CSS 选择器是内部实现细节见上文原理部分。启动命令、关键参数与两个必踩的坑启动命令# 构建并用扩展开发模式启动 npm run compile # 使用持久化的 user-data-dir保证认证状态跨会话保留。 # .vscode-ext-debug 相对于项目根目录 —— 在 worktree 中同样可用且已被 gitignore。 code-insiders --extensionDevelopmentPath$PWD --remote-debugging-port9223 --user-data-dir$PWD/.vscode-ext-debug # Windows (PowerShell): # code-insiders --extensionDevelopmentPath$PWD --remote-debugging-port9223 --user-data-dir$PWD\.vscode-ext-debug # 等待 VS Code 启动完成重试直到附加成功 for i in 1 2 3 4 5; do npx playwright/cli attach --cdphttp://127.0.0.1:9223 2/dev/null break || sleep 3; done # 确认连接到的是正确目标而不是 about:blank # 如果 tab-list 显示的目标不对先 npx playwright/cli close 再重新 attach npx playwright/cli tab-list npx playwright/cli snapshot$PWD在仓库根目录即 extensions/copilot下运行时指当前工作目录仓库自带的调试配置 extensions/copilot/.vscode/launch.json 中同样使用--extensionDevelopmentPath${workspaceFolder}的模式来启动扩展开发宿主。关键参数说明参数作用要点--extensionDevelopmentPathpath从源码加载扩展必须先编译在仓库根目录运行时使用$PWD--remote-debugging-port9223开启 CDP选 9223 是为了避开其他应用常用 9222 的端口冲突--user-data-dirpath使用独立 profile启动新进程必须用持久路径如$PWD/.vscode-ext-debug不要用/tmp/...其中--user-data-dir目录被 extensions/copilot/.gitignore 第 45 行的.vscode-ext-debug/规则忽略不会污染版本库。坑 1缺少--user-data-dir时进程直接退出没有--user-data-dir时VS Code 会检测到已运行的实例、把参数转发过去然后立即退出——你会看到 Sent env to running instance. Terminating... 且 CDP 永远不会启动。使用独立 user-data-dir 才能保证启动一个真正的新进程并监听 9223 端口。坑 2临时目录会丢失认证Copilot Chat 扩展需要已认证的 GitHub 会话才能工作。用临时目录如/tmp/...会创建一个全新 profile没有认证状态——你会撞上 Sign in to use Copilot 登录墙模型解析随之失败并报 Language model unavailable。必须始终使用持久化的--user-data-dir如$PWD/.vscode-ext-debug首次启动时手动登录一次后续启动就会复用该认证会话认证、设置和扩展状态都会跨会话保留。Attach 与多 Webview 的 Tab 管理# 附加到指定 CDP 端口 npx playwright/cli attach --cdphttp://127.0.0.1:9223attach 之后后续所有命令都作用于已连接的应用无需重复附加。VS Code 内部使用多个 webview主窗口、侧边栏、各个 webview 面板等。当快照中看不到目标元素时用 tab 命令列出并切换# 列出所有可用目标窗口、webview 等 npx playwright/cli tab-list # 按索引切换到指定 tab npx playwright/cli tab-select 2截图取证建立可视化的证据链文档强调在每个关键节点截图——启动后、交互前后、出错时。截图能直观记录 UI 状态对调试失败和记录成果价值很大。推荐把截图保存进.vscode-ext-debug/screenshots/已被 gitignore并用带时间戳的子目录隔离每次运行避免互相覆盖# 为本次运行创建带时间戳的截图目录 SCREENSHOT_DIR.vscode-ext-debug/screenshots/$(date %Y-%m-%dT%H-%M-%S) mkdir -p $SCREENSHOT_DIR # Windows (PowerShell): # $screenshotDir .vscode-ext-debug\screenshots\$(Get-Date -Format yyyy-MM-ddTHH-mm-ss) # New-Item -ItemType Directory -Force -Path $screenshotDir # 保存一张截图 npx playwright/cli screenshot --filename$SCREENSHOT_DIR/after-launch.png在 macOS 上若截图报 Permission denied需要给终端授予屏幕录制权限System Settings → Privacy Security → Screen Recording作为兜底可以用后文的eval校验片段确认文本是否已输入它不依赖屏幕权限。操作 Monaco 编辑器兼容性矩阵与推荐姿势VS Code 中所有文本输入——包括 Copilot Chat 输入框——都由 Monaco Editor 承载。Monaco 编辑器在可访问性快照中表现为 textbox但要用特定命令才能正确交互。fill ref—— 首选方案fill命令带快照 ref一步完成聚焦和输入# 快照找到聊天输入框的 ref npx playwright/cli snapshot # 寻找形如: textbox The editor is not accessible... [refe51] # 直接用 ref 填入 —— 自动处理聚焦 npx playwright/cli fill e51 Hello from George! # 发送消息 npx playwright/cli press Enter # 重新快照前等待响应生成完毕。 # 轮询直到 Stop generating 按钮消失 for i in $(seq 1 30); do npx playwright/cli snapshot 2/dev/null | grep -q Stop generating || break sleep 1 done npx playwright/cli snapshot这是最简单、最可靠的方式对主编辑器的聊天输入框和侧边栏聊天面板都有效。提示如果fill静默丢字编辑器保持为空ref 可能已过期或编辑器尚未就绪。重新 snapshot 拿到新 ref 再试可以用下文校验 Monaco 中文本的片段确认文本是否已输入。type—— 聚焦之后可用如果焦点已在 Monaco 编辑器上type可以工作# 先聚焦可用空字符串 fill或 JS 鼠标事件聚焦 npx playwright/cli fill e51 # 随后 type 可输入后续文本 npx playwright/cli type More text herepress—— 单键按压万能兜底只要焦点在 Monaco 编辑器上press永远可用适合特殊键、快捷键以及逐字符输入文本# 逐字符输入所有构建都可用 npx playwright/cli press H npx playwright/cli press e npx playwright/cli press l npx playwright/cli press l npx playwright/cli press o npx playwright/cli press Space # 空格用 Space # 全选 # macOS: npx playwright/cli press Metaa # Linux / Windows: npx playwright/cli press Controla npx playwright/cli press Backspace # 删除选中内容 npx playwright/cli press Enter # 发送消息 / 换行 # 发送到新会话 # macOS: npx playwright/cli press MetaShiftEnter # Linux / Windows: npx playwright/cli press ControlShiftEnter不可行的方式方式结果原因对编辑器click refElement blocked by another elementMonaco 在 textarea 之上覆盖了一个透明 div通过eval设置textarea.value并派发input事件无效果Monaco 不读取 textarea 的 value 属性兜底用 JavaScript 鼠标事件聚焦fill不生效时例如 ref 过期可以用 JS 事件聚焦编辑器npx playwright/cli eval (() { const inputPart document.querySelector(.interactive-input-part); const editor inputPart.querySelector(.monaco-editor); const rect editor.getBoundingClientRect(); const x rect.x rect.width / 2; const y rect.y rect.height / 2; editor.dispatchEvent(new MouseEvent(mousedown, { bubbles: true, clientX: x, clientY: y })); editor.dispatchEvent(new MouseEvent(mouseup, { bubbles: true, clientX: x, clientY: y })); editor.dispatchEvent(new MouseEvent(click, { bubbles: true, clientX: x, clientY: y })); return activeElement: document.activeElement?.className; })() # JS 聚焦之后type 和 press 即可工作 npx playwright/cli type Text after JS focusJS 鼠标事件触发后document.activeElement会成为带native-edit-context类的DIV——这正是 VS Code 的原生文本编辑表面。校验 Monaco 中文本是否输入成功Monaco 把文本渲染在.view-line元素里而不是 textareanpx playwright/cli eval (() { const inputPart document.querySelector(.interactive-input-part); return Array.from(inputPart.querySelectorAll(.view-line)).map(vl vl.textContent).join(|); })()清空 Monaco 输入# macOS: npx playwright/cli press Metaa # Linux / Windows: npx playwright/cli press Controla npx playwright/cli press Backspace代码修改后的重启工作流修改扩展源码后必须重启 VS Code 才能加载新构建——extension host 只在启动时加载编译后的 bundle不存在热重载。标准步骤重新编译扩展杀掉使用本调试 user-data-dir 的 VS Code 实例用相同参数重新启动# 1. 重新编译 npm run compile # 2. 杀掉绑定本调试 profile 的 VS Code 实例再重新启动 # macOS / Linux: kill $(ps ax -ww -o pid,command | grep $PWD/.vscode-ext-debug | grep -v grep | awk {print $1} | head -1) # Windows (PowerShell): # Get-CimInstance Win32_Process | Where-Object { $_.CommandLine -like *$PWD\.vscode-ext-debug* } | ForEach-Object { Stop-Process -Id $_.ProcessId } # 3. 重新启动 code-insiders \ --extensionDevelopmentPath$PWD \ --remote-debugging-port9223 \ --user-data-dir$PWD/.vscode-ext-debug # 4. 重新附加 npx playwright/cli for i in 1 2 3 4 5; do npx playwright/cli attach --cdphttp://127.0.0.1:9223 2/dev/null break || sleep 3; done npx playwright/cli snapshot提示高频迭代时可在另一个终端运行npm run watch让编译自动进行但仍需杀掉并重启 VS Code 才能加载新 bundle。排障清单Connection refused 或 Cannot connect确认 VS Code Insiders 是用--remote-debugging-port9223启动的若 VS Code 此前已在运行退出后带该参数重启检查端口是否被其他进程占用macOS / Linuxlsof -i :9223Windowsnetstat -ano | findstr 9223快照中看不到目标元素VS Code 使用多个 webview。用npx playwright/cli tab-list列出目标再用npx playwright/cli tab-select index切换到正确的 tab。Monaco 输入框无法输入标准click对 Monaco 编辑器无效见上文兼容性矩阵fill ref是首选press逐键输入在所有构建上可用type在建立焦点后可用。macOS 截图 Permission deniednpx playwright/cli screenshot报权限错误时终端需要 Screen Recording 权限System Settings → Privacy Security → Screen Recording。兜底方案用eval校验片段确认文本已输入不需要屏幕权限。收尾清理任务完成后务必杀掉调试 VS Code 实例——留着它不仅浪费资源还会一直占用 CDP 端口# 断开 npx playwright/cli npx playwright/cli close # 杀掉调试 VS Code 实例 # macOS / Linux: kill $(ps ax -ww -o pid,command | grep $PWD/.vscode-ext-debug | grep -v grep | awk {print $1} | head -1) # Windows (PowerShell): # Get-CimInstance Win32_Process | Where-Object { $_.CommandLine -like *$PWD\.vscode-ext-debug* } | ForEach-Object { Stop-Process -Id $_.ProcessId }小结这套自动化方案的核心可以归纳为三句话用--extensionDevelopmentPath --remote-debugging-port9223 持久化 --user-data-dir三件套启动可附加、可认证的 Insiders 实例用 snapshot-ref 工作流加fill/press命令安全地驱动 Monaco 输入框用时间戳截图目录保留每次运行的视觉证据链。完整可执行的命令与兼容性细节均以 extensions/copilot/.agents/skills/launch/SKILL.md 为准相关仓库佐证材料包括 extensions/copilot/package.jsonproposed API 列表、compile/watch 脚本、playwright devDependency、extensions/copilot/.vscode/launch.json--extensionDevelopmentPath调试配置与 extensions/copilot/.gitignore.vscode-ext-debug/忽略规则。需要留意的是文中的 CSS 选择器与 API 计数均会随版本漂移自动化失效时先重新 snapshot 再对照当前构建排查。【免费下载链接】vscodeVisual Studio Code项目地址: https://gitcode.com/GitHub_Trending/vscode6/vscode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考