Chrome HTML Inspector：复制原始源（而不是修改过的 DOM）

Posted 2023-05-09

【中文标题】Chrome HTML Inspector：复制原始源（而不是修改过的 DOM）

【英文标题】：Chrome HTML Inspector: Copy original source (and not modified DOM)

【发布时间】：2014-05-18 19:55:48

【问题描述】：

我经常使用 html 模板。其中许多在一个页面中显示不止一个可视化。因此，我使用 chromes html 检查器从模板中复制某个 table/div 所需的 HTML 源代码。我这样复制：

但是：我发现，从 HTML 检查器复制实际上是从 DOM 复制代码，这意味着我的代码副本包含由脚本所做的 jquery 修改，而不是原始源代码某个 html 元素。

有没有办法复制该元素及其子项和所有内容，但从源代码中复制它不包含对 javascript dom 操作的任何修改！？

非常感谢

---

编辑：我找到的唯一解决方案是在“设置”下的检查器中暂时停用 javascript 的执行，然后重新加载页面，然后复制某个节点的 html 源。但它很麻烦而且不是很好......

【问题讨论】：

为什么不以老式的方式查看源代码并从那里复制？

只需使用“查看页面源代码”选项并从中复制。

当然，但我真的很喜欢在大量使用模板时与检查员一起工作，因为我直接看到要复制哪个元素。这就是为什么特别询问的原因......我也不需要从完整的源代码中搜索元素我也不需要选择内部元素......

是否有可能轻松找到某个元素的结束标签？我的意思是找到起始 div-tag 并不难，但是当代码格式不正确时……这可能是一项艰巨的任务。然后复制到代码格式化程序然后从那里复制真的很不舒服.. :(

HTML 不是 DOM。 DOM 检查器不应该向您显示原始来源；这就是查看源代码的用途。如果您需要查找结束标签，请使用专业的代码编辑器。

【参考方案1】：

可能看起来有点解决方法，但如果您使用 Chrome 的控制台日志记录，您可以在加载时打印 <div> 的内容，并且在 jQuery 启动它的 DOM 修改之前。

为了得到这篇文章的.post-text修改前：

console.log( $$('.post-text')[0].innerHTML );
$(document).ready(function()
   /** Your JavaScript **/
);

要通过此功能从 Chrome 中获得更多信息，您甚至可以将其用于Copy the HTML：

//Now press Ctrl + v where-ever you need to paste the contents.
console.log( 
    copy( $$('.post-text')[0].innerHTML )
);

或者最后一个建议，它将暂停页面并检查 Chrome 中的元素，您可以在其中继续检查器选择：

//or another div/selector.
inspect( document.body ); 
debugger;

$(document).ready(function()
   /** Your JavaScript **/
);

【讨论】：

当我无权修改 HTML 的源代码时怎么办？这需要我先看看我想从模板中取出哪个元素，然后通过添加console.log( $$('.post-text')[0].innerHTML ); 来修改模板，然后重新加载它...... :(

好吧，您需要的是 DOM 在整个操作过程中更改的“历史”，对吗？我很确定没有浏览器具有本机。

不，我只是要求复制原始来源。查看源代码显示它。但是对于格式不正确的长 div 标签来说，复制它是相当困难的......

抱歉，蒂姆，唉，我还没有为你的要求写一个很好的答案。我添加了一个暂停 JavaScript 和页面的最终建议，它打开一个带有提供的选择器的<div>，例如body。对不起，我无法提供任何进一步的帮助，我会继续关注其他答案，因为我现在也有兴趣 =)

没问题，谢谢。我现在将 Chrome 中的整个 HTML 源代码复制到记事本中，并使用 tidy 插件很好地整理 HTML 代码。有点帮助，但需要更多时间，然后通过 Chrome Inspector 进行复制.. :) :(

【参考方案2】：

解决方案：

Ctrl+U -> Ctrl+A -> Ctrl+C -> Notepad++ Ctrl+V 粘贴到那里。 可选：使用 TextFX 或 Tidy 插件快速格式化代码，并可能更轻松地识别标签等。但第 3 步不需要： 使用notepad++中的HTML Tag Plugin通过Shift+Ctrl+T选择一个HTML Tag直到它的结束标签（包括开始和结束标签），见-->只需通过Ctrl+C复制选择

https://superuser.com/questions/174599/notepad-jump-between-opening-and-closing-html-tags