@codebyai/bug-recorder
Advanced tools
A tool to help QA engineers record bug reproduction processes and page operation data
一个帮助测试工程师记录BUG复现过程的工具，能够捕获用户操作、网络请求、控制台日志等信息，并生成Markdown格式的报告。
npm install @codebyai/bug-recorder
import BugRecorder from "@codebyai/bug-recorder";
// 显示悬浮控制条
new BugRecorder().init({
show: 'bar'
});
// 悬浮控制条模式（默认显示）
new BugRecorder().init({
show: 'bar'
});
// 隐藏悬浮条模式（快捷键Ctrl+Shift+Alt+R控制）
new BugRecorder().init({
show: 'hidden_bar'
});
// vConsole集成模式
import VConsole from 'vconsole';
const vConsole = new VConsole();
new BugRecorder().init({
show: vConsole // 直接传递vConsole实例
});
// 指定截图区域模式
new BugRecorder().init({
show: 'bar',
screenshotElement: '#app' // 只截取指定CSS选择器对应的DOM区域
});
// 过滤网络请求模式
new BugRecorder().init({
show: 'bar',
ignoreRequestUrls: [
'/api/heartbeat', // 忽略心跳请求
'/static/', // 忽略静态资源
/\/api\/log\/.*/, // 使用正则表达式忽略日志相关API
'analytics.google.com' // 忽略统计分析请求
]
});
// 过滤console输出模式
new BugRecorder().init({
show: 'bar',
ignoreConsoleContents: [
'[DEBUG]', // 忽略调试日志
'WebSocket connection', // 忽略WebSocket连接日志
/React DevTools/, // 使用正则表达式忽略React DevTools相关日志
'analytics' // 忽略包含analytics的日志
]
});
// 组合配置模式
new BugRecorder().init({
show: 'bar',
screenshotElement: '#app',
ignoreRequestUrls: ['/api/heartbeat', '/static/'],
ignoreConsoleContents: ['[DEBUG]', /React DevTools/]
});
Ctrl + Shift + Alt + R显示/隐藏// 正确的初始化方式
import VConsole from 'vconsole';
import BugRecorder from "@codebyai/bug-recorder";
// 1. 先初始化vConsole
const vConsole = new VConsole();
// 2. 传递vConsole实例给BugRecorder
new BugRecorder().init({
show: vConsole // 传递实例而不是字符串
});
通过 screenshotElement 参数可以指定截图时只捕获特定DOM区域，而不是整个页面。
支持的CSS选择器格式：
'#app' - ID选择器，截取ID为app的元素'.container' - 类选择器，截取class为container的元素'body' - 标签选择器，截取body元素'div.content' - 复合选择器，截取class为content的div元素示例用法：
// 只截取主容器区域
new BugRecorder().init({
show: 'bar',
screenshotElement: '#main-container'
});
// 只截取内容区域
new BugRecorder().init({
show: 'bar',
screenshotElement: '.content-wrapper'
});
// 不指定则截取整个页面（默认行为）
new BugRecorder().init({
show: 'bar'
});
注意事项：
BugRecorder提供两种截图模式，满足不同使用场景：
示例输出对比：
<!-- 真实截图模式 -->
* 2025-01-20 14:30:15 SCREENSHOT
<!-- 事件记录模式 -->
* 2025-01-20 14:30:20 SCREENSHOT 用户手动截图
使用建议：
## 复现过程
* 备注：用户即将打开客户详情页面
* 2025-09-15 21:50:28 USER_CLICK 用户点击了"客户详情"按钮，id为"btn_customer_detail"
* 2025-09-15 21:50:29 URL_CHANGE 浏览器URL变更，原地址https://xxx.com/list，新地址https://xxx.com/detail?id=123
* 2025-09-15 21:50:30 XHR
Request:
POST /api/customer/detail HTTP/1.1 Content-Type: application/json
{"id": 123}
Response (200 OK):
{"code": "00000", "data": {...}}
* 2025-09-15 21:50:31 SCREENSHOT
* 2025-09-15 21:50:35 SCREENSHOT 用户手动截图
<!-- 如果使用vConsole模式，需要引入vConsole -->
<script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script>
初始化BugRecorder
参数:
config.show: 显示模式，'bar' | 'hidden_bar' | vConsole实例config.screenshotElement?: 截图目标元素的CSS选择器，可选参数config.ignoreRequestUrls?: 要忽略的网络请求URL模式数组，支持字符串和正则表达式，可选参数config.ignoreConsoleContents?: 要忽略的console内容模式数组，支持字符串和正则表达式，可选参数销毁BugRecorder实例，清理所有监听器
获取版本号
保存BUG录制内容到本地文件，支持从剪贴板或文件读取内容，自动提取base64图片并转换为PNG文件。
功能特性:
bug_report_image_1.png, bug_report_image_2.png等）bug_record.md系统要求:
sudo apt-get install xclip使用方法:
# 从剪贴板读取内容（复制BugRecorder的录制结果到剪贴板后运行）
npx @codebyai/bug-recorder
# 从文件读取内容并处理
npx @codebyai/bug-recorder report.md
# 显示帮助信息
npx @codebyai/bug-recorder --help
命令格式:
npx @codebyai/bug-recorder [文件路径]
参数说明:
文件路径：要处理的文件路径（可选，未指定时从剪贴板读取）-h, --help：显示帮助信息MIT License
🎉 首次正式发布 - 完整的BUG录制解决方案
bug_report_image_*.png、bug_record.mdFAQs
A tool to help QA engineers record bug reproduction processes and page operation data
We found that @codebyai/bug-recorder demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.