The Java Script Console

Adding the following JavaScript to your web apps during development will make your life a lot easier, and can actually help you internalize the process of what is going on. The following script will send feedback to the console and free you from having to constantly refresh the browser window:

// Convenience array of status values© var cacheStatusValues = []; cacheStatusValues[o] = 'uncached'; cacheStatusValues[l] = 'idle'; cacheStatusValues[2] = 'checking'; cacheStatusValues[3] = 'downloading'; cacheStatusValues[4] = 'updateready'; cacheStatusValues[5] = 'obsolete';

// Listeners for all possible events© var cache = window.applicationCache; cache.addEventListener('cached', logEvent, false); cache.addEventListener('checking', logEvent, false); cache.addEventListener('downloading', logEvent, false); cache.addEventListener('error', logEvent, false); cache.addEventListener('noupdate', logEvent, false); cache.addEventListener('obsolete', logEvent, false); cache.addEventListener('progress', logEvent, false); cache.addEventListener('updateready', logEvent, false);

// Log every event to the console function logEvent(e) {

var online, status, type, message; online = (navigator.onLine) ? 'yes' : 'no'; status = cacheStatusValues[cache.status]; type = e.type;

message+= ' (prolly a syntax error in manifest)';


// Swap in newly downloaded files when update is ready window.applicationCache.addEventListener( 'updateready', function(){

window.applicationCache.swapCache(); console.log('swap cache has been called');

// Check for manifest changes every 10 seconds setInterval(function(){cache.update()}, 10000);

You can store this in a .js file such as debug.js and refer to it in your HTML document via the script element's src attribute, as in <script type="text/javascript" src="debug.js"></script>.

This might look like a lot of code, but there really isn't that much going on here:

O The first seven lines set up an array of status values for the application cache object. There are six possible values defined by the HTML5 spec, and this code maps their integer values to a short description (i.e., status 3 means "downloading"). We include them to make the logging more descriptive down in the logEvent function.

© The next chunk of code sets up an event listener for every possible event defined by the spec. Each one calls the logEvent function.

© The logEvent function takes the event as input and makes a few simple calculations in order to compose a descriptive log message. If the event type is error and the user is online, there is probably a syntax error in the remote manifest. Syntax errors are extremely easy to make in the manifest, because all of the paths have to be valid. If you rename or move a file but forget to update the manifest, future updates will fail.

Using a dynamic manifest file helps avoid syntax errors. However, you have to watch out for including a file (such as in a .svn subdirectory) that the server can't serve up due to permissions. This will make even a dynamic manifest fail, since the file ends up being unreadable.

O This line sends the composed message to the console.

You can view the console messages in Chrome by selecting View^Developer^ JavaScript Console and clicking Console if it was not automatically selected.

If you load the web page in your browser and open the console, you'll see new messages appear every 10 seconds (Figure 6-7). If you don't see anything, change the contents of one of the files (or the name of a file) and reload the page in your browser twice. I strongly encourage you to play around with this until you have a feel for what's going on. You can tinker around with the manifest (e.g., change the contents and save it, rename it, move it to another directory) and watch the results of your actions pop into the console like magic.

Figure 6-7. Use the console.log() function to send debugging messages to the JavaScript console
0 0

Post a comment