4

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

是否有任何特定设置可以做到这一点？请帮忙。

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

4

4 回答 4

3

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

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

Chrome 开发者工具：学习高级功能的最佳资源？

于 2013-11-09T03:58:28.507 回答
2

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

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

这是Stylebot的链接

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

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

于 2013-11-09T03:55:58.827 回答
1

在 Chrome 中，在 DevTools 的Elements选项卡的Styles窗格中单击“all.css:1”之类的内容会转到 DevTools 的Sources选项卡。如果您正在查看远程服务器上的代码，则此源视图中的 CSS 规则不可实时编辑（与 Firefox* 的实时编辑样式编辑器选项卡不同），除非您：

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

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

* 在 Firefox 中，如果您右键单击远程网页上的元素，选择 Inspect Element，然后在Inspector选项卡的Rules窗格中，单击右侧的链接，如“all.css:1”，您就会被带走到“样式编辑器”选项卡，您可以在其中立即进行实时编辑，这与 Chrome 要求您映射到本地文件的要求不同。如果他们期望 Chrome 的 DevTools 具有相同的行为，这可能会引起一些人的困惑。

于 2017-07-03T18:16:36.360 回答
0

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

代码可乐

于 2016-03-03T21:10:33.660 回答