使用Firebug编辑后保存操作的DOM / HTML

时间:2010-02-02 14:48:16

标签: html firefox dom firebug

假设我已经在一个随机网站(比如slashdot.org)上启用了Firebug的Firefox。加载网站后,我开始使用Firebug > HTML面板编辑页面。到目前为止一切顺利:我的更改在Firefox中立即可见。

我的问题:

  • 如何保存已编辑的DOM树(表示为HTML)?
  • 如何将以前操作过的DOM树/ HTML文件加载到页面的“原始上下文”中(示例中为slashdot.org)?我想要原始上下文,以便所有引用实体(CSS,图像等)都能正确加载。

9 个答案:

答案 0 :(得分:8)

您无法保存树本身,只能保存HTML。选择根标签,右键单击,然后选择Copy HTML,然后粘贴到文本编辑器中并保存到HTML文件。

答案 1 :(得分:7)

如何保存已编辑的DOM树(表示为HTML)?

Firebug不包含任何可用于将当前DOM保存到文件的方法。但是,您可以将Firebug与Web Developer扩展一起使用,以将DOM保存到文件(表示为HTML)。

完成操作Firebug中的DOM操作后,选择Web Developer (toolbar at the top) > View Source > View Generated Source > Archive > Save Page As...

如何将以前操作过的DOM树/ HTML文件加载到页面的“原始上下文”中(示例中为slashdot.org)?我想要原始上下文,以便正确加载所有引用实体(CSS,图像等)。

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

答案 2 :(得分:2)

我不确定“原始上下文”的含义,但您可以尝试将以下内容添加到已保存HTML的头部。

<base href="http://slashdot.org/" />

答案 3 :(得分:1)

当你在firebug的HTML部分时,在firebug的主工具栏下方的栏上有一个“编辑”按钮。单击此按钮可以为您提供HTML的纯文本视图(包含您所做的任何编辑),您可以将其复制到文本编辑器。

答案 4 :(得分:1)

我认为这是一个很好的问题,简而言之,萤火虫并不是为了“保留”你的编辑,所以我建议找一个工作流程,你永远不会“深入”到一个页面。一件事是保存HTML,但保存编辑的CSS更难。以下是我的问题解决方案:

  1. 点击HTML标记,然后点击修改。复制并粘贴到另一个文本文件中。

  2. 您无法“重新加载”firebug操纵的HTML。但是,您可以在对结果感到满意(或不满意)后复制受操纵的HTML。将它保留在剪贴板上以将其复制到文本文件中,然后当您想再次使用它时,需要将其复制回firebug编辑控制台。

答案 5 :(得分:1)

尝试使用cssUpdater,它包含一个FireFox附加组件,可以通过套接字服务器监听您的FireBug css更改,并让您同步原始的css源文件。您还需要安装桌面应用程序。

所以工作流程将是:

  1. 在FireBug中编辑
  2. 点击cssUpdater中的同步
  3. 重新加载您的网站并查看您的更改已保存
  4. 您可以在此处测试和使用http://www.cssupdater.com

答案 6 :(得分:0)

文件→将页面另存为... 会将您编辑的标记保存为HTML,但似乎您可以保存一些Firebu生成的内容(我猜是是什么取决于您的Firebug版本。

答案 7 :(得分:0)

您可以尝试的一件事是选择网页(右键单击,从弹出菜单中选择全部),然后选择查看选择源。这应该在源窗口中显示修改后的HTML,然后您可以在编辑器中复制和保存。您可以通过Firebug添加一些可以在文本编辑器中删除的其他内容。

答案 8 :(得分:0)

您可以配置外部编辑器。打开firebug,在左边你有firebug图标,按下它并在编辑器中单击open然后配置编辑器。它适用于Gedit和Bluefish。

配置gedit: 打开FireBug的配置编辑器并单击添加, 将其命名为gedit,然后在&#39; usr / bin&#39;中浏览可执行文件。并选择或输入gedit。 您可以在保存之前测试配置。