# Firefox DevTools 集成技巧 ## 目的此技能可以通过 mcporter 无缝集成 Firefox 远程调试协议 (RDP) 以实现开发工作流程。它将 Firefox 配置为接受远程调试连接，并为代理驱动的浏览器交互和调试提供工具。 ## 先决条件 [关键] mise x node@20 -- mcporter 调用 'firefox-devtools.getVersion' 应返回 Firefox 版本信息 (JSON)。如果失败，则 Firefox 不会侦听端口 6000。 ## 核心概念 ### Firefox 远程调试协议 (RDP) Firefox 默认在端口 6000 上使用基于 WebSocket 的 RDP 连接，通过 mcporter 公开以进行代理交互。 **关键能力：** * **Inspector** : DOM 操作和检查 * **调试器**：JavaScript 断点和单步执行 * **控制台** : 执行脚本并查看日志 * **网络** ：监控和拦截请求 * **性能** ：分析运行时性能 * **存储** ：访问cookies、localStorage、sessionStorage ## 可用工具 * firefox-devtools.getVersion [无参数] * firefox-devtools.getTabs [无参数] * firefox-devtools.navigateToUrl [url] * firefox-devtools.takeScreenshot [tabId] * firefox-devtools.clickElement [tabId, 选择器] * firefox-devtools.fillFormField [tabId、选择器、值] * firefox-devtools.getPageContent [tabId] * firefox-devtools.evaluateScript [tabId, 脚本] * firefox-devtools.getConsoleOutput [tabId] * firefox-devtools.getStorage [tabId, storageType] ## 常见工作流程 ### 1\.检查 Web 应用程序状态您：“导航到 http://localhost:3000 并截取屏幕截图” 代理使用 Firefox 远程调试协议 → 截屏 → 返回视觉状态 ### 2\.调试 JavaScript 错误您：“打开 DevTools 控制台并阅读错误消息” 代理使用 Firefox 远程调试协议 → 读取控制台 → 解释错误 ### 3\.自动化测试/验证您：“用测试数据填写表格并提交” 代理使用 Firefox 远程调试协议 → 自动交互 → 报告结果 ### 4\. DOM 检查和存储访问您：“检查 localStorage 中的身份验证令牌” 代理使用 Firefox 远程调试协议 → 检查存储 → 返回值 ## 快速参考任务|麦克波特电话 ---|--- 检查 Firefox 监听 | `mise x node@20 -- mcporter 调用'firefox-devtools.getVersion'` 列出浏览器选项卡 | `mise x node@20 -- mcporter 调用'firefox-devtools.getTabs'` 截图| `mise x node@20 -- mcporter 调用 'firefox-devtools.takeScreenshot(tabId: "")'` 单击元素 | `mise x node@20 -- mcporter 调用 'firefox-devtools.clickElement(tabId: "", 选择器: "#login")'` 填写表格字段 | `mise x node@20 -- mcporter 调用 'firefox-devtools.fillFormField(tabId: "", 选择器: "#email", value: "test@example.com")'` 获取页面内容 | `mise x node@20 -- mcporter 调用 'firefox-devtools.getPageContent(tabId: "")'` 导航至 URL | `mise x node@20 -- mcporter 调用 'firefox-devtools.navigateToUrl(tabId: "", url: "http://localhost:3000")'` 运行 JavaScript | `mise x node@20 -- mcporter 调用 'firefox-devtools.evaluateScript(tabId: "", script: "document.title")'` 阅读控制台 | `mise x node@20 -- mcporter 调用 'firefox-devtools.getConsoleOutput(tabId: "")'` 访问存储 | `mise x node@20 -- mcporter 调用 'firefox-devtools.getStorage(tabId: "", storageType: "localStorage")'` ## 详细示例 ### 示例 1：使用存储验证进行表单测试填写表格、提交并验证 localStorage 是否已更新： TAB_ID=$(mise x node@20 -- mcporter 调用 'firefox-devtools.getTabs' | jq -r '.[0].id') # 跳转到表单页面 mise x node@20 -- mcporter 调用 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/form")' 睡觉2 # 填写并提交表格 mise x node@20 -- mcporter 调用 'firefox-devtools.fillFormField(tabId: "'$TAB_ID'", 选择器: "#email", value: "test@example.com")' mise x node@20 -- mcporter 调用 'firefox-devtools.fillFormField(tabId: "'$TAB_ID'", 选择器: "#password", value: "testpass123")' mise x node@20 -- mcporter 调用 'firefox-devtools.clickElement(tabId: "'$TAB_ID'", 选择器: "#submit")' 睡觉 1 # 检查 localStorage 中的身份验证令牌 STORAGE=$(mise x node@20 -- mcporter 调用 'firefox-devtools.getStorage(tabId: "'$TAB_ID'", storageType: "localStorage")') 回声“$存储”| jq '.auth_token' ### 示例 2：JavaScript 测量和悬停交互测量元素属性并模拟悬停状态： TAB_ID=$(mise x node@20 -- mcporter 调用 'firefox-devtools.getTabs' | jq -r '.[0].id') # 导航到具有交互元素的页面 mise x node@20 -- mcporter 调用 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/interactive")' 睡觉2 # 测量元素尺寸并触发悬停 MEASUREMENTS=$(mise x node@20 -- mcporter call 'firefox-devtools.evaluateScript(tabId: "'$TAB_ID'", script: "const el = document.querySelector(\".interactive-button\"); const borders = el.getBoundingClientRect(); el.dispatchEvent(new MouseEvent(\"mouseenter\", { bubbles: true) })); setTimeout(() => { const 计算 = window.getCompulatedStyle(el); console.log(JSON.stringify({bounds: { x:bounds.x, y:bounds.y, 宽度:bounds.width, 高度:bounds.height }, 背景颜色:计算.backgroundColor, 变换:计算.transform, 不透明度:计算.opacity })); }, 300);")') 回声“$测量”| jq '.' ### 示例 3：使用顺序屏幕截图进行性能测试测量页面加载性能并捕获视觉进展： TAB_ID=$(mise x node@20 -- mcporter 调用 'firefox-devtools.getTabs' | jq -r '.[0].id') 时间戳=$(日期+%Y%m%d_%H%M%S) SCREENSHOT_DIR="./firefox-screenshots/$TIMESTAMP" mkdir -p "$SCREENSHOT_DIR" # 清除并重新开始 mise x node@20 -- mcporter 调用 'firefox-devtools.evaluateScript(tabId: "'$TAB_ID'", script: "performance.mark(\"test-start\");")' # 导航和捕获 mise x node@20 -- mcporter 调用 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/dashboard")' # 不同阶段的截图睡觉 1 mise x node@20 -- mcporter 调用 'firefox-devtools.takeScreenshot(tabId: "'$TAB_ID'")' > "$SCREENSHOT_DIR/01-load-complete.png" 睡觉2 mise x node@20 -- mcporter 调用 'firefox-devtools.takeScreenshot(tabId: "'$TAB_ID'")' > "$SCREENSHOT_DIR/02-render-complete.png" # 衡量性能指标 PERF=$(mise x node@20 -- mcporter 调用 'firefox-devtools.evaluateScript(tabId: "'$TAB_ID'", script: "const perf = Performance.getEntriesByType(\"navigation\")[0]; { pageLoadTime: perf.loadEventEnd - perf.fetchStart, domContentLoaded: perf.domContentLoadedEventEnd - perf.fetchStart, firstPaint: Performance.getEntriesByName(\"first-paint\")[0]?.startTime || null }")') 回声“$PERF”| jq '.' >“$SCREENSHOT_DIR/perf-metrics.json” echo“测试完成。结果为：$SCREENSHOT_DIR” ## 故障排除 ### 连接被拒绝 # 验证 Firefox 是否在启用调试的情况下运行辅助 | grep 火狐。*6000 # 或者显式使用端口启动 firefox --远程调试端口 6000 & ### 端口已在使用中 # 使用自定义端口 firefox --远程调试端口 7000 & # 然后更新 mcporter 配置或传递端口参数 ### 性能考虑因素 1. **RDP开销**：远程调试增加最小的开销 2. **端口绑定** ：使用高编号端口（>6000）以避免冲突 3. **内存**：启用调试的 Firefox 使用约 10-15% 的内存 ## 现实世界的影响将 Firefox 远程调试协议集成到 mcporter 中可以实现： * 实时浏览器调试以及代理对话 * 自动化表单测试和验证 * 应用程序行为的视觉反馈 * 绩效指标收集和分析 * 用于身份验证和会话调试的存储检查如果没有这种集成，调试 Firefox 应用程序需要在浏览器和代理之间进行上下文切换。 ## 参考文献 * [Mozilla 远程调试协议]() * [Firefox WebDriver]() * [DevTools 服务器]() ## 相关技能 * `devtools/chrome-debug` \- Chrome 等效项 * `superpowers/systematic-debugging` \- 一般调试方法 * `experts/quality-security/debugger` \- 调试专家指导 * `superpowers/frontend-developer` \- 前端开发上下文 ## 技能元数据 * **类别**：DevTools 集成 * **复杂性**：中级 * **领域**：浏览器调试、开发工具 * **平台**：Linux、macOS、Windows * **最后更新** : 2025-12-15

火狐调试

包含技能