Quick Tip: Running WebSQL commands in Chrome Dev Tools

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Pete posted on 1/16/2013 at 11:02 PM

Are there similar features for IndexedDB?

Or is this nice feature exclusive to the lesser of the web databases

Comment 2 by Raymond Camden posted on 1/16/2013 at 11:11 PM

Yep. In the screen shots, look below Web SQL. :)

Comment 3 by Patrick Heppler posted on 1/17/2013 at 7:02 PM

Thought WebSQL is dead?
http://www.w3.org/TR/webdat...

Comment 4 by Raymond Camden posted on 1/17/2013 at 7:45 PM

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.

Comment 5 by Darren Clarke posted on 2/9/2013 at 8:10 AM

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.

Comment 6 by Pete posted on 4/6/2013 at 2:01 AM

I've just started doing WebSQL in Phonegap, remember this post, so useful. Thank you Ray.

Comment 7 by GeraldVonberger posted on 11/25/2014 at 7:36 PM

I like the way this interface is set up. It seems like it would be easy to use and edit. It also organizes the information and outputs pretty well. It's easy to see what commands the program is performing and what the results are. I think that's one of the great values of SQL tool s. http://www.datasparc.com

Comment 8 by Amazonian posted on 5/8/2020 at 12:39 AM

unfortunately ,one cannot run select query on websql when your database is document-store /pouch db

Comment 9 (In reply to #8) by Raymond Camden posted on 5/8/2020 at 1:51 PM

Um, right, as that's a totally different technology.