The web console allows designers to examine and edit what you see in your browser. It allows journalists to find what those designers – or whoever – have been doing behind the scenes. As we learned before in Step Two, when we look at our wedding cakes photo on Flickr, we’re actually looking at a webpage. We know the photo exists on its own page. We just have to find it.
So on that page, open your web console. Then open the Network panel, like so:
The console is empty, and there’s a little warning message at the bottom saying “No requests captured.” Just refresh the page and a ton of elements will come streaming into that little half-window. The Network panel lists all the webpage’s elements, including photos.
To find our photo, let’s sort by filetype. Clicking on the Type column within the panel.
Scroll down until you get to the image files. Remember filetypes from Step One? I see a ton of jpegs, several png’s and a few gifs. But I don’t immediately see my photo, and I’m too lazy to sort through all those, so let’s sort by size instead. Because that photo is one of the biggest elements I see, I’m guessing that file’s size in bytes is one of the largest.
So click on Size, then scroll all the way to the bottom to look at the biggest files. Slowly scroll up until you see an element that might be the picture. Right click on it, open it in a new tab, and voila! We have finally isolated our picture. You can tell because its URL ends in .jpg. Click File > Save As to download it.
This process works for all sorts of files like videos and other embedded media elements. If you want to try using the web console to nab some other files, I suggest:
- Dan Nguyen’s guide to pulling raw data out of interactive Flash sites
- Gary Ng’s guide to downloading YouTube videos
Now that we have our photo, though, let’s see what info we can dig up on it in STEP FOUR.