David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler

    Web app developer since 1994 and Google Cloud Platform Instructor now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 223 other followers

  • Sleepless Nights…

    May 2010
    S M T W T F S
  • Blog Stats

    • 1,029,898 hits

How to save a snapshot of a Web page (including GWT)

Posted by David Chandler on May 22, 2010

This week’s “Saturday evening post” presents a useful tool for taking a snapshot of a Web page, including “Web 2.0” pages written in GWT and AJAX frameworks. You might use this technique to create a demo page for sales laptops that don’t always have access to the network. Or you might provide snapshots taken from a live GWT page to a Web designer in order to make it easier to work on CSS and images in a WYSIWYG design tool like Dreamweaver.

Server-side Web apps (JSF, PHP, etc.) generate HTML and send it to the browser, so “Save As… Web page, complete” in IE and Firefox does a decent job of making a local copy of a Web page, including images, stylesheets, etc. But in the case of pages that manipulate the DOM with JavaScript and XHR, there is typically minimal HTML, so this method doesn’t work.

Enter the Scrapbook plugin for Firefox. Scrapbook captures the current state of the DOM and saves it as HTML, along with images if you so choose. The result is a completely static snapshot comprised only of local HTML, images, and CSS. You can also save JavaScript, but it is not necessary, as Scrapbook captures the DOM at a point in time, thereby creating an accurate visual representation.¬†Of course, without JavaScript, GWT widgets on the page won’t actually function.

Once you’ve captured a snapshot, you can export it. This creates a directory containing one or more HTML pages, images, and stylesheets. Simply open the exported index.htm in your browser to view it. Scrapbook even captures multiple frames.

As mentioned in the introduction, Scrapbook goes a long way toward solving one of the greatest challenges of AJAX application development: visual layout and design of pages written primarily in JavaScript. Exporting the DOM as static HTML allows designers to work in a traditional visual Web design tool, which should streamline the visual design process.

Scrapbook is free, with donations appreciated.

One Response to “How to save a snapshot of a Web page (including GWT)”

  1. Hello friends, how is everything, and what you wish for to say on the topic of this post, in my view its in fact remarkable in support of me.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: