在浏览器开发者工具中，通过一行 javascript 代码即可获取所有匹配指定 class 的元素的 html 内容，并一键复制到剪贴板，便于快速查看结构或粘贴至编辑器分析。

在浏览器开发者工具中，通过一行 javascript 代码即可获取所有匹配指定 class 的元素的 html 内容，并一键复制到剪贴板，便于快速查看结构或粘贴至编辑器分析。

当你在 DevTools 控制台中执行 document.getElementsByClassName("some_class_name") 时，返回的是一个 HTMLCollection（类数组对象），而非普通数组——它不支持 .map()、.forEach() 等原生数组方法，也无法直接传入 copy() 函数生成可读 HTML 字符串。因此，需先将其转换为真数组，再逐个提取 .innerHTML，最后拼接并复制。

✅ 推荐解决方案（一行可执行）：

copy([...document.getElementsByClassName("some_class_name")].map(el => el.outerHTML).join("\n"));

⚠️ 注意：使用 el.outerHTML（而非 el.innerHTML）才能完整复制包含标签本身的 HTML 结构（如 <div class="red_car">car1</div>）。若仅用 innerHTML，则只会得到 "car1" 这样的纯文本内容，丢失标签和属性。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

? 补充说明与增强写法：

立即学习“前端免费学习笔记（深入）”；

• 若需兼容老旧环境（如某些旧版 Safari 不支持扩展运算符），可用 Array.from() 替代：

  copy(Array.from(document.getElementsByClassName("some_class_name")).map(el => el.outerHTML).join("\n"));

• 若目标元素可能为空或不存在，建议加简单校验避免报错：

  const els = document.getElementsByClassName("some_class_name");
  if (els.length > 0) {
    copy([...els].map(el => el.outerHTML).join("\n"));
  } else {
    console.warn("未找到匹配的元素");
  }

? 小技巧：执行后无需手动操作——Chrome / Edge / Firefox 均原生支持全局 copy() 函数（仅限 DevTools 环境），结果将直接进入系统剪贴板，Ctrl+V 即可粘贴到任意编辑器中，格式清晰、换行规整，非常适合前端调试与结构复盘。