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

【问题标题】：How to make permanent changes to a website's CSS from within the browser?如何从浏览器中对网站的 CSS 进行永久性更改？
【发布时间】：2017-09-07 23:57:44
【问题描述】：

如果我想在一个巨大的项目中使用 Firefox 中的内置 开发者工具编辑一些CSS（通过右键单击然后选择检查元素），有没有办法使这些更改永久化？

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

编辑：-

【问题讨论】：

我不确定 Fire Fox，但在 Chrome 中，您可以在 DevTools 中映射本地 CSS 文件，以便在进行更改时将它们保存到实际的 CSS 文件中。你用铬吗？？如果生病了，请发布所需步骤的答案。
虽然我自己还没有尝试过，但根据这个页面似乎完全有可能：developer.mozilla.org/en-US/docs/Tools/Style_Editor
永久更改的唯一方法是更新服务器上的文件或数据库。否则一切都是本地的，可能会发生变化。
不是您想要的解决方案，但是如果您在 IE11 中进行更改，它会在侧面提供颜色提示以指示您更改了哪些属性，因此一旦您获得了您需要的效果，您可以手动将所有这些写入您的 CSS 文件。
Chrome's Workspaces 是@GifCo 所指的内容，应该有助于找到属性并保留它们。

标签： html css firefox firefox-developer-tools

【解决方案1】：

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

将项目文件夹添加到工作区后，关闭选项并单击“源”选项卡（仍在开发工具中）

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

现在您可以在 Chrome 开发工具的 Elements 选项卡中进行更改，这些更改将保持不变。同样在 ELements 选项卡中，它会向您显示什么 css 文件以及任何给定样式来自哪一行！

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

【讨论】：

"Right click on your .css file and click "Map To File System Resource" 这就是问题所在。我不知道它是什么 css 文件。
是的，但没关系，因为一旦您映射了一个 CSS 文件，Chrome 就会映射您添加到工作区的项目文件夹中的每个 CSS 文件
嘿，我在工作区中找到了文件here。但是当我单击它并单击“映射到文件系统资源”时，会出现一个没有search 按钮或其他东西的框，并且按Enter 不会执行任何操作。我在问题中添加了屏幕截图。

【解决方案2】：

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

编辑

我提到这一点只是因为它允许您发布一组任何 Firefox 客户端都可以选择并安装到特定安装的样式更改。由于无法“永久”更改远程样式信息的内容，唯一的解决方案是在需要更改的每个用户代理上半永久地对其进行操作。

【讨论】：

【解决方案3】：

您可以使用 Web Developer Toolbar 来解决此问题。通过转到 CSS 菜单，然后转到“编辑 CSS”，您可以在其中编辑和保存更改。 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/

【讨论】：

您好，我查看了Edit CSS，但其中包含大量文件。我只是不知道我要编辑的那一行在哪里。
使用 cssUpdater 和 Firebug 来简化保存这些文件的过程。您可以避免以前的定义，并通过在 css 定义中添加 !important 来强制定义。

【解决方案4】：

你可以看看userContent.css：

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

【讨论】：