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

Question

如果我试图CSS使用Firefox中的内置 开发人员工具（通过右键单击然后选择Inspect Element进行访问）在一个巨大的项目中进行一些编辑，是否可以使这些更改永久化？

其实有很多样式表，我在其中找不到这个属性吗？我只是找不到包含此属性的文件，所以我想在浏览器中对CSS进行永久更改。有办法吗？

---

编辑：-

Answer 1

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

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

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

现在，您可以在 Chrome Dev Tools 的 Elements 选项卡中进行更改，并且这些更改将保持不变。同样在“元素”选项卡中，它会向您显示任何给定的样式来自哪个 css 文件和哪一行！

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