JSON explorer for Firebug
by Honza- Published:December 18th, 2008
- Comments:15 Comments
- Category:Firebug, Planet Mozilla
Thanks to Ashish Datta, Firebug is having a fresh new support for inspecting JSON in net responses. This feature allows to see JSON formatted as an expandable tree of items and also explore them using Firebug's Dom tab.
The view is available within Net panel and visible as soon as a JSON request is expanded. In such a case the user can see another tab (like Params, Headers, etc.). See the following screen-shot.
By clicking on links within the view (green labels) the user is automatically navigated to the Dom tab to explore particular parts of the JSON response as javascript objects.
The feature should be part of Firebug 1.4a11.
Ahshis is a senior at Tufts University and he did this work as a part of his class focusing on open source development. It's great to see how community around Firebug is growing and willing to contribute to this indispensable tool!
15 Comments
[...] bugs). I thought it was funny that right as I was resuming work on JSONView I noticed that a JSON explorer had actually landed for Firebug 1.4, which I’ll also be looking forward to. Initially I had intended to build that functionality [...]
This is great if it worked. Perhaps the installation went bad or a configuration i'm missing. 1.4a12 is completely missing the response altogether in the Net -> Response tab for a JSON response (or probably for all responses for that matter). 1.4a11 has responses, but it looks no different than today's production version of firebug, ie, no JSON tab as the screenshot in this page. Thanks!
@dannyd: this looks like http://code.google.com/p/fbug/issues/detail?id=1465. Do you have a simple test case (online URL or a file) that could be used to reproduce the problem?
I use JSONP (JSON wrapped in a callback), so my responses are not recognized as JSON and I get an HTML tab instead. Could I suggest an enhancement that would see a JS response as follows
some_callback_function(JSON object)
and let me navigate through the object?
Thanks!
I just installed 1.4a14, unfortunately I cannot find the JSON tab. The content type response header is set to:"text/json; charset=utf-8". I'll try falling back to 1.4a11.
Thanks 🙂
Could you please try my online test here:
http://www.janodvarko.cz/firebug/tests/1275/Issue1275.htm
If the test passes for you, it must be something with the JSON response.
I am using 1.4.0a17 but cannot see the JSON tab in my own test or in the test provided above (although that is responded with invalid request : 411 Length Required
Good post... keep it up!!!
[...] Firebug JSON Explorer I actually have it tried this one, but it might work. I use Firebug but this feature is only available in the 1.4 beta. I wasn’t feeling brave enough to upgrade my Firebug version. [...]
I ran your test to test this issue as well, as the services that I develop that produce JSON don't activate the tab either. The biggest difference that I can see is your response is plain/text and mine is application/json
@George: Please try Firebug 1.5a26 (it's going to reach beta phase soon), there was a lot of fixes and I am curious if this works for you in 1.5
http://getfirebug.com/releases/firebug/1.5X/
fixed reason why JSON tab was not displayed for me:
http://code.google.com/p/fbug/issues/detail?id=2209#c2
check your Content-type header and also double check if you don't have leading whitespace there.
@Antonin: done, thanks!
Hi there
Thanx for this greeeat addon !
Though i have a little problem. When my json refers to global variables/functions, the JSON tab is not displayed. Some knows how to tweak this ?
Thanx !
@juju: there is a reported issue related to this:
http://code.google.com/p/fbug/issues/detail?id=2209
I think what we need is a way to extract the JSON string from the response, e.g.: "onJsonReceived({a:1, b:2});" from this Firebug needs just "{a:1, b:2}" to evaluate.
This could be done using a reg expression. Any tips for the expression?
Honza