Thursday, November 1, 2012

IndexedDB polyfill - now with sourcemaps

Enable Sourcemaps when using the IndexedDB polyfill and look directly at the source files

To enable the IndexedDB API on browsers that do not yet support IndexedDB (like Opera and Safari ), simply include the IndexedDBShim.min.js in the HTML file. This is a minified file that is generated by Grunt using individual source modules. However, debugging the polyfill itself from the minified file is hard.
SourceMaps solve this problem by defining a mapping from the minified file to the source files. Since the IndexedDBShim.min.js is generated by Grunt, I used the grunt-jsmin-sourcemap plugin to combine and generate the minified file alongwith the source map. To use the sourcemap, simply include the following line in your HTML file to enable IndexedDB polyfill and then turn on "Enable source maps" in developer tools for Chrome (Similar instructions for supported browsers).

<script type = "text/javascript" src="http://axemclion.github.com/IndexedDBShim/dist/IndexedDBShim.min.js" />

The plugin itself had some issues when generating the source files, and I submitted a couple of pull requests to get them fixed.The corresponding grunt file is simple and just requires the destination and source files in addition to a srcRoot directory that indicates the location of the sources.

As of writing this blog post, one pull request has still not been merged and hence, the filename of the minified file inside the sourcemap is incorrect. To get it working right away, change the tasks/jsmin-sourcemap.js with the content in the pull request. 

With the source map enabled, I also changed the test files to include the minified file instead of manually adding the sources. I am also planning to integrate sourcemaps with pouchdb, that does a similar process of generating the output file.  

No comments:

Post a Comment