Chrome Dev Tools（CSS）编辑和保存

Question

我需要更改小部件的一个类别中某些单词的颜色，我已经看过有关开发工具的YouTube视频。

当我找到要更改的部分时，我在element.style {color：red;的右上角的“Elements”（开发工具）中进行了更改。 } 但是当我进入资源时跟随视频，我所做的更改不存在。

1. 我只能在Elements中编辑，我无法保存
2. 我只能保存在资源中，我无法编辑/添加任何内容

有人可以帮助我这个开发工具如何工作吗？

但是我可以编辑/添加和保存在源代码中，也许我需要将样式表从参考资料保存到源代码？这是我想要做的吗？

Answer 1

正如您所说，Chrome开发者工具没有内置功能来保存您编辑的代码，无论如何，有几个Chrome扩展程序。我认为最好的是 Tincr 。

您可以在Tincr

找到它

然后你也可以在这里找到一个教程：http://addyosmani.com/blog/lets-tincr-bi-directional-editing-and-saving-with-the-chrome-devtools/。

基本上你

1. 安装扩展程序，
2. 然后您选择以下应用程序类型：Ruby on Rails，Chrome扩展，Atlassian插件和配置文件，

3. 然后您可以添加项目的根目录。

   完成后，如果您使用Google Chrome开发者工具编辑内容，更改将自动保存到源文件中，并且还有实时重新加载功能，因此您无需按刷新按钮或F5更改后重新加载页面。

Answer 2

您无法通过开发人员工具编辑服务器上的文件，刷新后不会保留更改。

Answer 3

截至2013年3月的更新答案，您现在可以在Dev Tools中保存更改（JS和CSS，而不是DOM）。

http://remysharp.com/2012/12/21/my-workflow-never-having-to-leave-devtools/