从侧面板进行 QA 的错误报告：屏幕截图、记录、控制台/网络日志、实时 CSS 编辑、发送到 Jira、GitHub 和 Notion。
BugShot — 一站式错误报告，无需离开页面
查看错误、捕获该错误以及团队所需的所有上下文，然后归档问题 — 所有这些都可以从一个侧面板完成。
不再需要在开发工具、屏幕截图工具、屏幕录像机和问题跟踪器之间来回切换。
BugShot 是一个 Chrome 侧面板，可以按照开发人员需要的方式捕获错误：屏幕截图或记录、其背后的控制台、网络和操作日志，对于视觉错误，还可以使用前后差异进行实时 CSS 编辑。它将所有内容捆绑到一个完整的问题中，并将其直接发送到 Jira、GitHub、Linear 和另外 5 个集成，或将其共享到 Slack 通道或 DM。
您捕获的任何内容都不会通过 BugShot 服务器。您捕获的数据直接从浏览器发送到问题跟踪器或 Slack，而 AI 请求直接发送到您配置的 LLM 端点。
---
它是如何运作的
1. 捕获 — 截取屏幕截图、记录行为或在页面上重新设置元素的样式。
2. 收集 — 在后台自动收集控制台、网络和操作日志。
3. 生成 — AI 起草报告并识别实际导致错误的日志。
4. 发送 — 将其发送到 Jira、GitHub、Slack 和另外 5 个集成，并自动填充环境信息。
---
您可以使用 BugShot 做什么
🎨 实时 CSS 编辑——在描述之前就修复它
- 元素选择器：悬停以突出显示并单击以选择页面上的任何 DOM 元素，包括深度嵌套的元素和 iframe 内的元素。
- 实时编辑：通过结构化字段调整布局、间距、大小、颜色、版式和边框，或切换到语法突出显示的 CSS 编辑器直接编辑原始 CSS。该编辑器预先填充了元素的当前样式，并包括自动完成、内联颜色样本、任意属性和 !important 支持。更改会立即显示在实时页面上。
- 设计令牌感知：解析 var() 链并显示令牌名称（例如，--color-primary），而不仅仅是计算值，因此您的报告使用您的设计系统的语言。
- 之前/之后差异：每个更改都会被跟踪并显示为问题中的之前→之后表。跨多个元素的编辑将合并到一个报告中。
---
🎬 记录 — 当静止图像还不够时，捕捉行为
- 30 秒即时重播：将最后 30 秒保留在始终在线的 MP4 缓冲区中，这样您就可以在注意到错误时捕获它，而无需先开始录制。它不断滚动页面导航。
- 标签录制：将当前标签录制为 MP4 长达 60 秒。
- 屏幕录制：使用系统选择器录制特定窗口或全屏，最长 60 秒。
- 修剪错误时刻：无论您如何捕捉它 - 重播、选项卡或屏幕 - 录制停止时都会打开相同的修剪视图。拖动手柄以仅保留重要的内容，控制台、网络和操作日志都会缩小到该精确范围。当您拖动时，要剪切的条目会变暗，因此您可以在提交之前看到删除的内容。时间线上的错误和页面导航标记将您指向正确的位置。
- 在屏幕上绘图：录制时从侧面板打开笔，在页面上手绘草图并准确指出损坏的部分。
---
📸 捕获 — 准确抓取屏幕上的内容并进行标记
- 元素捕获：捕获单个元素作为干净的屏幕截图，其 DOM 选择器自动附加到问题。
- 区域捕捉：拖动屏幕的任何区域以捕捉精确区域。
- 全页捕获：将长页面滚动拼接成一个高屏幕截图。
- 注释：在附加屏幕截图之前添加箭头、文本、形状和突出显示。
---
📋 日志 — 在后台收集的复制上下文
- 网络和控制台日志：只要侧面板打开，就会自动收集，因此在您捕获错误之前触发的错误已经存在。包括来自跨源 iframe 的 WebSocket 框架和日志，例如支付小部件和嵌入式内容，并按来源进行过滤。
- 操作日志：点击、文本输入、导航、键盘快捷键和拖放操作被记录为逐步再现上下文。敏感输入会自动屏蔽。
- 日志查看器：查看视频同步时间线上的所有内容。单击任何控制台、网络或操作条目即可跳转到录音中的确切时刻。
---
🤖 AI — 根据您已收集的信息进行报告和风格修复
- AI 草稿：将您捕获的所有内容（样式、屏幕截图以及控制台、网络和操作日志）转换为可立即归档的报告，其中包含标题、复制步骤以及预期行为与实际行为。它读取日志以识别可能的原因，并逐字引用相关日志条目，包括成功的 200 个响应，这些响应看起来不错，但包含实际的罪魁祸首，例如空列表或缺失字段。它从不发明日志：每个引用的日志都来自您原始捕获的数据，如果没有任何相关的内容，则不会附加任何内容。
- AI 样式修复：描述您想要的更改，AI 会建议对所选元素进行 CSS 编辑，并立即将其应用到页面。
- 自带密钥：使用您自己的 API 密钥 (BYOK) 连接 OpenAI、Anthropic、Gemini 等，或者在未设置密钥时使用 Chrome 的设备上 AI。您的提示和上下文会直接发送到您选择的端点，而不是通过 BugShot 服务器。
---
🔗 发送 — 直接发送到您的问题跟踪器
- 一步创建报告及其附件并将其发送到连接的平台。自动填充环境信息，包括 DOM、浏览器和屏幕分辨率。
---
专为此类团队打造
质量保证：
- 完整的错误交接：捕获错误背后的确切行为、视觉状态、再现上下文、环境和日志，而无需手动将它们拼凑在一起。
- 不再需要忙碌的工作：在提交问题之前停止手动收集屏幕截图、浏览器信息和控制台日志。
- 可重现的报告：自动组织重现步骤和环境信息，同时人工智能识别导致错误的日志，因此开发人员可以更快地重现问题并找出根本原因。
设计师：
- 实时设计验证：直接在实时页面上调整样式以建议像素级改进。
- 说出您的设计系统的语言：读取 var() 令牌名称，以便您可以传达设计令牌的改进，而不仅仅是原始计算值。
- 之前/之后一目了然：在之前→之后表中查看您的编辑，该表准确显示了更改的内容和要更新的内容。
开发商：
- 减少调试时间：获取已组织好的再现上下文和控制台日志的报告，并内联引用相关因果响应，以便您可以直接跳转到根本原因。
- 无需 DevTools 即可修复 CSS：使用直观的可视化编辑器快速验证样式。
- 确切地更改什么：获取一个前后表，显示要更改的属性以及将其更改为什么，准备好转换为代码。
---
直接连接到您的问题跟踪器
连接您在“集成”选项卡中使用的平台。 BugShot 支持 8 种集成，包括问题跟踪器和 Slack。一次连接多个平台，并将每个问题发送或共享到您需要的任何目的地。
请参阅指南中支持的平台的完整列表以及如何连接它们：
https://bug-shot.com/docs/integrations/platforms
---
私人设计
您捕获的数据（包括屏幕截图、录音、日志和报告内容）永远不会通过 BugShot 服务器。它直接从您的浏览器发送到问题跟踪器或 Slack，而 AI 请求直接发送到您配置的 LLM 端点。
没有 BugShot 帐户，也没有托管存储。我们的服务器唯一做的就是当您连接平台时中继 OAuth 令牌交换。
---
如何使用
1. 启动扩展：单击浏览器工具栏中的 BugShot 图标，或使用快捷方式 (Cmd/Ctrl+Shift+E) 打开侧面板。
2. 捕获错误：截取屏幕截图或记录错误发生的那一刻，最长 60 秒。控制台、网络和操作日志已在后台收集。
3. 检查和编辑：选择页面上的任何元素以检查其样式和属性，然后立即在可视化编辑器中进行编辑。
4. 生成 AI 报告：获取错误报告草稿，其中包含根据收集的数据组织的重现步骤和环境信息。
5. 共享和导出：随心所欲地传递它 - 将其复制为 Markdown，将其发送到您的问题跟踪器，将其共享到 Slack 等等。
---
安装之前
BugShot 可在任何支持侧面板 API 的基于 Chromium 的浏览器中运行。
设备上的 AI 功能需要支持 Gemini Nano 的最新版本的 Chrome。或者，您可以连接您自己的 API 密钥。
如果您遇到安装问题，请将浏览器更新到最新版本，然后重试。
