如何从浏览器中对网站的CSS进行永久性更改？

Question

如果我尝试使用Firefox中的内置 开发人员工具在一个庞大的项目中编辑某些CSS（可通过右键单击访问然后选择 Inspect Element ），有没有办法让这些变化永久化？

实际上有大量的样式表，我找不到这一个属性？我找不到包含此属性的文件，因此我想从浏览器中对CSS进行永久性更改。有办法吗？

---

编辑： -

Answer 1

要首先在Chrome中进行设置，您必须将项目文件添加到＆＃34;工作区＆＃34;，进入开发工具Ctrl + Shift + I然后单击设置齿轮，在左侧您应该看到工作区

将Project文件夹添加到关闭选项的工作区后，单击＆＃34; Sources＆＃34;选项卡（仍在开发工具中）

现在像往常一样从LocalHost加载index.html。在sources面板中，您应该看到当前加载的页面及其资源。右键单击.css文件，然后单击＆＃34;映射到文件系统资源＆＃34;它将弹出一个搜索框，您可以在其中搜索实际项目文件夹中的相应.css文件（现在是Chrome中工作区的一部分）。完成链接后，Chrome就足够智能，可以链接项目文件夹中的任何其他CSS和HTML文件。

现在，您可以在Chrome开发者工具的“元素”标签中进行更改，这些更改将保持不变。同样在ELements选项卡中，它将显示css文件以及任何给定Style来自哪个行！

最好的办法是，如果您使用Sass或Less，那么它会将您的Scss文件映射回Chrome中正在处理的CSS样式。 （请注意，如果使用Sass和Less，则必须打开CSS源地图）

Answer 2

您可以使用Web Developer Toolbar来解决此问题。进入CSS菜单，然后转到编辑CSS＆＃39;您可以在其中编辑和保存更改。 Il还提供了用于识别哪些文件相关并手动修改它们的工具。您也可以尝试Firebug扩展，您可以在其中执行类似的操作。 链接到这里：

https://addons.mozilla.org/firefox/addon/web-developer/

https://addons.mozilla.org/firefox/addon/firebug/

如果您已安装Firebug，则可以安装cssUpdater以简化保存更改的过程。

https://addons.mozilla.org/firefox/addon/cssupdater/

Answer 3

如果您不想手动执行此操作，则有一个名为Stylish的FF插件，允许您定义基于规则的样式调整。

---

修改

我之所以提到这一点，只是因为它允许您发布一组任何Firefox客户端可以选择并安装到特定安装的样式更改。因为人们永远不能永久地＃34;更改远程样式信息的内容，唯一的解决方案是在需要更改的每个用户代理上半永久地操作它。

Answer 4

您可以查看userContent.css：

http://www-archive.mozilla.org/unix/customizing.html#usercss