单击行号时，如何以编程方式获取 Devtools 看到的 HTML？

如何解决单击行号时，如何以编程方式获取 Devtools 看到的 HTML？

我正在尝试构建一个解析为行号的逻辑，并尝试以这种方式获取 html 的副本，

let HTMLdoc = new XMLSerializer().serializetoString(document)

console.log(HTMLdoc)

但是我看到它的输出与我在 Devtools 上点击错误堆栈的行号时看到的不同。

function foo () {
 let stackTrace = (new Error()).stack;
 
 console.log(stackTrace);
}

foo();

您可以单击运行代码片段并打开 Devtools，然后单击您看到的行号，Devtools 将打开文档。

您会发现 Devtools 打开的文档缺少 CSS 和其他 Div 元素。

如何获取与 Devtools 相同的工具？

Related

我目前的假设是 Devtools 避免显示外部加载的。我可能是错的。

如果我的假设是正确的，我需要找出一个替换外部加载的正则表达式。

解决方法

serializeToString(document) 将序列化 当前 文档状态，包括可能在运行时应用的所有更改。在这种情况下，在呈现页面后添加了其他样式，但也可能有更彻底的更改，以完全删除或重新排序内容。

当您查看 JavaScript 的堆栈跟踪时，浏览器的 JavaScript 引擎将尝试为您提供与原始源密切相关的信息，因为这是您的代码的来源。如果您使用带有压缩代码的源映射，浏览器通常甚至能够告诉您原始未压缩代码中特定内容的来源，即使该代码甚至与正在执行的代码不完全匹配（例如，当使用转译器时） ).

最后，您无法通过在运行时查看文档来真正弄清楚浏览器会告诉您代码行的来源。如果您的代码遵循非常严格的规则，您也许可以通过一些计算来估计这一点，但这不是一种安全的方法。