logo标签列表

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

cssgoogle-chromestylesheetedit
5
我曾经看过很多开发者在Chrome中实时更改CSS的视频。我尝试做同样的事情，但是Chrome不允许我更改代码。我无法在样式表上写入内容。
是否有特定的设置可以实现这一点？敬请帮忙。
编辑：要编辑CSS，我右键单击元素，选择检查元素。它会打开控制台。我选择元素的ID并转到资源中的style.css尝试更改CSS。但它不允许我在那里写入内容。
你不能在Chrome的“检查 > 样式”中完成这个吗？ - bobbyjones
按下“F12”键打开控制台。您需要先选择元素，然后编辑每个样式。 - David Houde
@bobby：我正在尝试，但无法编辑style.css文件。 - narayanpatra
我编辑了问题，请检查。 - narayanpatra
4个回答
3
您做错了...资源面板不是用于实时编辑的，如果您想更改与HTML元素相关联的CSS，则右键单击该元素，然后在右侧面板中，您将看到与所选元素关联的CSS样式。您可以编辑这些规则，并实时查看更改。
也许您可以查看一些视频以学习Chrome开发者工具的基础知识，之后如果您想学习更多，可以查看这个问题： Chrome开发者工具：学习高级功能的最佳资源？
2
这里有一个很棒的工具叫做Stylebot，适用于Google Chrome。你可以在里面更改样式表并保存自己的样式到任何网站上，以获得个性化的网站主题！以下是Stylebot的链接：Stylebot。快去试试吧，最棒的是它是免费的！请注意，这不应该用于处理自己的网站项目，因为CSS文件只会在本地浏览器上保存！
没问题！祝你的项目好运！ - Josh Powell
1

在Chrome浏览器中，点击开发者工具的元素选项卡中的样式面板上的类似于"all.css:1"的内容，会跳转到开发者工具的源代码选项卡。如果你正在查看远程服务器上的代码，这个源代码视图中的CSS规则是不可编辑的（与Firefox浏览器中的实时编辑样式编辑器选项卡不同*）除非你正在进行以下操作：

  1. 查看“检查器-样式表”——一个包含你在元素选项卡的样式窗格中使用“+”按钮创建的新样式规则的临时样式表。点击新规则的“检查器-样式表:1”链接将带你进入所创建的临时规则的可编辑源码。

  2. 查看持久化本地工作区。设置此项需要一些额外步骤，描述如下："使用开发者工具设置持久化"。基本上，你需要在电脑上建立一个本地文件夹，在其中保存可以让Chrome使用而不是使用互联网版本的本地副本。请参阅该链接中的说明。需要注意的是，正如该链接中所述，“如果你要映射远程服务器的文件而不是本地服务器的文件，则刷新页面时，Chrome会从远程服务器重新加载页面。但是，如果你在工作区中继续编辑，你所进行的更改仍然会持续保存并重新应用。”（因此，如果你已经刷新或导航到另一个使用相同样式表的页面，则只需将一个空格字符键入源本地CSS文件即可再次看到修改结果。）

* 在Firefox中，如果您在远程网页上右键单击一个元素，选择“检查元素”，然后在检查器选项卡的规则面板中单击右侧的链接（例如“all.css:1”），您将进入一个“样式编辑器”选项卡，在那里您可以立即进行实时编辑。这与Chrome的要求形成对比，后者需要让您映射到本地文件。如果有人期望与Chrome的DevTools相同的行为，则可能会导致某些人感到困惑。
你好。我想让你知道，在你的个人资料中，你拼错了Monica的姓氏（在最后一句话中第二次提到）。 - G-Man Says 'Reinstate Monica'
@G-ManSays'ReinstateMonica' 修改完毕 -- 眼力真好。 - Jacob C.
0

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

Code Cola

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接