7

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

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

编辑：- 在此处输入图像描述

4

4 回答 4

5

要首先在 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 源映射）

于 2014-08-25T15:32:22.840 回答
2

您可以使用 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/

于 2014-08-25T15:06:54.627 回答
2

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

编辑

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

于 2014-08-25T15:05:29.300 回答
0

你可以看看 userContent.css：

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

于 2014-08-25T15:01:02.920 回答