使用Developers tool / Firebug更新文件

Question

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

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

Answer 1

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

例如：

1. 在“来源”面板中打开JavaScript或CSS文件。

2. 点击来源。

3. 进行更改。

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

5. 右键单击源代码（或在“源”面板源代码树中），然后选择本地修改以查看版本控制。

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

Answer 2

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

使用该附加组件，选择 查看来源 - ＆gt; 查看生成的来源 。
这将打开由JS修改的HTML“文件” ¹ 的当前状态以及您在Firebug中进行的任何手工编辑。

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

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

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

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

没有。您正在编辑的代码是呈现的客户端代码。无法通过浏览器影响服务器端代码。在任何情况下，如果服务器端的基础文件是非静态的，那么这种操作的语义确实会崩溃。