Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to persist CSS changes with Chrome Developer Tools

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

like image 271
Dan Avatar asked Oct 02 '12 14:10

Dan


People also ask

How do I save HTML edits in Chrome?

CSS changes are instantly updated but, in the case of HTML and JavaScript, you'll normally need to press Ctrl/Cmd + S to save the file to the file system then refresh the browser. Note that you can also right-click the file tab and select Save as… to save a copy of the file elsewhere.

Do the changes made using developer tools remain permanent for the web page?

It remains after refreshing.


1 Answers

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.

like image 173
Wexoo Avatar answered Nov 15 '22 20:11

Wexoo