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.
