firefox-debug
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseFirefox DevTools Integration Skill
Firefox DevTools 集成技能
Purpose
用途
This skill enables seamless integration of Firefox Remote Debugging Protocol (RDP) for development workflows through mcporter. It configures Firefox to accept remote debugging connections and provides tooling for Agent-driven browser interaction and debugging.
该技能可通过mcporter实现Firefox Remote Debugging Protocol（RDP）与开发工作流的无缝集成。它会配置Firefox以接受远程调试连接，并提供用于Agent驱动的浏览器交互与调试的工具。
Prerequisites [CRITICAL]
前置条件 [至关重要]
bash
mise x node@20 -- mcporter call 'firefox-devtools.getVersion'Should return Firefox version info (JSON). If it fails, Firefox isn't listening on port 6000.
bash
mise x node@20 -- mcporter call 'firefox-devtools.getVersion'该命令应返回Firefox版本信息（JSON格式）。如果执行失败，说明Firefox未在6000端口监听。
Core Concepts
核心概念
Firefox Remote Debugging Protocol (RDP)
Firefox Remote Debugging Protocol (RDP)
Firefox uses RDP over WebSocket connections on port 6000 by default, exposed through mcporter for Agent interaction.
Key capabilities:
- Inspector: DOM manipulation and inspection
- Debugger: JavaScript breakpoints and stepping
- Console: Execute scripts and view logs
- Network: Monitor and intercept requests
- Performance: Profile runtime performance
- Storage: Access cookies, localStorage, sessionStorage
Firefox默认通过6000端口的WebSocket连接使用RDP，该端口通过mcporter暴露以供Agent交互。
核心功能：
- 检查器：DOM操作与检查
- 调试器：JavaScript断点与单步执行
- 控制台：执行脚本与查看日志
- 网络：监控与拦截请求
- 性能：分析运行时性能
- 存储：访问Cookie、localStorage、sessionStorage
Available Tools
可用工具
- firefox-devtools.getVersion [no args]
- firefox-devtools.getTabs [no args]
- firefox-devtools.navigateToUrl [url]
- firefox-devtools.takeScreenshot [tabId]
- firefox-devtools.clickElement [tabId, selector]
- firefox-devtools.fillFormField [tabId, selector, value]
- firefox-devtools.getPageContent [tabId]
- firefox-devtools.evaluateScript [tabId, script]
- firefox-devtools.getConsoleOutput [tabId]
- firefox-devtools.getStorage [tabId, storageType]
- firefox-devtools.getVersion [无参数]
- firefox-devtools.getTabs [无参数]
- firefox-devtools.navigateToUrl [url]
- firefox-devtools.takeScreenshot [tabId]
- firefox-devtools.clickElement [tabId, selector]
- firefox-devtools.fillFormField [tabId, selector, value]
- firefox-devtools.getPageContent [tabId]
- firefox-devtools.evaluateScript [tabId, script]
- firefox-devtools.getConsoleOutput [tabId]
- firefox-devtools.getStorage [tabId, storageType]
Common Workflows
常见工作流
1. Inspect Web Application State
1. 检查Web应用状态
You: "Navigate to http://localhost:3000 and take a screenshot"
Agent uses Firefox Remote Debugging Protocol → Takes screenshot → Returns visual state你："导航到http://localhost:3000并截取屏幕截图"
Agent 使用Firefox Remote Debugging Protocol → 截取屏幕截图 → 返回视觉状态2. Debug JavaScript Errors
2. 调试JavaScript错误
You: "Open DevTools console and read the error messages"
Agent uses Firefox Remote Debugging Protocol → Reads console → Explains errors你："打开DevTools控制台并读取错误信息"
Agent 使用Firefox Remote Debugging Protocol → 读取控制台内容 → 解释错误3. Automated Testing/Validation
3. 自动化测试/验证
You: "Fill the form with test data and submit it"
Agent uses Firefox Remote Debugging Protocol → Automates interaction → Reports results你："使用测试数据填充表单并提交"
Agent 使用Firefox Remote Debugging Protocol → 自动化交互 → 报告结果4. DOM Inspection & Storage Access
4. DOM检查与存储访问
You: "Check localStorage for the auth token"
Agent uses Firefox Remote Debugging Protocol → Inspects storage → Returns values你："检查localStorage中的认证令牌"
Agent 使用Firefox Remote Debugging Protocol → 检查存储内容 → 返回值Quick Reference
快速参考
| Task | mcporter Call |
|---|---|
| Check Firefox listening | |
| List browser tabs | |
| Take screenshot | |
| Click element | |
| Fill form field | |
| Get page content | |
| Navigate to URL | |
| Run JavaScript | |
| Read console | |
| Access storage | |
| 任务 | mcporter 调用命令 |
|---|---|
| 检查Firefox监听状态 | |
| 列出浏览器标签页 | |
| 截取屏幕截图 | |
| 点击元素 | |
| 填充表单字段 | |
| 获取页面内容 | |
| 导航到指定URL | |
| 运行JavaScript脚本 | |
| 读取控制台内容 | |
| 访问存储 | |
Detailed Examples
详细示例
Example 1: Form Testing with Storage Verification
示例1：表单测试与存储验证
Fill a form, submit, and verify localStorage was updated:
bash
TAB_ID=$(mise x node@20 -- mcporter call 'firefox-devtools.getTabs' | jq -r '.[0].id')填充表单、提交并验证localStorage是否已更新：
bash
TAB_ID=$(mise x node@20 -- mcporter call 'firefox-devtools.getTabs' | jq -r '.[0].id')Navigate to form page
导航到表单页面
mise x node@20 -- mcporter call 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/form")'
sleep 2
mise x node@20 -- mcporter call 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/form")'
sleep 2
Fill and submit form
填充并提交表单
mise x node@20 -- mcporter call 'firefox-devtools.fillFormField(tabId: "'$TAB_ID'", selector: "#email", value: "test@example.com")'
mise x node@20 -- mcporter call 'firefox-devtools.fillFormField(tabId: "'$TAB_ID'", selector: "#password", value: "testpass123")'
mise x node@20 -- mcporter call 'firefox-devtools.clickElement(tabId: "'$TAB_ID'", selector: "#submit")'
sleep 1
mise x node@20 -- mcporter call 'firefox-devtools.fillFormField(tabId: "'$TAB_ID'", selector: "#email", value: "test@example.com")'
mise x node@20 -- mcporter call 'firefox-devtools.fillFormField(tabId: "'$TAB_ID'", selector: "#password", value: "testpass123")'
mise x node@20 -- mcporter call 'firefox-devtools.clickElement(tabId: "'$TAB_ID'", selector: "#submit")'
sleep 1
Check localStorage for auth token
检查localStorage中的认证令牌
STORAGE=$(mise x node@20 -- mcporter call 'firefox-devtools.getStorage(tabId: "'$TAB_ID'", storageType: "localStorage")')
echo "$STORAGE" | jq '.auth_token'
undefinedSTORAGE=$(mise x node@20 -- mcporter call 'firefox-devtools.getStorage(tabId: "'$TAB_ID'", storageType: "localStorage")')
echo "$STORAGE" | jq '.auth_token'
undefinedExample 2: JavaScript Measurement & Hover Interaction
示例2：JavaScript测量与悬停交互
Measure element properties and simulate hover state:
bash
TAB_ID=$(mise x node@20 -- mcporter call 'firefox-devtools.getTabs' | jq -r '.[0].id')测量元素属性并模拟悬停状态：
bash
TAB_ID=$(mise x node@20 -- mcporter call 'firefox-devtools.getTabs' | jq -r '.[0].id')Navigate to page with interactive elements
导航到包含交互元素的页面
mise x node@20 -- mcporter call 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/interactive")'
sleep 2
mise x node@20 -- mcporter call 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/interactive")'
sleep 2
Measure element dimensions and trigger hover
测量元素尺寸并触发悬停
MEASUREMENTS=$(mise x node@20 -- mcporter call 'firefox-devtools.evaluateScript(tabId: "'$TAB_ID'", script: "const el = document.querySelector(".interactive-button"); const bounds = el.getBoundingClientRect(); el.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true })); setTimeout(() => { const computed = window.getComputedStyle(el); console.log(JSON.stringify({ bounds: { x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height }, backgroundColor: computed.backgroundColor, transform: computed.transform, opacity: computed.opacity })); }, 300);")')
echo "$MEASUREMENTS" | jq '.'
undefinedMEASUREMENTS=$(mise x node@20 -- mcporter call 'firefox-devtools.evaluateScript(tabId: "'$TAB_ID'", script: "const el = document.querySelector(".interactive-button"); const bounds = el.getBoundingClientRect(); el.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true })); setTimeout(() => { const computed = window.getComputedStyle(el); console.log(JSON.stringify({ bounds: { x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height }, backgroundColor: computed.backgroundColor, transform: computed.transform, opacity: computed.opacity })); }, 300);")')
echo "$MEASUREMENTS" | jq '.'
undefinedExample 3: Performance Testing with Sequential Screenshots
示例3：性能测试与连续截图
Measure page load performance and capture visual progression:
bash
TAB_ID=$(mise x node@20 -- mcporter call 'firefox-devtools.getTabs' | jq -r '.[0].id')
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
SCREENSHOT_DIR="./firefox-screenshots/$TIMESTAMP"
mkdir -p "$SCREENSHOT_DIR"测量页面加载性能并捕获视觉变化过程：
bash
TAB_ID=$(mise x node@20 -- mcporter call 'firefox-devtools.getTabs' | jq -r '.[0].id')
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
SCREENSHOT_DIR="./firefox-screenshots/$TIMESTAMP"
mkdir -p "$SCREENSHOT_DIR"Clear and start fresh
清理并重新开始
mise x node@20 -- mcporter call 'firefox-devtools.evaluateScript(tabId: "'$TAB_ID'", script: "performance.mark("test-start");")'
mise x node@20 -- mcporter call 'firefox-devtools.evaluateScript(tabId: "'$TAB_ID'", script: "performance.mark("test-start");")'
Navigate and capture
导航并捕获
mise x node@20 -- mcporter call 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/dashboard")'
mise x node@20 -- mcporter call 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/dashboard")'
Screenshot at different stages
在不同阶段截图
sleep 1
mise x node@20 -- mcporter call 'firefox-devtools.takeScreenshot(tabId: "'$TAB_ID'")' > "$SCREENSHOT_DIR/01-load-complete.png"
sleep 2
mise x node@20 -- mcporter call 'firefox-devtools.takeScreenshot(tabId: "'$TAB_ID'")' > "$SCREENSHOT_DIR/02-render-complete.png"
sleep 1
mise x node@20 -- mcporter call 'firefox-devtools.takeScreenshot(tabId: "'$TAB_ID'")' > "$SCREENSHOT_DIR/01-load-complete.png"
sleep 2
mise x node@20 -- mcporter call 'firefox-devtools.takeScreenshot(tabId: "'$TAB_ID'")' > "$SCREENSHOT_DIR/02-render-complete.png"
Measure performance metrics
测量性能指标
PERF=$(mise x node@20 -- mcporter call '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 }")')
echo "$PERF" | jq '.' > "$SCREENSHOT_DIR/perf-metrics.json"
echo "Test complete. Results in: $SCREENSHOT_DIR"
undefinedPERF=$(mise x node@20 -- mcporter call '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 }")')
echo "$PERF" | jq '.' > "$SCREENSHOT_DIR/perf-metrics.json"
echo "测试完成。结果存储在：$SCREENSHOT_DIR"
undefinedTroubleshooting
故障排除
Connection Refused
连接被拒绝
bash
undefinedbash
undefinedVerify Firefox is running with debugging enabled
验证Firefox是否已启用调试功能运行
ps aux | grep firefox.*6000
ps aux | grep firefox.*6000
Or explicitly launch with port
或者显式指定端口启动
firefox --remote-debugging-port 6000 &
undefinedfirefox --remote-debugging-port 6000 &
undefinedPort Already in Use
端口已被占用
bash
undefinedbash
undefinedUse custom port
使用自定义端口
firefox --remote-debugging-port 7000 &
firefox --remote-debugging-port 7000 &
Then update mcporter config or pass port parameter
然后更新mcporter配置或传递端口参数
undefinedundefinedPerformance Considerations
性能注意事项
- RDP Overhead: Remote debugging adds minimal overhead
- Port Binding: Use high-numbered ports (>6000) to avoid conflicts
- Memory: Firefox with debugging enabled uses ~10-15% more memory
- RDP开销：远程调试只会增加极少的性能开销
- 端口绑定：使用高位端口（>6000）以避免冲突
- 内存占用：启用调试功能的Firefox会多占用约10-15%的内存
Real-World Impact
实际应用价值
Integrating Firefox Remote Debugging Protocol into mcporter enables:
- Live browser debugging alongside Agent conversations
- Automated form testing and validation
- Visual feedback on application behavior
- Performance metrics collection and analysis
- Storage inspection for authentication and session debugging
Without this integration, debugging Firefox applications requires context-switching between browser and Agent.
将Firefox Remote Debugging Protocol集成到mcporter中可实现：
- 在Agent对话过程中进行实时浏览器调试
- 自动化表单测试与验证
- 获取应用行为的视觉反馈
- 性能指标收集与分析
- 检查存储内容以进行认证与会话调试
如果没有此集成，调试Firefox应用时需要在浏览器与Agent之间来回切换上下文。
References
参考资料
Related Skills
相关技能
- - Chrome equivalent
devtools/chrome-debug - - General debugging methodology
superpowers/systematic-debugging - - Debugging expert guidance
experts/quality-security/debugger - - Frontend development context
superpowers/frontend-developer
- - Chrome浏览器的等效技能
devtools/chrome-debug - - 通用调试方法论
superpowers/systematic-debugging - - 调试专家指导
experts/quality-security/debugger - - 前端开发上下文
superpowers/frontend-developer
Skill Metadata
技能元数据
- Category: DevTools Integration
- Complexity: Intermediate
- Domain: Browser Debugging, Development Tools
- Platforms: Linux, macOS, Windows
- Last Updated: 2025-12-15
- 分类：DevTools集成
- 复杂度：中级
- 领域：浏览器调试、开发工具
- 支持平台：Linux、macOS、Windows
- 最后更新：2025-12-15