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!-)