Debugging IndexedDB Applications


IndexedDB is a W3C Working Draft that enables JavaScript developers to store, search, and retrieve data on the user’s local client, even when Internet connectivity is disabled. This blog post describes IDBExplorer, a tool we use internally to debug IndexedDB applications. IDBExplorer lets you view database schemas, object store content, and index details.

Exploring the tool with an example IndexedDB App

To illustrate, I created an application that tracks my New Year’s resolutions using IndexedDB. It stores and accesses my resolutions locally (on the system browsing the Web page) and lets me add or edit them. The “Done That!” button removes the selected resolution from the list and removes its internal representation from the database.

Partial screen shot of an application that tracks New Year’s resolutions using IndexedDB.

IndexedDB defines a database as a container of information. Each database contains object stores, which are repositories for JavaScript objects. Each object contains attributes which can be queried using the API. If you’re familiar with relational databases, object stores can be equated to tables and each JavaScript object in an object store represents a record. However, the objects stored in an IndexedDB object store are treated as opaque entities. In addition, these objects do not have to contain the same properties.

If a JavaScript object is analogous to a relational database record, then the properties of that object can be thought of as columns (or fields) in a table. As a result, IndexedDB allows you to define indexes that identify object properties that can be used to search the records in an object store. Thus, indexes allow you to traverse and search IndexedDB data using the attribute values on a JavaScript object.

IndexedDB allows each Domain to have multiple databases. This example uses one database: “NewYear.” The app stores my resolutions in an object store named “Resolutions” inside the NewYear database. Each resolution is a JavaScript object with the following attributes:

  • priorityId: Separates resolutions into different priorities
  • name: Name of the resolution
  • occurrenceId: Tracks how frequently the action of the resolution must be performed
  • dueDate: Completion date of the resolution
  • createdDate: Internal date when the resolution was added to the object store
  • categoryId: Defines the type of activity for a resolution

Notice that not all attributes are visible from the application’s UI. In some cases, they are only internally used (e.g. createdDate).

Here’s how the IDBExplorer tool displays the contents of the “Resolutions” object store:

Partial screen shot of the IDBExplorer tool displaying the contents of the “Resolutions” object store.

The “Resolutions” object store also contains an index on the priorityId attribute named “priorityId,” which allows the app to query objects using the priorityId property. The descriptions for the each priorityId value can be found inside the “Priorities” object store and the descriptions for the occurrenceId values can be found inside the “Occurrences” object store. Likewise, the descriptions for the categoryId values can be found inside the “Categories” object store.

The tool uses a tree hierarchy to illustrate these relationships:

Screen shot of the IDBExplorer tool showing there are five resolutions in the database.

The IDBExplorer tool shows there are five resolutions in my database (two high priority tasks, two medium priorities, and one low priority).

Using the application, I can add a new resolution:

Partial screen shot of the New Year’s Resolutions application showing adding a resolution.

The app retrieves the values for Occurrence, Priority, and Category fields from their respective object stores using cursors and displays them to the user. The IDBExplorer tool lets you see how these values exist in the object store. For example, selecting the Categories object store displays the available categories and their descriptions:

Screen shot of the IDBExplorer tool showing how values exist in the object store.

You can update a resolution by selecting it in the “WorkOn” screen and choosing “Edit.” After making any changes, selecting the “Update” button will commit the changes and update the values in the “Resolutions” object store.

Partial screen shot of the New Year’s Resolutions application showing updating a resolution by selecting it in using the “WorkOn” screen.

Using IDBExplorer in your Applications

You can include the IDBExplorer tool in your Metro style app or Web site. However, we recommend you not deploy the tool with your app.

To add the tool to your site, copy and unzip the content of the IDBExplorer package into your site. Your application will need to link to the IDBExplorer.html file contained inside the IDBExplorer folder using either an iframe element or a new window.

In our example, we decided to host IDBExplorer inside an iframe element. . However, for normal development we recommend hosting this URI inside a new window. This will allow you to have a side-by-side experience when debugging your database and application without affecting your site’s user interface.

When hosting IDBExplorer, you need to pass the database name using the query string. In this example, this was done using the src attribute of the iframe element:

<iframe id="debuggerId" class="debuggerContainer" src="IDBExplorer/IDBExplorer.html?name=NewYear"></iframe>

When planning to host this functionality in a Metro style app, remember that Metro-style apps run fullscreen. As a result, you should navigate to this URL, rather than opening a new window (you will need to add a Back button to the IDBExplorer.html file in order to be able to return to your application). Alternatively, you can add an iframe element and display the tool in it.

Enjoy the tool and let us know what you think!

—Israel Hilerio, Ph.D., Principal Program Manager, Internet Explorer

Comments (11)

  1. Anonymous says:

    Why not in developer tools?

  2. Anonymous says:

    You've got to be kidding me. Chrome has better versions of this built directly into their developer tools. Why would I hack up my site with an iframe and script when I could just use Chrome? Your F12 tools are five years behind Chrome. They only work half the time, they only include half the Chromes developer features, they reload my site half the time which resets what I was trying to debug, the Visual Studio integration never works, they're not intuitive, I can't easily view source with your tools, the cache information is never correct. There's no comparison between what Chrome offers and what you offer. Please take this feedback more seriously. Stop wasting time on scripts like this and build some reasonable and usable tools.

  3. @Huh? It doesn't show indexedDB on Chrome dev tools, test it yourself. I'm running latest build of Chrome.

    I agree it should be included in the devtools rather than an IFrame, but maybe that will change

  4. Anonymous says:

    @nightdev – chrome does have a built in DB inspector, they just haven't added indexeddb to it for whatever reason (under the Resources tab).  But that doesn't diminish @Huh?'s point… While he makes himself sound rather dumb, he makes a good point that IE's dev tools used to be the cream 3 years ago or so. They just haven't kept up with chrome's insane ever-growing set of tools. Basically what I'm saying is: c'mon IE team I know you can make IE the best again, MS makes the best dev tools in the world, let's put those into IE… just my 0.02…

  5. Anonymous says:

    Why would anyone publish code of such poor quality?

    Or is it a 1990s joke I don't get?  The visual appearence would then be explained, too.

    g

  6. Anonymous says:

    @derp! – IEs dev tools used to be the cream 3 years ago?!?! Are you feeling ok????

    Microsofts dev tools for IE have always been pathetic and haven't come close to catching up.

    The chrome dev tools may only support websql inspection at the moment but at least you can see all your tables, run queries etc.

    IE is also several years late to the game for offline DB storage… But hey thanks for comming out IE… Hey maybe you could try making cell phones now too?

  7. Anonymous says:

    Oh and in case it hasn't been mentioned yet today… Please fix your comment form!!!!

    Why does the blog of the most used browser not have a 100% working form?!??

    You're setting a horrible example to the developer community by not doing things correctly.

    Postback forms are dead -move on please!!!!!

  8. Anonymous says:

    Is there a way to secure Db on ClientSide may be user name or password (I didnt find any sample which talks abt security of this) when creating DB,or if this is not a fit case for keeping sensitive info on the client.

  9. Anonymous says:

    @Evan,

    Postback method is not dead. Its alive! They serve their purpose very well when we need to deal with the interim state of the page. Postback is one popular method invented by MS and being widely used in the industry. This comment box has a timeout set to 15 minutes, after which guest-users' session is expired to prevent the posts once after the comments are closed. If you are signed-in (like happen in most of the other blog systems) you will never encounter timeout issue.

    Talking about the developers… if you cant see any improvement in IE9/IE10 and still have a same perception since v6.. then you need to move on please!!

    HTML5 standards are yet to completion. IE10 has implemented many features which FF n Chrome haven't implemented yet and vice-versa. If you are judging IE with pre-mature standards and bashing 'n winning against everything which MS has done till day.. then you are proving yourself a hater. I try to compare technology from various vendors as well. But trolling against one while supporting other is nothing but a poor show and yet a cheap move.

  10. Anonymous says:

    For IE it was late to bring this down.

  11. Anonymous says:

    @S.Bell – the session timeout of 15min (which for the record is absurd!) is only part of the issue.  I can write a response in under 2 minutes that will fail to submit the 1st (and often 2nd) time I try to submit it (in any browser!) – THE FORM ON THIS BLOG IS BROKEN – PERIOD – JUST FIX IT!

    harold