使用 Firebug 编辑后保存操作的 DOM/HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2184862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Saving the manipulated DOM/HTML after editing it with Firebug
提问by knorv
Assume that I've fired up Firefox with Firebug enabled on a random site (say slashdot.org). After loading the site I start editing the page using the Firebug > HTMLpanel. So far so good: my changes are immediately visible in Firefox.
假设我已经在一个随机站点（比如 slashdot.org）上启用了 Firebug 的情况下启动了 Firefox。加载网站后，我开始使用Firebug > HTML面板编辑页面。到目前为止一切顺利：我的更改在 Firefox 中立即可见。
My questions:
我的问题：
- How do I save the edited DOM tree (represented as HTML)?
- How do I load a previously manipulated DOM tree/HTML file into the "original context" of the page (slashdot.org in the example)? I want the original context so that all references entities (CSS, images, etc.) will load correctly.
- 如何保存编辑后的 DOM 树（表示为 HTML）？
- 如何将先前操作过的 DOM 树/HTML 文件加载到页面的“原始上下文”中（示例中为 slashdot.org）？我想要原始上下文，以便所有引用实体（CSS、图像等）都能正确加载。
采纳答案by knorv
How do I save the edited DOM tree (represented as HTML)?
如何保存编辑后的 DOM 树（表示为 HTML）？
Firebug does not contain any method that can be used to save current DOM to file. However, you can use Firebug in conjunction with the Web Developer extension to save the DOM to file (represented as HTML).
Firebug 不包含任何可用于将当前 DOM 保存到文件的方法。但是，您可以结合使用 Firebug 和 Web Developer 扩展来将 DOM 保存到文件（表示为 HTML）。
After you're done manipulating the DOM in Firebug, choose Web Developer (toolbar at the top) > View Source > View Generated Source > Archive > Save Page As....
在 Firebug 中完成对 DOM 的操作后，选择Web Developer (toolbar at the top) > View Source > View Generated Source > Archive > Save Page As...。
How do I load a previously manipulated DOM tree/HTML file into the "original context" of the page (slashdot.org in the example)? I want the original context so that all references entities (CSS, images, etc.) will load correctly.
如何将先前操作过的 DOM 树/HTML 文件加载到页面的“原始上下文”中（示例中为 slashdot.org）？我想要原始上下文，以便所有引用实体（CSS、图像等）都能正确加载。
Firebug does not contain any method to re-read a previously saved DOM tree into the "current context" of the page. However, if we use Firebug together with the Web Developer extension we can achieve the requested functionality. Simply open the previously saved HTML in an editor such as Notepad and copy the HTML to the clip board. Then choose Web Developer > Miscellaneous > Edit HTMLand paste the HTML. Done!
Firebug 不包含任何将先前保存的 DOM 树重新读取到页面的“当前上下文”中的方法。但是，如果我们将 Firebug 与 Web Developer 扩展一起使用，我们就可以实现所需的功能。只需在记事本等编辑器中打开之前保存的 HTML，然后将 HTML 复制到剪贴板即可。然后选择Web Developer > Miscellaneous > Edit HTML并粘贴 HTML。完毕！
回答by Ignacio Vazquez-Abrams
You can't save the tree per se, only the HTML. Select the root tag, right-click, and select Copy HTML, then paste into a text editor and save to a HTML file.
您不能保存树本身，只能保存 HTML。选择根标记，右键单击并选择Copy HTML，然后粘贴到文本编辑器中并保存到 HTML 文件。
回答by johnmdonahue
I'm not sure what you mean by "original context" but you could try to add the following to the head of the saved HTML.
我不确定“原始上下文”是什么意思，但您可以尝试将以下内容添加到保存的 HTML 的头部。
<base href="http://slashdot.org/" />
回答by Jhonte
Try cssUpdater, it consists of a FireFox add on that listens to your FireBug css changes over a socket server and let you sync your original css source files. You need to install the Desktop application as well.
试试 cssUpdater，它包含一个 FireFox 插件，它通过套接字服务器侦听您的 FireBug css 更改，并让您同步原始 css 源文件。您还需要安装桌面应用程序。
So a workflow would be:
所以工作流程是：
- Edit in FireBug
- Click sync in cssUpdater
- Reload your site and see that your changes is saved
- 在 FireBug 中编辑
- 单击 cssUpdater 中的同步
- 重新加载您的网站并查看您的更改是否已保存
You can test and use it here, http://www.cssupdater.com
你可以在这里测试和使用它， http://www.cssupdater.com
回答by Derek Swingley
When you're in the HTML section of firebug, there's an "Edit" button on the bar just below firebug's main toolbar. Clicking this button gives you a plain text view of the HTML (with any edits you've made) that you can copy to a text editor.
当您在 firebug 的 HTML 部分时，firebug 主工具栏下方的栏上有一个“编辑”按钮。单击此按钮可为您提供 HTML 的纯文本视图（包含您所做的任何编辑），您可以将其复制到文本编辑器。
回答by Jesse Burcsik
I think this is a good question, in short, firebug is not made to 'keep' your edits, so I would suggest finding a work flow where you are never too 'deep' into a page. One thing is to save the HTML but saving your edited CSS is even harder. Here are my solutions to your questions:
我认为这是一个很好的问题，简而言之，firebug 不是用来“保留”您的编辑的，因此我建议您找到一个工作流程，让您永远不会“深入”到页面中。一件事是保存 HTML，但保存编辑的 CSS 更难。以下是我对您的问题的解决方案：
Click on HTML tag, click Edit. Copy and paste into another text file.
You cannot 'reload' firebug manipulated HTML. You can however copy the manipulated HTML after you are happy with your results (or unhappy). Either keep it on your clip board to copy it to a text file and then when you want to use it again you need to copy it back into the firebug edit console.
单击 HTML 标记，单击编辑。复制并粘贴到另一个文本文件中。
您不能“重新加载”萤火虫操纵的 HTML。但是，您可以在对结果满意（或不满意）后复制被操纵的 HTML。要么将其保存在剪贴板上以将其复制到文本文件中，然后当您想再次使用它时，您需要将其复制回 firebug 编辑控制台。
回答by Alex Barrett
File → Save Page As...will save your edited markup as HTML, but it seems you may save some Firebu-generated content as well (I guess exactly whatdepends on your version of Firebug).
文件 → 另存页面为...将您编辑的标记保存为 HTML，但您似乎也可以保存一些 Firebu 生成的内容（我猜这取决于您的 Firebug 版本）。
回答by lapisdecor
You can configure an external editor. Open firebug, on the left you have firebug icon, press it and click open in editor and then configure editors. It works with Gedit and Bluefish.
您可以配置外部编辑器。打开萤火虫，左边有萤火虫图标，按下它并点击在编辑器中打开，然后配置编辑器。它适用于 Gedit 和 Bluefish。
To configure gedit: open FireBug's configure editor and click add, name it gedit and then browse for the executable within 'usr/bin' and select or type in gedit. You can test the configura before saving.
要配置 gedit：打开 FireBug 的配置编辑器并单击添加，将其命名为 gedit，然后在“usr/bin”中浏览可执行文件并选择或键入 gedit。您可以在保存之前测试配置。
回答by lapisdecor
One thing you can try is to select the web page (right click, select all from the popup menu) and then pick View Selection Source. This should show you the modified HTML in a source window that you can then copy and save in an editor. You may get some additional stuff added by Firebug you can delete in your text editor.
您可以尝试的一件事是选择网页（右键单击，从弹出菜单中全选），然后选择查看选择源。这应该会在源窗口中显示修改后的 HTML，然后您可以将其复制并保存在编辑器中。你可能会得到一些 Firebug 添加的额外内容，你可以在文本编辑器中删除。
