方式二手动复制技能文件夹到本地 skills 目录【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot将 skills/chrome-devtools/ 整个目录复制到你的技能存放目录即可安装后可以直接在提示词中引用该技能或让智能体依据 description 字段自动发现并加载。 从仓库的插件清单 [plugins/external.json](https://link.gitcode.com/i/ebd4e6da6860f6edbdfd5b57428e0ed0) 可以看到该技能对应的运行时能力来自 Chrome DevTools 团队维护的 chrome-devtools-mcp插件条目名 chrome-devtools-plugin版本 1.0.1license 为 Apache-2.0source 指向 ChromeDevTools/chrome-devtools-mcp。这意味着**要实际调用下文提到的全部工具需要你的 Copilot/Agent 环境配置好 chrome-devtools MCP 服务器**技能本身负责提供何时用、怎么用的操作指引。 ## 工具能力全景四大工具分类 该技能围绕 MCP 服务器暴露的工具组织为四大类覆盖了浏览器操作的全链路。 ### 1. 导航与页面管理Navigation Page Management | 工具 | 用途 | | ---- | ---- | | new_page | 打开一个新的标签页/页面 | | navigate_page | 跳转到指定 URL、刷新页面或按历史记录前进/后退 | | select_page | 在多个打开的页面之间切换上下文 | | list_pages | 列出所有已打开的页面及其 ID | | close_page | 关闭指定页面 | | wait_for | 等待页面中出现指定的文本 | 这组工具是任何浏览器自动化任务的起点先 new_page 创建会话再 navigate_page 到达目标站点当多标签页并行工作时list_pages 配合 select_page 是保持上下文正确的关键详见下文 Best Practices。 ### 2. 输入与交互Input Interaction | 工具 | 用途 | | ---- | ---- | | click | 点击元素uid 取自 snapshot | | fill / fill_form | 向输入框键入文本或一次填写多个字段 | | hover | 将鼠标悬停到元素上 | | press_key | 发送键盘快捷键或特殊按键如 Enter、ControlC | | drag | 拖拽元素 | | handle_dialog | 接受或关闭浏览器 alert/prompt 弹窗 | | upload_file | 通过文件输入控件上传文件 | 注意 click、fill 等交互工具依赖快照中的 uid 定位元素这引出了下文快照优先Snapshot-First的核心模式。 ### 3. 调试与检查Debugging Inspection | 工具 | 用途 | | ---- | ---- | | take_snapshot | 获取基于文本的可访问性树a11y tree**定位元素的最佳手段** | | take_screenshot | 截取页面或指定元素的视觉表示 | | list_console_messages / get_console_message | 检查页面控制台输出 | | evaluate_script | 在页面上下文中运行自定义 JavaScript | | list_network_requests / get_network_request | 分析网络流量与请求详情 | 这组工具把 DevTools 面板的 Network、Console、Elements 能力以 MCP 工具形式暴露给智能体是页面报错排查模式的主力。 ### 4. 仿真与性能Emulation Performance | 工具 | 用途 | | ---- | ---- | | resize_page | 改变视口viewport尺寸 | | emulate | 节流 CPU/网络或仿真地理位置geolocation | | performance_start_trace | 开始记录性能剖析profile | | performance_stop_trace | 停止记录并保存 trace | | performance_analyze_insight | 基于已记录的性能数据生成详细分析 | emulate 是移动端与弱网场景复现的关键通过节流 CPU/网络可以在桌面环境近似还原低端设备体验resize_page 则用于响应式布局验证。性能三件套 performance_start_trace → performance_stop_trace → performance_analyze_insight 构成了自动化的 Lighthouse 式性能体检流程。 ## 三大工作流模式Workflow Patterns 技能文档沉淀了三个高复用率的操作范式建议直接作为提示词模板使用。 ### 模式 A定位元素 —— 快照优先Snapshot-First **永远优先使用 take_snapshot 而非 take_screenshot 来寻找元素**快照会返回可交互工具所必需的 uid 值而截图只是像素无法驱动后续点击与填写。 markdown 1. take_snapshot 获取当前页面结构。 2. 找到目标元素的 uid。 3. 使用 click(uid...) 或 fill(uid..., value...) 完成操作。这条模式从根本上规避了AI 看着截图猜坐标的不确定性可访问性树提供了稳定的语义化结构配合uid可以精确、可重放地执行交互。模式 B故障排查Troubleshooting Errors当页面报错时同时检查控制台日志与网络请求两者互为印证1. list_console_messages 检查 JavaScript 错误。 2. list_network_requests 定位失败的资源4xx/5xx。 3. evaluate_script 检查特定 DOM 元素或全局变量的取值。这一模式覆盖了前端问题三大来源运行时异常Console、资源加载失败Network、状态不正确页面上下文求值足以应对绝大多数页面为什么挂了的排查场景。模式 C性能剖析Performance Profiling定位页面为什么慢一条命令即可启动完整链路1. performance_start_trace(reloadtrue, autoStoptrue) 2. 等待页面加载完成/trace 录制结束。 3. performance_analyze_insight 找出 LCP 问题或布局偏移layout shifts。reloadtrue表示在开始记录后自动刷新页面以采集完整加载过程autoStoptrue让录制在页面加载完成后自动停止无需人工干预最终由performance_analyze_insight把原始 trace 数据转译为可行动的结论如最大内容绘制 LCP 偏慢、累积布局偏移 CLS 超标等 Core Web Vitals 指标问题。最佳实践Best Practices技能文档在最后给出了四条长期有效的使用准则上下文感知Context Awareness如果不确定当前激活的是哪个标签页始终先运行list_pages和select_page。多页面场景下当前上下文漂移是自动化失败的头号原因快照时效Snapshots任何重大导航或 DOM 变化之后都要重新拍摄快照因为uid值可能已经改变——复用旧快照的uid会指向失效元素超时Timeouts为wait_for设置合理的超时时间避免在加载缓慢的元素上无限期挂起截图节制Screenshotstake_screenshot仅用于视觉验证而逻辑判断找元素、读状态应依赖take_snapshot——这与模式 A 的原则一脉相承。综合实战示例一次完整的端到端任务将上述工具与模式组合可以编排出一个完整的访问 → 交互 → 排查 → 验证闭环例如# 任务访问目标站点填写搜索框提交并核对结果同时确认页面性能健康 1. new_page 打开新标签页 2. navigate_page 跳转到目标 URL 3. take_snapshot 获取页面结构找到搜索框的 uid 4. fill(uid..., valueawesome-copilot) 输入搜索词 5. press_key 发送 Enter 提交搜索 6. wait_for 等待结果区域出现指定文本设置合理超时 7. take_snapshot 重新快照确认结果元素 8. list_console_messages list_network_requests 排查是否有报错与 4xx/5xx 9. performance_start_trace(reloadtrue, autoStoptrue) performance_analyze_insight 完成性能体检 10. take_screenshot 留存视觉证据close_page 收尾【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 方式二：手动复制技能文件夹到本地 skills 目录
方式二手动复制技能文件夹到本地 skills 目录【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot将 skills/chrome-devtools/ 整个目录复制到你的技能存放目录即可安装后可以直接在提示词中引用该技能或让智能体依据 description 字段自动发现并加载。 从仓库的插件清单 [plugins/external.json](https://link.gitcode.com/i/ebd4e6da6860f6edbdfd5b57428e0ed0) 可以看到该技能对应的运行时能力来自 Chrome DevTools 团队维护的 chrome-devtools-mcp插件条目名 chrome-devtools-plugin版本 1.0.1license 为 Apache-2.0source 指向 ChromeDevTools/chrome-devtools-mcp。这意味着**要实际调用下文提到的全部工具需要你的 Copilot/Agent 环境配置好 chrome-devtools MCP 服务器**技能本身负责提供何时用、怎么用的操作指引。 ## 工具能力全景四大工具分类 该技能围绕 MCP 服务器暴露的工具组织为四大类覆盖了浏览器操作的全链路。 ### 1. 导航与页面管理Navigation Page Management | 工具 | 用途 | | ---- | ---- | | new_page | 打开一个新的标签页/页面 | | navigate_page | 跳转到指定 URL、刷新页面或按历史记录前进/后退 | | select_page | 在多个打开的页面之间切换上下文 | | list_pages | 列出所有已打开的页面及其 ID | | close_page | 关闭指定页面 | | wait_for | 等待页面中出现指定的文本 | 这组工具是任何浏览器自动化任务的起点先 new_page 创建会话再 navigate_page 到达目标站点当多标签页并行工作时list_pages 配合 select_page 是保持上下文正确的关键详见下文 Best Practices。 ### 2. 输入与交互Input Interaction | 工具 | 用途 | | ---- | ---- | | click | 点击元素uid 取自 snapshot | | fill / fill_form | 向输入框键入文本或一次填写多个字段 | | hover | 将鼠标悬停到元素上 | | press_key | 发送键盘快捷键或特殊按键如 Enter、ControlC | | drag | 拖拽元素 | | handle_dialog | 接受或关闭浏览器 alert/prompt 弹窗 | | upload_file | 通过文件输入控件上传文件 | 注意 click、fill 等交互工具依赖快照中的 uid 定位元素这引出了下文快照优先Snapshot-First的核心模式。 ### 3. 调试与检查Debugging Inspection | 工具 | 用途 | | ---- | ---- | | take_snapshot | 获取基于文本的可访问性树a11y tree**定位元素的最佳手段** | | take_screenshot | 截取页面或指定元素的视觉表示 | | list_console_messages / get_console_message | 检查页面控制台输出 | | evaluate_script | 在页面上下文中运行自定义 JavaScript | | list_network_requests / get_network_request | 分析网络流量与请求详情 | 这组工具把 DevTools 面板的 Network、Console、Elements 能力以 MCP 工具形式暴露给智能体是页面报错排查模式的主力。 ### 4. 仿真与性能Emulation Performance | 工具 | 用途 | | ---- | ---- | | resize_page | 改变视口viewport尺寸 | | emulate | 节流 CPU/网络或仿真地理位置geolocation | | performance_start_trace | 开始记录性能剖析profile | | performance_stop_trace | 停止记录并保存 trace | | performance_analyze_insight | 基于已记录的性能数据生成详细分析 | emulate 是移动端与弱网场景复现的关键通过节流 CPU/网络可以在桌面环境近似还原低端设备体验resize_page 则用于响应式布局验证。性能三件套 performance_start_trace → performance_stop_trace → performance_analyze_insight 构成了自动化的 Lighthouse 式性能体检流程。 ## 三大工作流模式Workflow Patterns 技能文档沉淀了三个高复用率的操作范式建议直接作为提示词模板使用。 ### 模式 A定位元素 —— 快照优先Snapshot-First **永远优先使用 take_snapshot 而非 take_screenshot 来寻找元素**快照会返回可交互工具所必需的 uid 值而截图只是像素无法驱动后续点击与填写。 markdown 1. take_snapshot 获取当前页面结构。 2. 找到目标元素的 uid。 3. 使用 click(uid...) 或 fill(uid..., value...) 完成操作。这条模式从根本上规避了AI 看着截图猜坐标的不确定性可访问性树提供了稳定的语义化结构配合uid可以精确、可重放地执行交互。模式 B故障排查Troubleshooting Errors当页面报错时同时检查控制台日志与网络请求两者互为印证1. list_console_messages 检查 JavaScript 错误。 2. list_network_requests 定位失败的资源4xx/5xx。 3. evaluate_script 检查特定 DOM 元素或全局变量的取值。这一模式覆盖了前端问题三大来源运行时异常Console、资源加载失败Network、状态不正确页面上下文求值足以应对绝大多数页面为什么挂了的排查场景。模式 C性能剖析Performance Profiling定位页面为什么慢一条命令即可启动完整链路1. performance_start_trace(reloadtrue, autoStoptrue) 2. 等待页面加载完成/trace 录制结束。 3. performance_analyze_insight 找出 LCP 问题或布局偏移layout shifts。reloadtrue表示在开始记录后自动刷新页面以采集完整加载过程autoStoptrue让录制在页面加载完成后自动停止无需人工干预最终由performance_analyze_insight把原始 trace 数据转译为可行动的结论如最大内容绘制 LCP 偏慢、累积布局偏移 CLS 超标等 Core Web Vitals 指标问题。最佳实践Best Practices技能文档在最后给出了四条长期有效的使用准则上下文感知Context Awareness如果不确定当前激活的是哪个标签页始终先运行list_pages和select_page。多页面场景下当前上下文漂移是自动化失败的头号原因快照时效Snapshots任何重大导航或 DOM 变化之后都要重新拍摄快照因为uid值可能已经改变——复用旧快照的uid会指向失效元素超时Timeouts为wait_for设置合理的超时时间避免在加载缓慢的元素上无限期挂起截图节制Screenshotstake_screenshot仅用于视觉验证而逻辑判断找元素、读状态应依赖take_snapshot——这与模式 A 的原则一脉相承。综合实战示例一次完整的端到端任务将上述工具与模式组合可以编排出一个完整的访问 → 交互 → 排查 → 验证闭环例如# 任务访问目标站点填写搜索框提交并核对结果同时确认页面性能健康 1. new_page 打开新标签页 2. navigate_page 跳转到目标 URL 3. take_snapshot 获取页面结构找到搜索框的 uid 4. fill(uid..., valueawesome-copilot) 输入搜索词 5. press_key 发送 Enter 提交搜索 6. wait_for 等待结果区域出现指定文本设置合理超时 7. take_snapshot 重新快照确认结果元素 8. list_console_messages list_network_requests 排查是否有报错与 4xx/5xx 9. performance_start_trace(reloadtrue, autoStoptrue) performance_analyze_insight 完成性能体检 10. take_screenshot 留存视觉证据close_page 收尾【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考