How to persist CSS changes with Chrome Developer Tools

Question

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.

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.

Could anyone point me in the right direction here?

Many thanks folks...

Solution 1

Thanks for the suggestions. I tried both but had minor issues with them (just not particularly easy or intuitive for me personally). Instead I sumbled upon Tincr, which I found to be a better fit. Thanks folks.

Solution 2

You can install the Tampermonkey chrome extension, which is greasemonkey for chrome, and you can load userscripts that can alter css and use jquery to modify the page, and this changes are permanent as the script will be loaded and execute it automatically anytime you go to the site you set in the @match rule, see the following userscript which just changes the background color of the page:

// ==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);
    });
})();

Solution 3

My favorite tools for CSS overriding is 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

Solution 4

Since Version 65 of Chrome this can be done without plugins. In the developer tools go to the Sources -> Overrides tab and select any local folder, where chrome should save your persistent changes to. For changes in the DOM tree, use the Sources and not the Elements tab.

For a list of local overrides go to ⠇ -> More tools -> Changes.

More info here.

Solution 5

Try the extension stylebot that allows you to quickly create and save persistent custom CSS for sites.

View more solutions