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...
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.
It remains after refreshing.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With