Question

我正在尝试调试下拉菜单。我还没有访问该网站，所以我试图通过谷歌Chrome开发者工具找到一个解决方案，我可以测试，然后在我访问时应用到该网站。这只是CSS，也许还有一些Javascript变化。

问题是我想通过开发工具应用一些新的CSS样式规则，但是在刷新网页时仍然存在这些规则。有没有办法可以应用样式并让它们坚持下去？我查看了资源部分，哪种情况表明我可以做这样的事情（可能通过添加本地样式表作为资源？），但我无法弄清楚如何去做。

有人能指出我在正确的方向吗？

非常感谢大家......

Answer 1

您可以安装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);
    });
})();

Answer 2

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

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

Answer 3

感谢您的建议。我试过这两个但是他们遇到了一些小问题（对我个人而言，这并不是特别容易或直观）。相反，我总结Tincr，我发现它更适合。谢谢大家。

Answer 4

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

Answer 5

自Chrome版本65起，无需插件即可完成此操作。在开发人员工具中，转到源->替代标签，然后选择任何本地文件夹，chrome会将您的永久更改保存到该文件夹中。对于DOM树中的更改，请使用 Sources （来源），而不要使用 Elements （元素）标签。

有关本地替代列表的信息，请转到⠇->更多工具->更改。

更多信息here。

Answer 6

还有一个名为hotfix的扩展程序。它允许您将Chrome Dev Tools中的更改直接保存到GitHub。

如何使用Chrome开发者工具保持CSS更改

6 个答案: