I recently wanted to use a graphic of all the current Microsoft datacentre regions for a customer presentation (to be delivered in Microsoft’s offices, in partnership with Microsoft, so copyright was not a concern).  The Azure website has a suitable graphic but there are elements that hide some of the content and saving the picture just saves the overlay with the locations, not the map behind.

I’d seen my sons using developer tools in a browser to change the colours on the page – and that gave me an idea… what if I used the developer tools in my browser to turn off elements, one by one, until I got back to the underlying graphic?

So, by right clicking on one of the elements I wanted to remove and choosing Inspect Element, I was able to view the associated code, delete a <div> or two and peel back the layers.

After that, I was a copy-and-paste away from the graphic I needed to add to my presentation.

This method doesn’t work in all cases – for example it didn’t help me lift the graphics from the Directory of Azure Services (which I find to be more visually appealing than the ones available for public download in the Microsoft Azure, cloud and enterprise symbol/icon set but appear to be in one large scalable vector graphic). Even so, live-editing the Document Object Model (DOM) made the geek inside me feel good!