给 bug 报告配截图，该截什么、该盖什么
工程师需要的往往正是你顺手裁掉的那部分：地址栏、环境标识、请求 ID、时间。而工单又是共享的，生产数据和 token 必须盖掉。两件事怎么同时做到。
你在系统里点了一下，页面报错了，现在要提一个单。截图往往是这个单里信息密度最高的部分，也是最容易同时犯两个相反错误的地方：该留的被裁掉了，该盖的还留着。
这两件事看起来矛盾，其实指向同一个动作——截全，然后精确地盖。而不是截小。截小同时输掉两边：信息不够用，而边角上那个没注意到的账号名照样留在图里。
一张能用的 bug 截图里有什么
- 整个窗口，不是一个按钮的特写。别人需要知道你在哪一页、开着哪个标签、布局是什么样。
- 地址栏里完整的 URL——路径和查询参数，token 除外。这一条被裁掉的次数最多，代价也最大，因为问题常常就在某个参数上。
- 环境标识：测试还是生产、哪个分支、哪台机器。很多系统把它标在角落里，而角落正是最容易被裁掉的地方。
- 当时的状态：你用什么身份登录的、筛选条件是什么、开关开着还是关着。
- 错误信息完整的一行，包括错误码和请求 ID、traceId 这类关联标识。
- 时间。系统时间就在状态栏或者任务栏上，它让人能去日志里对上那一秒。
- 如果开着浏览器的控制台或者网络面板，一起截进来。
- 设备型号、系统版本、App 版本号。手机上通常要另外截一张「关于」页。
有一句话可以当判据用：这张图能不能让另一个人在他自己的机器上把这件事重来一遍。答不上来，就是截少了。
为什么裁得太狠是最常见的错
提单的人裁图，出发点几乎都是好的：只保留有问题的那一块，别让人分心。但这是拿你自己的理解替对方做取舍——你已经知道问题在哪，所以觉得别的都是噪声；而对方还不知道，他要的正是那些上下文。
最常见的三种「裁没了」：URL 里的参数，问题往往就在那儿；右上角的账号，不同角色看到的界面是不一样的；顶部的环境条，你在生产上复现的，别人在测试上怎么也复现不了，两边来回问三轮才发现根本不是同一个地方。
更好的做法正相反：截全，然后在完整图上用一个矩形把有问题的那一块框出来。上下文和重点都在，代价只是一个框。真的需要放大细节，另外补一张局部图，别用它替掉全图。
同时，工单是共享的
工单系统里的图，看得到的人比你以为的多：整个项目组、跨部门的同事、外包、有时候还有客户。工单还会被导出、被贴进周报、被当成案例讲。所以下面这些必须盖掉，而且用实心。
- 真实用户的姓名、手机号、邮箱、身份证号、地址、订单里的收货信息。
- 生产环境的客户数据，哪怕只是列表里的一行。
- Authorization 头、Cookie、URL 里的 token 和 session 参数、API key。这几样出现在网络面板截图里的频率高得惊人。
- 内部人员的账号、工号、内部通讯录里的条目。
- 密码输入框——有些系统会明文回显，有些会在输入法候选里留痕。
- 内网 IP 和主机名，如果你们的规定这么要求。
为什么强调用实心：token 和验证码这类东西是固定字符集的短串，糊着的时候你没法确定它读不读得出来；实心块盖上去就是没了，不用再讨论。相比之下，一段说明文字用马赛克就够。
但有一批东西绝对不能盖
这一节是这篇文章存在的理由。打码打过头比不打码更能拖慢排查，而且对方通常不好意思跟你说，只会自己多花两天。
- 错误码、异常类名、堆栈的头几行。
- 请求 ID、traceId、日志关联 ID。这些是排查的入口，盖掉之后工程师只能靠时间去日志里大海捞针。
- 时间戳。
- URL 的域名和路径部分，以及不敏感的查询参数。
- 版本号、构建号、环境标识。
- 数据的结构：列表有几行、字段名叫什么、排序是什么样。值可以盖，但别把整张表盖成一块黑。
最常见的冲突是 URL：里面既有 token 也有 traceId，很多人一糊糊掉一整条。正确做法是只盖参数值里的那一段，保留域名、路径和请求 ID。同理，网络面板的请求头里只盖 Authorization 那一行的值，别把整块请求头盖掉。
还有一个更省事的思路：能用文字的就别用图。错误信息、URL、traceId 贴成文字，工程师能直接搜、直接复制去查日志；贴成图，他得手打一遍，还容易打错一位。图负责「界面长什么样」，文字负责「可以被搜索的那部分」，两边都给，单子的质量立刻不一样。
复现步骤怎么标
步骤用序号，别用箭头，箭头不带顺序。同一屏里的连续动作可以标在一张图上；一旦点完就跳到了另一个页面，就必须换一张图，否则读者要在一个还没出现那个按钮的界面上找「第 3 步」。
步骤图在 bug 报告里有一个特有的坑：单子会被改。你补充了一步、删掉了一步，正文的编号自动重排了，图上的数字不会。评论区一旦出现「第 3 步是指图上哪个」，这个单就开始退化成聊天记录，而原本要修的问题被埋在下面。要么用会自动重排序号的工具，要么每次改完自己对一遍，二选一，没有第三条路。
录屏、GIF 和截图，各自什么时候用
能稳定复现、步骤又短的，截图更好：截图带时间戳、能被搜索、能在评论里被单独引用，而且工程师扫一眼就知道要不要接着看。偶发的、和时序有关的（动画不对、请求顺序不对、点太快就崩），录屏更合适。
但录屏里同样有该盖的东西，而给录屏打码比给截图麻烦得多。所以顺序应该反过来：录之前先把测试数据换成假数据，比录完再想办法处理省事得多。折中的做法是录屏说明「怎么走到这一步」，再补一张关键时刻的截图，把错误信息、请求 ID 和时间都标清楚——多数工程师会先看那张截图，视频只在他看不懂的时候才点开。
Marka 在这个流程里能帮上哪几步
三件跟 bug 截图直接相关。一是实心块：盖 token 和客户数据要的就是实心，马赛克在这里不够踏实。二是笔画粗细按图片短边的比例算，不是写死的像素——开发者的截图常常来自 4K 或 5K 显示器，写死像素的标注线在那种图上细得像头发丝，比例算法在这里差别很明显。三是序号删掉中间一个会按创建顺序自动往前排，改单的时候图上不会留下 1 和 3。
Mac 版还有一个「查找敏感信息」：在你自己这台 Mac 上用苹果的 Vision 框架扫一遍当前图片，把手机号、邮箱、像卡号的数字串、人脸和链接列成候选，逐条勾选，勾中的才被盖上——对着一张用户列表或者网络面板的截图很省事。它只建议、绝不代劳，而且一定会漏，所以它是提单前的第二遍，不是唯一那一遍。这个功能只有 Mac 版有，且属于 Pro。
还有一条和工单有关但常被忽略的：Marka 不联网，图片从头到尾在你自己的机器上，没有服务器也没有账号。一张生产数据的截图在打码之前先经过一次第三方服务器，这件事在很多公司的规定里本身就是问题，和你最后打没打码无关。另外它是草稿纸不是图库——关掉之后不留副本，一组图要么一次做完，要么随手导出。
提单之前的清单
- 截全，别裁。要强调就在完整图上画个框，需要细节再补一张局部图。
- 确认这几样在图里：URL、环境标识、账号身份、错误信息全文、请求 ID、时间、版本号。
- 盖掉：token、Cookie、真实用户数据、内部账号。用实心，不用马赛克。
- 别盖：错误码、traceId、时间、路径、版本号、字段名。盖了这些等于把入口一起封了。
- 把错误文本、URL 和 traceId 另外贴一份纯文字，让它们可以被搜索和复制。
- 步骤用序号，跨页就换一张图，改完对一遍正文编号和图上编号。
- 最后问自己一句：这张图如果被转发到公司群里，有没有问题。工单基本上就是公司群。
常见问题
bug 截图要截整个屏幕，还是只截出问题的那一块？
截全。工程师要的往往正是你顺手裁掉的那部分——URL 里的参数、右上角的账号身份、顶部的环境标识。要强调某一处，就在完整图上画一个矩形框，而不是裁到只剩那一处。判据是：别人能不能靠这张图在自己的机器上复现。
哪些东西一定要在 bug 截图里盖掉？
token、Cookie、Authorization 头、API key、URL 里的 session 参数、真实用户的姓名手机号地址、生产环境的客户数据、内部账号和工号。工单是共享的，还会被导出和转贴。这些用实心块盖，别用马赛克。
有什么是绝对不该盖的？
错误码、异常类名、堆栈头几行、请求 ID 和 traceId、时间戳、URL 的路径部分、版本号和环境标识、以及数据的结构（几行、什么字段）。盖掉这些等于把排查入口一起封了，而对方通常不好意思跟你说，只会自己多花两天。
URL 里既有 token 又有 traceId，怎么办？
只盖 token 那一段参数值，保留域名、路径和请求 ID。别把整条地址栏糊成一条。网络面板的截图同理：盖 Authorization 那一行的值，不要把整块请求头盖掉。
错误信息截个图就够了吗？
不够。错误文本、URL、traceId 最好另外贴一份纯文字，这样工程师能直接搜索、直接复制去查日志。图负责说明界面长什么样，文字负责那部分可以被检索的内容，两个都给。
复现步骤的序号该怎么标？
同一屏里的连续动作标在一张图上，一旦跳到另一个页面就换一张图。用序号不用箭头，箭头不带顺序。还要留意单子会被改：删了一步之后正文编号会重排、图上的数字不会，所以要么用能自动重排序号的工具，要么每次改完自己对一遍。
用 Marka 做这件事
Marka 是 iPhone、iPad 和 Mac 上的截图标注 App。划一下把不该看的盖掉，用箭头指住该看的，用序号标出步骤，裁成你要发的比例，然后发出去。全程在设备本地处理——不上传、不注册、无埋点，安装包 2.4 MB。打开图片、裁切、马赛克笔刷和导出都免费；Pro 是一次性买断，三端通用。