javascript 如何使用 Chrome 开发者工具保留 CSS 更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12692737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to persist CSS changes with Chrome Developer Tools
提问by Dan
I'm trying to debug a drop-down menu. I don't have access to the website just yet so I'm trying to find a solution through Google Chrome Developer Tools which I can test and then apply to the site when I get access. It's only CSS and perhaps some Javascript changes.
我正在尝试调试下拉菜单。我还没有访问该网站的权限，所以我正在尝试通过 Google Chrome 开发人员工具找到一个解决方案，我可以测试该解决方案，然后在我获得访问权限时将其应用到该网站。这只是 CSS，也许还有一些 Javascript 更改。
The problem is I want to apply some new CSS style rules through dev tools, but then have these persist upon refreshing the web page. Is there a way I can apply styles and get them to persist? I've looked at the resources section, which kind of suggests I can do something like this (maybe by adding a local style sheet as a resource?), but I just can't figure out how to do it.
问题是我想通过开发工具应用一些新的 CSS 样式规则，然后在刷新网页时保留这些规则。有没有办法可以应用样式并使它们持久化？我看过资源部分，哪种建议我可以做这样的事情（也许通过添加本地样式表作为资源？），但我就是不知道如何去做。
Could anyone point me in the right direction here?
有人能在这里指出我正确的方向吗？
Many thanks folks...
非常感谢各位...
采纳答案by Dan
回答by Nelson
You can install the Tampermonkeychrome extension, which is greasemonkey for chrome, and you can load userscripts that can alter cssand use jquery to modify the page, and this changes are permanentas the script will be loaded and execute it automatically anytime you go to the site you set in the @matchrule, see the following userscriptwhich just changes the background color of the page:
您可以安装Tampermonkeychrome 扩展程序，它是 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);
});
})();
回答by Gabriel R.
My favorite tools for CSS overriding is Stylish https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
我最喜欢的 CSS 覆盖工具是 Stylish https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
It's useful for debugging and enhancing any web page. There is also a large library of existing styles, with a convenient link to them from the extension menu. Like these, for StackOverflow.com
它对于调试和增强任何网页很有用。还有一个很大的现有样式库，可以从扩展菜单方便地链接到它们。像这些，对于StackOverflow.com
回答by florentcm
回答by FajitaNachos
回答by Wexoo
Since Version 65 of Chrome this can be done without plugins. In the developer tools go to the Sources -> Overridestab and select any local folder, where chrome should save your persistent changes to. For changes in the DOM tree, use the Sourcesand not the Elementstab.
从 Chrome 65 版开始，这可以在没有插件的情况下完成。在开发人员工具中，转到Sources -> Overrides选项卡并选择任何本地文件夹，chrome 应将持久更改保存到该文件夹中。对于 DOM 树中的更改，请使用Sources而不是Elements选项卡。
For a list of local overrides go to ? -> More tools -> Changes.
有关本地覆盖的列表，请转到？-> 更多工具 -> 更改。
More info here.
更多信息在这里。
