Chrome Dev Tools and WebSQL

This post is more than 2 years old.

In my blog post yesterday I talked about database synchronization and PhoneGap. One thing I didn't mention was that almost all of my code runs just fine in the desktop. The only thing that didn't work was the network check. While I worked on this demo, I found Chrome Dev Tools to be incredibly helpful. Did you know that it includes a way to see what databases are in use at a website?

Open up your Dev Tools and click the Resources panel. If the site uses any databases, you will see them listed here.

You can expand the database and look at the tables. Clicking on a table will list all the data available.

Currently there isn't a way to introspect the table structure or write arbitrary SQL. It should be possible to do SQL via the console. Oops, I was wrong. Down in the comments below Marcin pointed out that if you click the table, you get a console that allows for arbitrary SQL. That's fraking cool!

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 Dan posted on 4/4/2012 at 6:53 PM

I tried this on a regular website and a locally hosted website however I didn't see any database listed. What type of databases does this inspect?

Comment 2 by Raymond Camden posted on 4/4/2012 at 6:58 PM

WebSQL - a db usable via JavaScript. Chrome supports it, Firefox does not.

Details: http://caniuse.com/#feat=sq...

Comment 3 by Mike Goeppner posted on 4/5/2012 at 12:31 AM

W3 completely deprecated WebSQL (http://www.w3.org/TR/webdat.... I remember the Firefox devs thought it was problematic (based on SQLite, etc) and implemented IndexedDB instead.

IndexedDB (http://www.w3.org/TR/Indexe... and session/localStorage (http://www.w3.org/TR/websto... replaced WebSQL.

Comment 4 by Raymond Camden posted on 4/5/2012 at 12:33 AM

My understanding is that it was deprecated because everyone like SQLite and the W3C insisted on another implementation. That's sad IMO. I have nothing against IndexedDB - but in terms of simplicity, WebSQL is far easier to work with.

That being said - this is for PhoneGap, where WebSQL is supported. While testing in Chrome though the tool is very useful, and I don't believe Chrome is going to remove it anytime soon.

Comment 5 by Raymond Camden posted on 4/5/2012 at 12:34 AM

BTW -your web page is incredible.

Comment 6 by Mike Goeppner posted on 4/5/2012 at 12:37 AM

Thank you very much!

It works as well if you know your *nix commands (If you can't get focus on the editable line, press enter a few times).

Comment 7 by Raymond Camden posted on 4/5/2012 at 12:59 AM

I will say when I did "su" and then "ls", it seemed to lock up.

Comment 8 by Mike Goeppner posted on 4/5/2012 at 1:02 AM

Thanks for pointing that bug out!

Try su <tumblr username here> then ls.

Comment 9 by Raymond Camden posted on 4/5/2012 at 1:07 AM

Oh heh - I don't use tumblr. ;)

Comment 10 by Marcin posted on 4/5/2012 at 2:57 AM

Actually if you click on the database in the resource panel ("main" in your example) you get a console in the main pane where you can write arbitrary SQL.

It seems that table names are all lowercase though - I had a table that showed in the left column as "Transaction" but had to do "select * from transaction" to get it to work.

Don't know if there are any magic commands for showing schema, the sqlite ones didn't seem to work (eg. ".schema")

Comment 11 by Marcin posted on 4/5/2012 at 3:00 AM

Oh yeah, also check out persistence.js - http://persistencejs.org/ - it's a JS ORM for (amongst other things) WebSQL.

I actually just started working on a project that's using PhoneGap and local SQL storage. The asynchronous nature of it can be a bit of a pain sometimes!

Comment 12 by Raymond Camden posted on 4/5/2012 at 5:58 PM

Dude - EPIC find there. Thank you for sharing that.

It also has autocomplete which kicks butt too.

I'm not seeing the case issue you are though. I'm on Chrome 19something or another so maybe my build is a bit ahead.

But thank you - thank you - thank you!

Comment 13 by Raymond Camden posted on 4/5/2012 at 7:10 PM

Note - edited the blog to make it clear. Some folks don't read comments.

Comment 14 by Me posted on 5/27/2014 at 11:27 AM

While HTML and JS suck in every possible aspect of examination, people keep shoving more stuff (of highly questionable quality) inside the browsers. Having my experience spread from desktop programming to web programming, I can say with certainty that web programming is the most boring, annoying, security risky, counterproductive, immature, lousy designed and hackish programming I have ever experienced. The web MUST be redesigned from scratch.

Of course, this will make your favorite ringing toys not to work for some time, so it's not gonna happen. So, this is the reason the web will remain broken and ugly for a long long time. Petty for us having to make mirracles happen. Perhaps the final outcome of all this hacking turns out to be fancy and even amazing but it is still ugly and bad as hell underneath the surface.

Comment 15 by Raymond Camden posted on 5/27/2014 at 2:31 PM

Wow, what a completely depressing attitude. :) I disagree completely. Don't get me wrong, web development isn't perfect (of course, what platform *is* perfect), but I find working in it (especially these last few years) to be a joy. This "highly questionable quality" of stuff you describe are things that making it easier for web developers to create better sites and applications. Sometimes these new features need to get tweaked before release (hence the use of prefixes and flags), but I know I appreciate the the additional power we're getting within the browser.