使用Firebug编辑后保存操作的DOM / HTML [英] Saving the manipulated DOM/HTML after editing it with Firebug

问题描述

假设我已经在一个随机的网站上启用了Firebug的Firefox（比如说slashdot.org）。加载网站后，我开始使用 Firebug> HTML 面板。到目前为止这么好：我的更改会立即在Firefox中显示。

我的问题：

• 如何保存已编辑的DOM树（以HTML格式表示）？


• 如何将先前操作的DOM树/ HTML文件加载到页面的原始上下文中例子中的slashdot.org）？我想要原始上下文，以便所有引用实体（CSS，图像等）都将正确加载。

解决方案

如何保存编辑过的DOM树（用HTML表示）？

Firebug不包含任何可以用于将当前DOM保存到文件。但是，您可以将Firebug与Web Developer扩展结合使用，将DOM保存为文件（表示为HTML）。

完成操作Firebug中的DOM后，选择 Web Developer（顶部的工具栏）>查看来源>查看生成的源>存档>将页面另存为... 。

如何将先前操作的DOM树/ HTML文件加载到原始上下文的页面（在示例中为slashdot.org）？我想要原始的上下文，以便所有引用实体（CSS，图像等）将正确加载。

Firebug不包含任何重新导入的方法，将先前保存的DOM树读入页面的当前上下文。但是，如果我们将Firebug与Web Developer扩展一起使用，我们可以实现所请求的功能。只需在编辑器（如记事本）中打开以前保存的HTML，并将HTML复制到剪贴板。然后选择 Web Developer>杂项>编辑HTML 并粘贴HTML。完成！

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 > HTML panel. So far so good: my changes are immediately visible in 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.

解决方案

How do I save the edited DOM tree (represented as 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).

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....

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.

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 HTML and paste the HTML. Done!

这篇关于使用Firebug编辑后保存操作的DOM / HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！