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...

Wexoo · Accepted Answer · 2020-04-11 20:31:06Z

16

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.

answered Apr 11, 2020 at 20:31

Wexoo

3233 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Splic Over a year ago

Note that you must check the "Enable Local Overrides" box after selecting a folder. Otherwise, this should be the approved answer!

Nelson Benítez León · Accepted Answer · 2012-10-02 22:41:46Z

12

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

answered Oct 2, 2012 at 22:41

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

1 Comment

HobbyMarks Over a year ago

In my opinion,this way is the best way and it works very well.

Gabriel R. · Accepted Answer · 2013-04-26 13:53:28Z

5

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

answered Apr 26, 2013 at 13:53

Gabriel R.

1,3022 gold badges19 silver badges32 bronze badges

Comments

Dan · Accepted Answer · 2012-10-04 08:48:52Z

3

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.

answered Oct 4, 2012 at 8:48

Dan

6,04025 gold badges90 silver badges147 bronze badges

1 Comment

Christoph Rackwitz Over a year ago

the linked extension is no longer available.

florentcm · Accepted Answer · 2012-10-02 14:58:13Z

1

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

answered Oct 2, 2012 at 14:58

florentcm

1213 bronze badges

1 Comment

Micros Over a year ago

Their website is down, but the extension is still very popular. You can find the source and the Chrome Extension link on github.com/ankit/stylebot

FajitaNachos · Accepted Answer · 2013-04-05 00:04:46Z

0

There's also an extension called hotfix. It lets you save changes from Chrome Dev Tools directly to GitHub.

answered Apr 5, 2013 at 0:04

FajitaNachos

1,0209 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to persist CSS changes with Chrome Developer Tools

6 Answers 6

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related