21

There is a page on my website that uses jquery AJAX to request JSON data from the PHP backend. I want to view the JSON returned to the browser, and is trying to do so using Chrome browser's Developer tools, under Network> Response.

Problem: Although I am able to view the JSON data by selecting the XHR item there, the response appears to be cut off midway. According to Chrome, this JSON response is 300-400KB in size. I wonder whether if the webpage is receiving the full JSON response without truncation, and if not, how can I view the full data being received?

Nyxynyx
  • 61,411
  • 155
  • 482
  • 830

4 Answers4

19

Have you tried the "preview" tab - it lets you view your result as a proper JavaScript object, with the ability to expand nodes. It's much easier to work with than the raw text from the response tab.

enter image description here

Adam Rackis
  • 82,527
  • 56
  • 270
  • 393
  • 7
    For some reason, this "Preview" tab doesn't interpret the response as JSON and just displays it in all-black, one-line, plain text. The response `Content-Type` is `application/json`, but there's no color highlighting, formatting or expandable tree to bee seen anywhere. Any idea why? – Asbjørn Ulsberg Nov 15 '12 at 12:45
  • @asbjornu It was working for me all along, but all of a sudden it doesn't do the highlighting/nesting anymore for JSON in the Preview tab. Did you find out how to fix that? – Nathan Jan 19 '13 at 21:13
  • @Nathan, Chrome is still treating `application/json` as `text/plain` for me. No idea why. – Asbjørn Ulsberg Jan 21 '13 at 08:38
7

I using this extensions for Json viewer :- https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc

ajreal
  • 46,720
  • 11
  • 89
  • 119
5

To see the complete response:

  1. Navigate to Developer Tools > Network > the given response > Response tab.
  2. Right click (control-click on Mac) in the Response area > Save As

Response > Save As

Screenshot from Version 24.0.1312.57 on Mac.

Matt McClure
  • 16,009
  • 2
  • 28
  • 30
  • that's exactly what I need but I don't have a Save As menu item there. – GaryB96 Feb 11 '13 at 16:57
  • @GaryB96, I added a screenshot and the version I'm using to my answer. – Matt McClure Feb 11 '13 at 20:40
  • 1
    Matt thanks for the follow up. I see the Save As... menu item only on "documents" in the _Network_ tab. If I switch to _XHR_, and right-click the Response tab on one of them, I see only _Open Link_ and _Copy_ Link. (Version 24.0.1312.57 m on Win7) – GaryB96 Feb 13 '13 at 14:23
  • @GaryB96, I also don't have a Save As menu item on the Response tab for the XHR requests I spot checked. I recall it must have been there when I originally wrote this answer. In the examples I looked at just now, the response data wasn't truncated, so I could just Select All and Copy. Are you seeing examples where the response data is truncated? – Matt McClure Feb 13 '13 at 18:49
  • It's not truncated per se but it does not word wrap and goes off the screen to the right. I can hold down the mouse and select by dragging forever to the right but if I slip I wind up deselected :( There must be a better way. – GaryB96 Mar 07 '13 at 13:55
  • How about Ctrl-A to select all? – Matt McClure Mar 11 '13 at 12:49
4

I'm a little late to the party here but if you are at a breakpoint you can type the object name in and press "Enter" and the JSON object will be printed to the console window.

ElephaniousBrookwood
  • 76
  • 3