Twitter: raymondcamden


Address: Lafayette, LA, USA

Quick Tip: Running WebSQL commands in Chrome Dev Tools

01-16-2013 7,462 views Development, JavaScript, HTML5 6 Comments

I'm a big fan of WebSQL, which is, unfortunately, going the way of the Dodo since it was apparently just too easy to use. One of the nice things about the feature is that Chrome Dev Tools make it real easy to use. As an example, here is what you can see on a page making use of WebSQL.

As you can see, both the database and its tables are enumerated. If you click on the table, you get a list of data.

There's no UI hint to this, but you can click the columns to sort.

The coolest feature though is the one that is very non-obvious (in my opinion). If you click the database name, you may notice the right side of the panel empties out...

That's actually an editor. If you start typing you can execute arbitrary SQL. Hell, Chrome will even autocomplete table names and SQL commands for you. Here's an example:

One thing to watch out for. If you execute a SQL command that returns no results, Chrome doesn't display anything. You don't get a nice "0 Results". In fact, Chrome will remove the SQL from the pane.

6 Comments

  • Commented on 01-16-2013 at 12:02 PM
    Are there similar features for IndexedDB?

    Or is this nice feature exclusive to the lesser of the web databases
  • Commented on 01-16-2013 at 12:11 PM
    Yep. In the screen shots, look below Web SQL. :)
  • Patrick Heppler #
    Commented on 01-17-2013 at 8:02 AM
    Thought WebSQL is dead?
    http://www.w3.org/TR/webdatabase/
  • Commented on 01-17-2013 at 8:45 AM
    Unfortunately yes. You sir, the Spec Lords decided that SQL was far too easy and decided that a NoSQL solution (IndexedDB) would be better.

    Ok - snark aside - yes - the spec is dead. However, it is supported very well on mobile and in PhoneGap. I only use WebSQL for PG. Since I do most of my PG dev directly in Chrome, tools like this are very helpful.
  • Darren Clarke #
    Commented on 02-08-2013 at 9:10 PM
    Seems simple when you know how. This is the coolest. I too and building PG apps with WebSQL. Yes it is the best supported solution for mobile at present and Chrome is the best development environment to test.

    Great little tip. Keep it up.
  • Commented on 04-05-2013 at 5:01 PM
    I've just started doing WebSQL in Phonegap, remember this post, so useful. Thank you Ray.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty