Capture node screenshot 是 Chrome DevTools 中 Elements 面板专属功能，需先用鼠标在 DOM 树中明确选中目标节点（如 ），再通过右键菜单或 Ctrl+Shift+P 输入命令触发；若节点未选中、被隐藏（display:none）、或尚未渲染完成，则命令不可用或截图为空。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
选中节点后按 Ctrl+Shift+P 调出命令面板再搜 Capture node screenshot
这个操作必须在 Elements 面板中先点中一个具体的 DOM 节点（比如 <div id="chart"> 或 <code><table>），否则命令会灰掉不可用。不是靠鼠标框选，也不是靠 JS 获取元素后再“传进去”——DevTools 的节点截图只认当前选中的 <code>node 对象。
常见错误现象：Capture node screenshot 命令不可点击、点了没反应、截图内容为空白或只有边框。大概率是没在 Elements 树里真正选中目标节点，或者该节点渲染依赖 JS 异步加载（比如 Vue/React 动态插入的区域还没 mount 完）。
使用场景举例：
- 截取某个弹窗（
<dialog></dialog>）、图表容器（<div class="echarts-root">）的当前渲染状态，不带页面其他干扰元素 <li>快速验证 CSS 作用范围：选中一个 <code><p></p>后截图，看 padding/margin/border 是否如预期生效 - 给 UI 同事发图反馈时，只截问题组件本身，避免整页滚动找位置
-
Capture node screenshot能正确捕获filter、clip-path、backdrop-filter、CSS 动画帧、transform: scale()等 html2canvas 不支持或表现异常的样式 - 它不走 Canvas API，所以不存在跨域图片被污染（
canvas.toDataURL()报错）的问题 - 但无法截图
iframe内容（同源也不行），也不能对节点做缩放/裁剪等二次处理——截图就是那一刻的精确快照 - 不触发 JS 执行，所以不会因为
onload或IntersectionObserver延迟加载而漏内容；但反过来，如果节点本身是空的（比如innerHTML还没被 JS 填充），截图也是空的 - 节点不能是
display: none或visibility: hidden—— 即使父级显示，只要该节点自身被隐藏，截图就为空白 - 节点不能是
position: fixed且脱离文档流过远（比如top: -9999px），DevTools 可能判定其不可见区域而跳过渲染 - 如果节点内含
canvas元素且尚未绘制（ctx.fillRect()没执行），截图里对应区域就是透明黑块，而非报错
Capture node screenshot 和 html2canvas 的根本区别在哪
前者是浏览器原生渲染管线截图，后者是前端 JS 模拟重绘。这意味着：
立即学习“前端免费学习笔记（深入）”；
截图失败时优先检查这三件事
不是所有节点都能被成功截图。容易被忽略的限制点：
调试建议：右键节点 → Break on attribute modifications，观察是否在截图前被 JS 动态改了 style 或 class；或者临时加 outline: 2px solid red 确认它确实被选中并可见。
替代方案：右键菜单里直接点 Capture node screenshot
不用记快捷键组合。在 Elements 面板中右键已选中的节点，菜单底部就有这个选项。比打开命令面板更快，尤其适合高频操作。
注意：这个右键菜单项和命令面板里的 Capture node screenshot 是同一个功能，行为完全一致。但如果你在 Console 里用 inspect(document.querySelector('#xxx')) 选中了节点，右键菜单里**不会出现**该选项——必须回到 Elements 面板里用鼠标点中才行。
另外，截图文件默认保存到系统下载目录，文件名形如 Screen Shot 2026-04-19 at 05.42.18.png，不支持自定义名称或路径。需要批量截图时，得换 dom-to-image-more 或服务端方案。
