How to persistently change third party web sites with browser developer tools

Often you find things in web sites that annoy you. And — as a web developer — you’re even asked to fix some problems in web sites without getting access to the source.

Using developer tools in browsers you can change a lot of things and you can even fix some issues. You get visual tools to tweak colours, dimensions and more without having to know CSS.

The problem is that the changes aren’t persistent — once you reload the page, they are gone. Furthermore it is tough to make your changes accessible to others short of a screencast or pair programming using live share.

Stuart Langridge complained about that on his blog and longed back for the days of Greasemonkey and Userscripts. Both are still around and to a degree maintained. There are also a few extensions for other browsers than Firefox that do similar things. But the overhead of having to install an extension to do some tweaking seems a lot.

There are some features in browser developer tools that can help you with this task though. Some may be hard to find or you never looked, so here’s an overview.

Elements, Styles and Changes

What is often forgotten is that if you have bigger changes, you can also click the name of the CSS file and get to the Sources pane where you have a full-fledged editor in the developer tools. The editor will jump to the right line in the CSS file. For minified files the Developer Tools will offer you to get a more human readable version . If that doesn’t happen for some reason you can click the ‘{}’ button instead.

Another thing that you may not be aware of is the Changes feature. You don’t need to keep track of what you changed in the CSS when you get back to your source code. In the “Changes” tab you get a difference view of all the changes you did and you can copy and paste them.

Console

Often you find yourself trying to cram all the code to run against the page into one line, but that’s not needed. If you hit enter on a line that isn’t a full JavaScript expression, Console automatically realises you want to write more and indents the next line. You can also always use Shift-Enter to force linebreaks and hit Enter to execute the code when you’re done. Hitting the up and down arrow allows you go back and forward in the Console history, much like any other Terminal emulator.

You can do clever things in the console. For example, if you wanted to get all the links in the document that have “media” in them and filter out duplicates, you could do the following:

copy(
[...new Set($$('a')
.map(l => l.href)
.filter(l => l.includes('media')))]
.join("\n")
)

Running this against this page for example will give you a list of 25 unique images.

Whilst this is powerful, you also will lose your work when you restart the browser and the Shift+Enter trick is useful but also feels not natural.

That’s why Developer Tools also have a way to edit and store snippets of code to execute in the context of the current page.

Snippets

This upgrades the Console experience, but you still need to run the script by hand every time you reload the page. And you can’t re-use any of the resources of the page you try to fix. To do this, you can use a feature called Overrides.

Overrides

I wrote a detailed explanation how to use them on the official Developer Tools docs and here is a quick screencast explaining the feature.

The excellent part about overrides is that you use the real code of the page and change it. You can select files from the Network tab, directly from the Elements tab or really anywhere. Once you set up your overrides folder these stay in there as replacements until you delete them. The browser creates the correct folder structure for you. This means you can tweak the code and once you are done you can zip up your overrides folder and send it to the site maintainer as a drop-in. It is also an interesting feature to override annoying popup scripts.

Summary

Photo by Eugen Str on Unsplash

Maker of web things. Ponderer of new technology. Lover of simplicity. Portfolio: http://christianheilmann.comhttp://developer-evangelism.com