如何使用 Chrome 开发者工具持久化 CSS 更改答案

【问题标题】：How to persist CSS changes with Chrome Developer Tools如何使用 Chrome 开发者工具持久化 CSS 更改
【发布时间】：2012-09-23 10:49:27
【问题描述】：

我正在尝试调试下拉菜单。我还没有访问该网站的权限，因此我正在尝试通过 Google Chrome 开发人员工具找到一个解决方案，我可以对其进行测试，然后在我获得访问权限时应用到该站点。这只是 CSS 和一些 Javascript 更改。

问题是我想通过开发工具应用一些新的 CSS 样式规则，但是在刷新网页时这些规则仍然存在。有没有办法可以应用样式并让它们持久存在？我查看了资源部分，这表明我可以做这样的事情（也许通过添加本地样式表作为资源？），但我就是不知道该怎么做。

谁能给我指出正确的方向？

非常感谢各位...

【问题讨论】：

标签： javascript css google-chrome-devtools

【解决方案1】：

从 Chrome 65 版开始，这可以在没有插件的情况下完成。在开发人员工具中，转到 Sources -> Overrides 选项卡并选择任何本地文件夹，chrome 应该将您的持久更改保存到其中。对于 DOM 树中的更改，请使用 Sources 而不是 Elements 选项卡。

有关本地覆盖的列表，请转到 ⠇ -> 更多工具 -> 更改。

更多信息here.

【讨论】：

【解决方案2】：

我最喜欢的 CSS 覆盖工具是 Stylish https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe

它对于调试和增强任何网页都很有用。还有一个现有样式的大型库，可以从扩展菜单中方便地链接到它们。像这些，对于StackOverflow.com

【讨论】：

【解决方案3】：

还有一个名为hotfix 的扩展程序。它允许您将更改从 Chrome 开发工具直接保存到 GitHub。

【讨论】：

【解决方案4】：

感谢您的建议。我尝试了这两种方法，但遇到了一些小问题（对我个人来说不是特别容易或直观）。相反，我偶然发现了Tincr，我发现它更合适。谢谢各位。

【讨论】：

【解决方案5】：

您可以安装Tampermonkey chrome扩展，即chrome的greasemonkey，并且您可以加载可以更改css和使用jquery修改页面的用户脚本，并且此更改是永久性，因为脚本将被加载并在您访问您在 @match 规则中设置的站点时自动执行，请参阅以下 userscript改变页面的背景颜色：

// ==UserScript==
// @name       yourscript
// @namespace  http://yeeeee/
// @version    0.1
// @description  Change bacground color of page
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @match      http://yourtargetsite.com/*
// @copyright  2012+, Me and Brothers
// ==/UserScript==

(function () {
    $(document).ready(function(){
        style = '<style type="text/css"> body {background-color: #CC7777 ! important;} </style>';
        $('head').append(style);
    });
})();

【讨论】：

【解决方案6】：

尝试使用扩展程序 stylebot，它允许您快速创建和保存网站的持久自定义 CSS。

【讨论】：

他们的网站已关闭，但扩展程序仍然很受欢迎。您可以在 github.com/ankit/stylebot 上找到源代码和 Chrome 扩展程序链接