How to beautify respond body of XHR (Ajax call) in Chrome browser? - ajax

As can be seen in the screencast below, the respond body is a minified JSON object.. Does anyone have ideas about how to beautify it in Google Chrome Browser?

you need a valid "application/json" content-type specified for chrome to give you the collapsible drop-down
To see a tree view in recent versions of Chrome:
Navigate to Developer Tools > Network > the given response > Preview

I found an extension called JsonView..
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related
It is awesome to beatify the JSON if it is available GET method.. but not sure how to access with POST method..

I don't think there is a way to do it* with existing DevTools functionality.
Should be doable in an extension though (that adds another panel to Dev Tools), see chrome.devtools.network and in general "Extending DevTools" guide.
* See ankur-singhal's answer for an exception

Related

Possible to view JSON data from AJAX load

I just wonder if it possible to use tools like Chromes inspector or Firefox Firebug to view JSON data that has been loaded with AJAX?
I have searched, but I can't find any info about this. I also looked inside the Network tab in Chrome, but without any progress.
It would be interesting to be able to view this data, or is this made impossible due to some security issue?
You can view the 'response' and 'preview' in chromes Network Tab. If the request returns JSON data then the preview tab automatically formats it for you.

debug "ajax request" with debugkit cakephp plugin on google chrome

i'm using "debugkit" (awesome cakephp plugin) to debug my "Sql request, view Vars, session vars ...) but this plugin doesn't debug "the AJAX request" :(
so i have always to use the Google Chrome "Network XHR section" and it's not very "useful"
is there a solution to debug "the AJAX request" directly on the "debugKit cakehp plugin" ?
thanks
Debug Kit is great, but for what you're looking for, it will not work. You're much better off using something like Firebug. This will give you the ability to inspect your ajax requests in real time, and it is significantly more robust than the inspector in Chrome.
There is a Firebug version available for Chrome (Firebug Lite), but the Firefox version is much better and I'd highly recommend you at least try it out.
CakePHP DebugKit is compatible with FirePHP, a Firebug extension that copies the same debugging info DebugKit shows on the pages, into Firebug console.
Very handy.
here how to do it
Simply choose the History tab and click on the ajax request to need to inspect the data. It will load the necessary data and you can open tabs and see the info as if it would be a non-ajax request.
http://bakery.cakephp.org/2015/04/26/queries_log_for_your_ajax_requests.html

Firebug: Inspect POST from webpage

Can I use Firebug to inspect a post request sent by a webpage to a server and if so how?
I am refering inspecting a regular POST made using a form, but would also be interested in knowing how to inspect posts using javascript.
Thanks
Of course you can do that. The Net panel allows you to expand every request related to a website. For a POST done via AJAX you can set the XHR filter to see only those requests.
If you expand a request by clicking on it, you'll get all the information related to it.
Sebastian

jQuery classic asp firefox best practices for debugging using Firebug/other tools

How do you use Firebug or other Fox tools to debug client-side jQuery and see errors and such? I pulled down Firebug but I'm not very proficient. I'd like to do more than fumble.
In order to see jQuery expressions in Firebug, you need to have an additonal add-on such as FireQuery: http://firequery.binaryage.com/
The most useful panel for debugging javascript/jQuery in Firebug is the console panel.
It will show you any errors which are found, and guide you to the line in code on which they ocurred. It is also priceless for debugging ajax requests, as you will see each GET/POST request as it's made, along with the response text or the error it generates.

Google Chrome display JSON AJAX response as tree and not as a plain text

I cannot find an answer to this one:
My AJAX calls return JSON data. In Google Chrome Developer Tools > Resources > XHR when I click on the resource on the left and then on the Content tab I see the JSON string as a string and not as a tree as Firebug and Firebug Lite do.
How do I force Chrome to display it as a tree. Is there a Content-type that my PHP file must have???
To see a tree view in recent versions of Chrome:
Navigate to Developer Tools > Network > the given response > Preview
Google Chrome now supports this (Developer Tools > Network > [XHR item in list] Preview).
In addition, you can use a third party tool to format the json content. Here's one that presents a tree view, and here's another that merely formats the text (and does validation).
You can use Google Chrome Extension: JSONView
All formatted json result will be displayed directly on the browser.
The correct content-type for JSON data is application/json. I assume that is what you are missing.
I've found the answer:
You MUST encode your json like this: {"c":21001,"m":"p"} but not {c:21001,m:"p"} or {'c':21001,'m':'p'}
Thus, the key of a dict must be wrapped in double quotes:", then chrome will preview it as json rather than plain text.
In order for it to display the JSON message properly it has to have the "application/json" mime type and to be correctly structured.
You can check the structure here
I'm not sure if Chrome has added this feature since the last answer, but I was able to view the json response by...
opening developer tools in the browser while on the page with the request
submitting the request
in developer tools - "Console" tab - click on the "Object" tree under the resource to expand
...I was able to view the response as a readable hierarchy that showed what to ask for and what is returned. (Neither Network or Resources tab had anything helpful that I was able to find.)
Happy requesting!
There was an issue with a build of Google Chrome Dev build 24.0.1312.5 that caused the preview panel to no longer display a json object tree but rather flat text. It should be fixed in the next dev
See more here: http://code.google.com/p/chromium/issues/detail?id=160733
How to get Tree-view
See step by step instructions on how to do this in the below GIF. (I recorded in Chrome - chromium shouldn't be too different.)
Click on the link to enlarge and follow along
I don't think the Chrome Developer tools pretty print XHR content. See:
Viewing HTML response from Ajax call through Chrome Developer tools?

Resources