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:

Tesla_driver_dies_in_first_fatal_crash_while_using_autopilot_mode___Technology___The_Guardian

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

Tesla_driver_dies_in_first_fatal_crash_while_using_autopilot_mode___Technology___2

then delete it…

Tesla_driver_dies_in_first_fatal_crash_while_using_autopilot_mode___Technology___3

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

Tesla_driver_dies_in_first_

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

Tesla_driver_dies_in_first_fatal_crash

 

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…

Distance_Learning_Courses_and_Adult_Education_-_The_Open_University

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

 

 

One comment

  1. CogDog

    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.