Browser Developer Tools Tricks

Noticing that Alan just posted a Little Web Inspector / CSS Trick for extracting logos from web pages, here’s one for cleaning up ads from a web page you want to grab a screen shot of.

For example, I often take screenshots of new web pages for adding to “topical timeline” style presentations. As a reference, I often include the page URL from the browser navigation bar and the newspaper banner. But some news sites have ads at the top that you can’t scroll away:


Using a browser’s developer tools, you can “live edit” the page HTML in the browser – first select the element you want:


then delete it…


If that doesn’t do the trick, you can always edit the HTML directly – or modify the CSS:


With a bit of tinkering, you can get a version of the page that you can get a clean screenshot of…



By editing the page HTML, you can also create you own local graffiti to web pages to amuse yourself and pass away the time…!;-)

For example, here’s me adding a Brython console to a copy of the OU home page in my browser…


This is purely a local copy, but functional nonetheless. And a great way of demonstrating to folk how you’d like a live web page to actually be, rather than how it currently is!-)



Author: Tony Hirst

I'm a Senior Lecturer at The Open University, with an interest in #opendata policy and practice, as well as general web tinkering...

One thought on “Browser Developer Tools Tricks”

  1. Very interesting! I’ve used Mozilla X-ray Goggles to change over content for screenshots but of course the inspector used with it could zap script based ads.

Comments are closed.

%d bloggers like this: