Chrome / Firefox 检查器编辑 HTML答案

【问题标题】：Chrome / Firefox inspector to edit HTMLChrome / Firefox 检查器编辑 HTML
【发布时间】：2014-05-20 13:41:00
【问题描述】：

我知道我可以在 Chrome / Firefox 检查器中编辑 HTML 元素。但是如何保存对我桌面上本地文件的更改？

【问题讨论】：

重复，google.com/…
无重复。它是关于 HTML 元素，而不是 CSS 源代码。
抱歉，错过了这个细节。

标签： html google-chrome firefox

【解决方案1】：

是的，您可以编辑locally saved html file in IE9，方法是右键单击浏览器窗口中的页面，选择在记事本中打开的“查看源代码”并编辑代码，然后转到文件并保存更改。

您可以在 Firefox 中做同样的事情，方法是打开 Firebug，然后打开 Firebug 编辑器，即记事本。

我只是想我记得在 Firefox 中右键单击页面并打开“查看源代码”，就像在 IE9 中一样。

【讨论】：

感谢您的回答，但我没有询问 IE9 或 Firebug。而在 Firefox 中，您通过检查器所做的更改似乎并没有真正更改本地文件。
许多开发人员习惯的工作流程是在 Style Inspector 的规则视图中调整规则。一旦他们掌握了所需的外观，他们就想直接从 Style Inspector 中复制更改后的规则。不幸的是，规则视图不支持复制规则。我说没有，因为这项改进最近才出现

【解决方案2】：

在 Firefox 中查看源代码允许您使用代码并对其进行编辑，但保存和编辑实际工作文件需要打开它，进行相同的更改，然后保存。我建议使用开发人员工具，一旦你有你想要的，复制并粘贴更改后的源代码以在原始文件中使用。如果您有萤火虫和萤火虫编辑器，我认为您可以实际更新文件本身。 Chrome 允许您像这样编辑 JavaScript，但我不确定 HTML 和 CSS

【讨论】：

【解决方案3】：

我有同样的问题，如何编辑 DOM html 并保存结果。在我的电脑上，我可以使用 Scratchpad 有效地执行此操作，方法是将文件类型更改为全部、打开文件、编辑它、保存，然后刷新页面。稍微弄乱一下，您可以从 Inspector 复制并粘贴到 Scratchpad。这很 hacky，但确实有效。

但是，我的一位使用 Macbook AIR 的学生无法使用 ScratchPad 编辑 html 文件，她可以编辑 .js 文件，但是所有 html 文件都是灰色的，无法单击。底线是我不知道这个“解决方案”是否适用于所有系统。

【讨论】：

【解决方案4】：

Chrome 可以通过工作区做一些事情。打开 devtools 转到 Sources add folder to workspace 选择您的 index.html（或其他）编辑并单击 ctrl+s 保存。刷新浏览器，您会看到更改是永久性的。但是你不能去 Elements/Inspector 选择一些标签来改变它并保存，因为“DOM！==HTML”。

【讨论】：