Taking a Screenshot of a full webpage

Sometimes It’s really hard to send someone to a website, for example if it’s behind a paywall, but cutting and pasting doesn’t work, as there is lots of screwy formatting thing.

And in this case, what you’d really want, is a screenshot of the whole website, or at least the bit you care about. A full length or full page screenshot, regardless of how long the page is, or what’s visible on the screen.

There are a number of firefox and chrome plugin’s that do this, but some are a pain to use, require logins, or other annoyances (or you might work for a company that has disabled plugins in the browser…).

You can using the developer tools in firefox take a screenshot of an entire node – this could legitimately be the body of an entire page!

All you need to do, is go into the web developer tool bar, by following the images below, or pressing ctrl+shift+i

screenshot of developer button in firefox menu
Click on the menu, then developer (the spanner!)
Screenshot of toggle tools command
Click on Toggle Tools (or just press ctrl+shift+i)

Now you have the web developer toolbar up. The trick here, is to go to inspector (which shows you the current displayed page html. And click on the node that you want to see, in many cases, this will by the <body> tag, but sometimes it may be a <div> just near the top. You can check, when you click it, the bits of the page you want should be highlighted in the browser.

 

Then, right click on the node, and select “screenshot” node.

Screenshot of "screenshot node" tool
Rightclick on the node that you want to screenshot, and select screenshot node. This takes a screenshot of the whole thing, not just what’s visible!

When you’ve done this, the screenshot will automatically be saved in your downloaded files directory for firefox (you can see it by clicking on the big down arrow on the toolbar!).

Voila! and cheers.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: