使用开发人员工具/ Firebug更新文件
-
27-10-2019 - |
题
有没有一种方法可以将在Chrome开发者工具或Firebug中所做的更改直接保存到文件中?假设我已经对该文件具有读/写访问权限。
或者,是否有任何开发工具可以类似方式(或类似UI)更新更改?
解决方案
是的,在Firefox中,如果您还使用出色的 Web开发人员附件 ...
使用该附件,选择 查看源代码 -> 查看生成的源代码 。
这将打开由JS以及您在Firebug中进行的任何手动修改所修改的HTML“ file” 1 的当前状态。
在弹出的窗口中,您可以“另存为”文件,或根据需要复制并粘贴。
请注意,此生成的文件将具有多种Firebug样式(易于识别),并且可能具有JS对元素设置的style
属性。
1 不幸的是,它无法捕获链接到的CSS或JS文件的更改。
因此,在使用Firebug进行调整时,我喜欢通过将样式规则和代码附加到HTML“文件”来更改CSS和JS。
页面的外观/行为接近所需的内容后,更改将通过查看生成的源进行快照,然后根据需要合并到链接的文件中。
其他提示
在Chrome开发工具中,可以从“源”面板保存更改的CSS和JavaScript文件,并查看对这些文件进行了哪些更改(差异)。
例如:
-
在“源”面板中打开JavaScript或CSS文件。
-
单击源。
-
进行更改。
-
按Command-S或Ctrl-S保存更改。
-
右键单击源代码(或在“源”面板的源树中),然后选择本地修改以查看版本。
-
右键单击,选择“另存为...”,然后选择磁盘上的位置来保存文件。随后的保存将保存到该位置。
有一个针对Eclipse / Chrome的Java项目:
http://code.google.com/p/chromedevtools/
它只是一个JavaScript调试器(您看不到CSS或网络等),但是您可以设置Eclipse项目,以便调试和编辑相同的文件(以及实时编辑)。 在当前版本中,设置源文件有些棘手
http://code.google.com/p/chromedevtools/wiki/FeatureDebugOnRealFiles
不。您正在编辑的代码是呈现的客户端代码。无法通过浏览器影响服务器端代码。无论如何,如果服务器端的基础文件是非静态的,则此类操作的语义确实会崩溃。