如何在chrome中启用实时CSS编辑？

Question

我似乎有很多视频，其中开发人员正在使用chrome动态更改CSS。我试过同样的事情，但chrome不允许我更改代码。我不能写在样式表上。

有没有具体的设置来做到这一点？请帮助。

编辑：要编辑CSS，我右键单击一个元素，选择inspect元素。它会打开控制台。我选择元素的id并转到参考资料中的style.css并尝试更改CSS。它不允许我在那里写。

Answer 1

你做错了......资源面板不存在实时编辑，如果你想改变与HTML元素相关的CSS，右键单击该元素，然后在右侧面板中你会看到css与所选元素关联的样式。您可以编辑该规则，您将实时看到更改。

也许您可以查看some videos以了解有关Chrome开发者工具的一些基础知识，之后如果您想了解更多信息，可以查看以下问题：

Chrome Developer Tools: Best resource for learning advanced features?

Answer 2

这是一个名为Stylebot的Google Chrome的绝佳工具。

在此，您可以更改样式表并将自己的样式保存到您自己的自定义网站主题的任何网站！

以下是Stylebot

的链接

检查一下，把糖霜放在蛋糕上，它是免费的！

这不应该用于您自己的网站项目，因为CSS文件会在浏览器中保存本地文件！

Answer 3

在Chrome中，点击DevTools的 Elements 标签的样式窗格中的“all.css：1”之类的内容，将其中一个带到 Sources < / em> DevTools的标签。如果您正在查看远程服务器上的代码，则此源视图中的CSS规则不可实时编辑（与Firefox *的实时编辑样式编辑器选项卡不同），除非您：

1. 查看“inspector-stylesheet” - 一个临时样式表，其中包含您使用“元素”选项卡的“样式”面板中的“+”按钮创建的新样式规则。单击新规则的“inpector-stylesheet：1”链接将转到您已创建的临时规则的可编辑来源。

2. 查看持久性本地工作区。设置此项需要一些额外的步骤，如下所述："Set Up Persistence with DevTools Workspaces"。 基本上，您在计算机上创建了一个本地文件夹，您可以在其中保存您指示Chrome使用的本地副本，而不是Internet上的版本。请参阅该链接上的说明。请注意，正如它所说的那样，“如果您从远程服务器而不是本地服务器映射文件，那么当您刷新页面时，Chrome会从远程服务器重新加载页面。您的更改仍会保留到磁盘并在您重新应用时重新应用继续在工作区中编辑。“ （因此，只需在源本地CSS文件中键入空格字符，即可再次应用更改，如果您已刷新或导航到使用相同样式表的其他页面。）

*在Firefox中，如果右键单击远程网页上的元素，请选择“检查元素”，然后在检查器选项卡的规则窗格中单击右侧的链接如“all.css：1”，您将进入“样式编辑器”选项卡，您可以立即进行实时编辑，这与Chrome要求您映射到本地文件的要求形成对比。如果他们期望Chrome的DevTools具有相同的行为，这可能会让一些人感到困惑。

Answer 4

与Stylebot类似的另一个Chrome扩展程序为Code Cola。它有一个允许选择元素的检查器，以及一个不需要手动输入CSS的可视化编辑器。要查看生成的CSS代码，请单击工具栏中的花括号图标。