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!
Archived Comments
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?
WebSQL - a db usable via JavaScript. Chrome supports it, Firefox does not.
Details: http://caniuse.com/#feat=sq...
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.
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.
BTW -your web page is incredible.
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).
I will say when I did "su" and then "ls", it seemed to lock up.
Thanks for pointing that bug out!
Try su <tumblr username here> then ls.
Oh heh - I don't use tumblr. ;)
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")
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!
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!
Note - edited the blog to make it clear. Some folks don't read comments.
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.
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.