## 起因

*场景：互联网 / 后端开发，自建服务运维。*

写技术文章时我需要大量「过程截图」——不是那种精修的成品图，而是「点了这个按钮之后页面长什么样」「手机上打开是什么效果」这类逐步记录的图。手工截图太慢，而且有个更隐蔽的麻烦：**截图里很容易把设备名、内网 IP、账号信息一并拍进去**。等我发现图里泄露了敏感信息，再去事后打码，既慢又容易漏。

于是我给自建网页服务写了一套批量截图脚本，用浏览器调试协议做到三件事：直达指定页面、模拟手机视口、截图前先注入脱敏。下面记的是完整做法。

## 第一回合：深链直达，跳过界面点按

手工截图最大的浪费是「在界面上点来点去」才能到达目标页面。我的做法是直接用调试协议新建标签页，并**导航到带查询参数的深链**，一步到位。

通过 DevTools 协议的 `Target.createTarget` + `Page.navigate`，我可以把目标 URL（含参数）直接喂给浏览器，不必模拟任何点击：

```json
{
  "method": "Page.navigate",
  "params": {
    "url": "http://127.0.0.1:8080/dashboard?tab=logs&id=1024"
  }
}
```

这样脚本就能按一份「URL 清单」批量产出不同页面的截图，完全绕开人工导航。对于需要登录态的服务，只要复用已登录的调试实例（`--remote-debugging-port`），脚本只操作页面、不碰账号密码。

## 第二回合：移动端视口 + 截图前脱敏

很多文章要展示「手机上的样子」，所以我给截图加了视口模拟。关键是用 `Emulation.setDeviceMetricsOverride` 设定好宽高、`deviceScaleFactor` 和是否移动端，再调用 `Page.captureScreenshot`：

```json
{
  "method": "Emulation.setDeviceMetricsOverride",
  "params": {
    "width": 390, "height": 844,
    "deviceScaleFactor": 3,
    "mobile": true
  }
},
{
  "method": "Page.captureScreenshot",
  "params": { "format": "png", "captureBeyondViewport": true }
}
```

**截图前的脱敏是这套脚本的精髓。** 我会在 `captureScreenshot` 之前，用 JS 注入把页面上的敏感文本替换掉：

```javascript
document.querySelectorAll('*').forEach(el => {
  if (el.childNodes.length === 1 && el.childNodes[0].nodeType === 3) {
    const t = el.textContent;
    el.textContent = t
      .replace(/192\.168\.\d+\.\d+/g, '10.0.0.0')
      .replace(/DESKTOP-[A-Z0-9]+/g, 'HOST-XXXX');
  }
});
```

这样截出来的图里**天然不含敏感信息**，比事后用打码工具涂要可靠得多。需要强调的是，脱敏正则要覆盖所有可能出现敏感信息的形态——不仅是 IP 和设备名，还有账号昵称、内部路径等。我习惯在脚本里维护一张「敏感词 → 占位符」的映射表，每接一个新服务就补几条规则，规则越全，漏网的概率越低。

## 踩到的坑

**坑一：坐标要用文档坐标，不是视口坐标。** 早期我用视口坐标去派发鼠标事件，页面一滚动就全偏了。后来统一改成相对文档的坐标，并在每次滚动后重新计算，才稳。

**坑二：截整页忘了开 `captureBeyondViewport`。** 没开这个能力时，只截到当前可视区，长页面下半截全没了。需要整页图时，务必把它设为 `true`。

**坑三：脱敏必须在截图前做。** 我一度想「先截图再涂码」，结果漏了好几处藏在折叠面板里的 IP。结论很干脆：**脱敏放截图前，事后涂容易漏。**

另外有个交互真实性的细节：要截「某功能被启动后」的样子，有些前端只认**真实指针事件**（按下 / 移动 / 抬起），用 `.click()` 模拟根本不触发。这种场景得用调试协议派发真实鼠标事件序列，而不是走 DOM 的 click。

## 结果

按上面的三步套路，一批过程截图自动产出。我把常用配置整理成一张表，方便复用：

| 步骤 | 协议 / 方法 | 作用 |
|---|---|---|
| 导航 | `Page.navigate` | 深链直达，免界面点按 |
| 视口 | `Emulation.setDeviceMetricsOverride` | 模拟手机尺寸与 DPR |
| 脱敏 | 注入 JS 替换文本 | 截图前清掉敏感信息 |
| 截图 | `Page.captureScreenshot` | 输出 PNG，支持整页 |

敏感的几处（设备名、内网 IP）用「截图前注入」直接规避，成片里再没出现过明文敏感字段。给文章配图这件事，从原来的手工半小时，变成了跑一个脚本等几分钟。

## 三条经验

**第一，配图自动化就是「导航 + 视口 + 脱敏」三步固定套路。** 把这三件事封装成模板，换页面只要改 URL 和脱敏正则，扩展成本极低。

**第二，脱敏要前置到截图之前，不要事后补。** 事后打码依赖「你记得哪儿有敏感信息」，而折叠面板、动态加载的内容最容易忘。脚本注入式脱敏是在数据层面清理，更彻底。

**第三，真实交互用真实事件，别迷信 `.click()`。** 需要展示「功能启动态」时，前端若只认指针事件，模拟点击会静默失败。调试协议派发真实鼠标序列（按下、移动、抬起分步投递）才是稳的，它和真人操作在事件层面完全一致。

**第四，脱敏规则要常维护、覆盖全。** 不同服务暴露的敏感字段形态各异，靠一次性正则撑不住。把「敏感词 → 占位符」做成可累加的映射表，每接一个新页面就补规则，比临时抱佛脚可靠。

---

*本文记录的是实际截图脚本的搭建过程，所有协议方法名与参数均来自真实调试，截图前脱敏所用的正则已做泛化处理，未包含任何真实设备名或网络标识。*

#WorkBuddy #AI办公![md29-1-深链直达.png](https://developer.qcloudimg.com/http-save/yehe-12646891/254dc9d083da09f6f30d6f4b8ea357ba.png)![md29-2-移动视口.png](https://developer.qcloudimg.com/http-save/yehe-12646891/37931794fafb409f39f8ceecd7e9bc7c.png)![md29-3-截图前脱敏.png](https://developer.qcloudimg.com/http-save/yehe-12646891/59140b4a6d61cd24232817e2467ccf05.png)

写技术文章时我需要大量「过程截图」——不是那种精修的成品图，而是「点了这个按钮之后页面长什么样」「手机上打开是什么效果」这类逐步记录的图。手工截图太慢，而且有个更隐蔽的麻烦：截图里很容易把设备名、内网 IP、账号信息一并拍进去。等我发现图里泄露了敏感信息，再去事后打码，既慢又容易漏。

给本地网页服务截图：深链直达、手机视口与截图前脱敏

开发工具

后端

职业发展

自建网页服务批量截图自动化方案：通过DevTools协议实现深链直达、移动端视口模拟与截图前JS注入脱敏，彻底解决手工截图慢、敏感信息泄露问题。核心三步法（导航、视口、脱敏）封装为模板，支持整页截图与真实鼠标事件派发，将配图耗时从半小时压缩至数分钟。

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

给本地网页服务截图：深链直达、手机视口与截图前脱敏-腾讯云开发者社区-腾讯云

给本地网页服务截图：深链直达、手机视口与截图前脱敏

给本地网页服务截图：深链直达、手机视口与截图前脱敏

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐