

Vulcan: Inspect your database in your browser - jamest
https://www.firebase.com/blog/2014-09-30-vulcan.html

======
alexwolfe
I'm the dev/designer at Firebase who made Vulcan during one of our experiment
weeks. I've been using it for pretty much all my Firebase development since.
Let me know if you have feedback!

~~~
drhayes9
This looks and performs pretty great. Good job! Is this going to replace
Forge?

How much large of a list have you opened up in it? 1k? 10k? I don't have a
Firebase with a ton of children off a leaf or else I'd test it myself. ( =

I notice that it's a DevTools panel. I expected it to be able to read the
Firebase I was using in my app, but it asked for a URL instead. Since it's not
related to the app I'm looking at, maybe it should have its own page instead
of being in the DevTools? Or be a separate Chrome app?

The security permissions ask for all my data on all websites, but doesn't it
really only need to read *.firebaseio.com?

~~~
alexwolfe
Thanks! You can open fairly large lists (thousands of items). 1,000 items
works with no problem. I currently have one open with 10,000 items and it
renders. At 10k there will be some performance issues related to rendering
that many items in the DOM but it works. In the future I'll probably add a way
to detect the number of nodes and intelligently render only items in view to
increase performance.

You can insert Vulcan directly into a webpage by following the directions
here: [https://github.com/firebase/firebase-
website](https://github.com/firebase/firebase-website). A future feature will
be detecting the Firebase URL being used on the page.

You are correct I technically do not need all your security permissions to
install vulcan. I plan on fixing this notice, it seems to be the default in
the chrome store.

Thanks for the feedback.

~~~
drhayes9
What does it do when there's 10k items? Is there a search or are you scrolling
through all of them to find what you want? Is each expansion a network request
to get the fields of the child?

I've been thinking a lot about how to solve this and I don't really have any
answers. Curious if you're doing something different.

~~~
alexwolfe
Currently Vulcan just displays a long list which is not ideal. However in the
Firebase Dashboard we do implement a solution for this. The approach I took
there was to truncate the list at 1000 items and display something like [3,332
more items...] as the last node. When you click on the last node it displays
another 1000 items, etc. Adding search to the existing implementation would be
ideal.

When you open a node there is not network request, there is an open socket
connection that data passes through.

Its usually not necessary to display all items in a 10k plus list as there is
generally no use case for a user scrolling through a list that large. Search
and showing a truncated list that renders efficiently would be a good
approach. Ultimately the problem we are tying to solve is helping a user find
the data they are looking for. hope that helps.

~~~
drhayes9
It does, yeah! Thanks for letting me pester you.

------
nawitus
>Fast forward to 2014 and Chrome’s DevTools now leads the way in helping
developers debug JavaScript

I wouldn't say Chrome's DevTools are significantly better than Firefox's
native JavaScript debugger. Both are pretty identical in terms of features
when you look at the latest versions.

