使用开发人员工具/ Firebug更新文件

Question

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

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

Answer 1

是的，在Firefox中，如果您还使用出色的 Web开发人员附件 ...

使用该附件，选择 查看源代码 -> 查看生成的源代码 。
这将打开由JS以及您在Firebug中进行的任何手动修改所修改的HTML“ file” ^{1 的当前状态。}

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

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

^{1 不幸的是，它无法捕获链接到的CSS或JS文件的更改。
因此，在使用Firebug进行调整时，我喜欢通过将样式规则和代码附加到HTML“文件”来更改CSS和JS。
页面的外观/行为接近所需的内容后，更改将通过查看生成的源进行快照，然后根据需要合并到链接的文件中。}

Answer 2

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

例如：

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

2. 单击源。

3. 进行更改。

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

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

6. 右键单击，选择“另存为...”，然后选择磁盘上的位置来保存文件。随后的保存将保存到该位置。

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

不。您正在编辑的代码是呈现的客户端代码。无法通过浏览器影响服务器端代码。无论如何，如果服务器端的基础文件是非静态的，则此类操作的语义确实会崩溃。