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

Question

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

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

任何人都可以指出我在正确的方向吗？

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

Answer 1

您可以安装Tampermonkey chrome扩展,它是chrome的greasemonkey,您可以加载可以改变css的用户脚本并使用jquery来修改页面,这些更改是永久性的,因为脚本将被加载并随时自动执行您在@match规则中设置的站点,请参阅以下用户脚本,该用户脚本只更改页面的背景颜色:

// ==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

从 Chrome 65 版本开始，无需插件即可完成此操作。在开发人员工具中，转到“源”->“覆盖”选项卡，然后选择任何本地文件夹，chrome 应在其中保存持久更改。对于 DOM 树中的更改，请使用源而不是元素选项卡。

\n\n

有关本地覆盖的列表，请转至\xe2\xa0\x87 -> 更多工具 -> 更改。

\n\n

更多信息请点击此处。

\n

Answer 3

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

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

Answer 4

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