firebug - 使用开发者工具/Firebug 更新文件

Question

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

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

Answer 1

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

例如：

1. 在 Sources 面板中打开一个 JavaScript 或 CSS 文件。

2. 在源中单击。

3. 做出改变。

4. 按 Command-S 或 Ctrl-S 保存更改。

5. 右键单击源代码（或在 Sources 面板源树中）并选择Local modify以查看版本控制。

6. 右键单击，选择另存为...，然后选择磁盘上的一个位置来保存文件。后续保存将保存到此位置。

Answer 2

是的，在 Firefox 中，如果您还使用出色的Web Developer 插件...

使用该插件，选择View Source -> View Generated Source。^{这将打开由 JS 修改的 HTML“文件” 1}
的当前状态以及您在 Firebug 中所做的任何手动编辑。

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

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

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

Answer 3

Eclipse/Chrome 有一个 Java 项目：

http://code.google.com/p/chromedevtools/

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

http://code.google.com/p/chromedevtools/wiki/FeatureDebugOnRealFiles

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

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

Answer 4

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