如何在 Firefox 中查看“生成的 HTML 代码”？答案

【问题标题】：How to view "generated HTML code" in Firefox?如何在 Firefox 中查看“生成的 HTML 代码”？
【发布时间】：2010-07-22 23:54:08
【问题描述】：

如果使用 Firebug，我们可以单击 HTML 选项卡，然后单击展开每个元素以查看生成的 HTML 代码。有没有办法将其全部展开或获取纯文本文件？

我只是偶然发现甚至不需要 Firebug。我们可以在网页上直接按CTRL-A（全选），然后右键选择“查看选择源”，然后我们会得到一个“当前HTML代码”的纯文本文件，甚至会看到一个@987654321 @ 即 Firebug 面板，如果 Firebug 已打开，则它位于 <body> 标记之前。但这似乎是一种奇怪的调用方式。有没有其他办法？

（更新：生成的HTML通常是指JavaScript改变DOM后的HTML，它是当前的DOM树，而不是原来的源代码）

【问题讨论】：

+1 选择区域并右键选择“查看选择源”，不需要任何额外的插件。

标签： firefox code-generation firebug firefox-addon web-developer-toolbar

【解决方案1】：

在 Firebug 的 HTML 选项卡中，右键单击根节点并选择“复制 HTML”。然后粘贴到文本编辑器。

如果没有 Firefox 附加组件，您可以像这样使用bookmarklet：

javascript: var win = window.open(); win.document.write('<html><head><title>Generated HTML of  ' + location.href + '</title></head><pre>' + document.documentElement.innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '</pre></html>'); win.document.close(); void 0;

【讨论】：

出现弹出窗口阻止程序错误。禁用弹出窗口阻止程序，仍然出现错误。可能与 pdf.js 有关。解决方法：document.body.onclick = function() { /* the code */ };，然后单击文档中的任意位置。我修好了！
不错的技巧，但必须记住空格会丢失。
可以，但是里面没有javascript生成的源码，这个和CTRL+A一样

【解决方案2】：

使用Web Developer toolbar 插件，选择查看源代码 - 查看生成的源代码。如果您想查看原始源代码，请选择 View Source - View Source（或直接按 CTRL-SHIFT-U)

【讨论】：

精湛的工具。与 FF 开发工具相比，它是如此广泛
那个工具栏是我的生命线，但现在这个关键功能不存在了:(
从 Firefox 68.0.2(32bit) 和 Web 开发工具栏 2.0.1 开始，查看源代码不再出现在菜单中。

【解决方案3】：

使用 Firefox DevTools（自 35 版起集成在 FF 中），您可以查看生成的 HTML 打开 Web 检查器 (CTRL-shift-C kbd>) 并选择 HTML 选项卡。

您可以通过右键单击<html> 并选择复制内部HTML来复制生成的HTML。

【讨论】：

这似乎没有显示生成的源代码（即它不反映 JavaScript 所做的更改）。也许在 Firefox 57 中发生了变化？

【解决方案4】：

如果您正在寻找程序化解决方案，您只需将文档输入 XMLSerializer。

【讨论】：

这应该如何工作？ XMLSerializer 怎么知道具体渲染了什么？

【解决方案5】：

我不知道我是否理解你的问题，但这里有一些非常简单的东西，你不需要另一个插件。

每个浏览器都有查看实际页面源代码的本机功能，只需右键单击并查找类似于“源”或“代码”的内容。

例如在 Firefox 中它只是“源代码”，在 Chrome 中它是“查看页面源代码”等等。

话虽如此，Web Developer 工具栏确实是一个很棒的插件，尤其是如果您也使用 CSS。

【讨论】：

“生成的HTML代码”通常是指Javascript修改DOM生成的HTML。生成的 HTML。