使用开发者工具/Firebug 更新文件答案

【问题标题】：Updating file using Developers tool/Firebug使用开发者工具/Firebug 更新文件
【发布时间】：2011-09-14 00:38:13
【问题描述】：

有没有一种方法可以将 Chrome 开发者工具或 Firebug 中所做的更改直接保存到文件中？假设我对该文件具有读/写权限。

或者，是否有任何开发工具可以以类似的方式（或类似的 UI）更新更改？

【问题讨论】：

【解决方案1】：

在 Chrome 开发工具中，可以从 Sources 面板保存更改的 CSS 和 JavaScript 文件，并查看对这些文件进行了哪些更改（差异）。

例如：

【讨论】：

是的，这很好用。但是有一点警告：第一次保存任何文件时，请仔细检查以确保它确实确实它 --- 有时按 ^S 会声称保存文件，但实际上不会任何事物。（其他时候，如果它还不知道，它会提示您输入本地文件名。）一旦您成功保存它，它就会继续这样做。 Chrome 以这种方式制作了一个相当不错的 HTML/Javascript IDE。谢谢！

【解决方案2】：

有一个适用于 Eclipse/Chrome 的 Java 项目：

它只是一个 JavaScript 调试器（您看不到 CSS 或网络等），但您可以设置 Eclipse 项目以便调试和编辑相同的文件（加上实时编辑）。在当前版本中设置源文件有点棘手

（希望下一个版本更容易）。

结合 JSDT 或 Aptana 或其他 JavaScript 支持，您可以拥有一个不错的 Chrome IDE+调试器。

【讨论】：

【解决方案3】：

是的，在 Firefox 中，如果您还使用出色的 Web Developer add-on...

使用该插件，选择查看源代码 -> 查看生成的源代码。
这将打开由 JS 修改的 HTML“文件”¹ 的当前状态以及您在 Firebug 中所做的任何手动编辑。

在弹出的窗口中，您可以“另存为”文件，或根据需要复制粘贴。

请注意，此生成的文件将具有大量 Firebug 样式（很容易识别），并且可能具有由 JS 为元素设置的 style 属性。

¹ 不幸的是，它不会捕获链接到的 CSS 或 JS 文件的更改。
出于这个原因，在使用 Firebug 进行调整时，我喜欢通过将样式规则和代码附加到 HTML“文件”来更改 CSS 和 JS。
一旦页面看起来/行为接近预期，更改会通过查看生成的源代码进行快照，然后根据需要合并到链接的文件中。

【讨论】：

【解决方案4】：

没有。您正在编辑的代码是呈现的客户端代码。无法通过浏览器影响服务器端代码。无论如何，如果服务器端的底层文件是非静态的，那么这种操作的语义就会真正崩溃。

【讨论】：

好吧，如果文件在我的 localhost 文件夹中！！
用http://访问.. 关键是，我可以在本地访问文件。也许它可能是一个插件或其他东西，它可以检测文件并使用不同的协议进行更新。
没有。语义完全崩溃了，因为您正在编辑的代码可能是在服务器端，甚至是客户端（通过 javascript）动态生成的。这不是一个明智的操作。 Firebug 是一个调试器。（任何类型的）调试器通常不能覆盖它们的源代码。