如何复制DevTools中document.getElementsByClassName获取的全部HTML元素

直接在DevTools的控制台执行以下代码即可实现需求：

// 替换成你需要的目标类名
const targetClass = "some_class_name";
// 获取所有匹配类名的元素
const elements = document.querySelectorAll(`.${targetClass}`);
// 拼接所有元素的完整HTML代码，每个元素占一行
const fullHtml = Array.from(elements).map(el => el.outerHTML).join('\n');
// 复制到剪贴板
copy(fullHtml);

说明 #

• document.querySelectorAll()会返回所有匹配指定类名的元素，相比getElementsByClassName，它返回的静态集合更适合后续处理
• el.outerHTML能直接获取元素的完整HTML代码（包括自身标签）
• join('\n')让每个元素的HTML单独换行，和你期望的格式一致
• DevTools自带的copy()方法可以直接把字符串内容复制到剪贴板，无需额外处理

内容的提问来源于stack exchange，提问作者Ralf_Reddings