Chrome's Dev Tools displays network response preview as a string

Question

After a recent update (about a month ago), it seems that the Preview pane on the Network tab has quit rendering the response as a JSON object. Instead it outputs the response as a string. This was working as expected prior to the update.

We have been and still are sending the correct header type as suggested in this question - Chrome (43.0.2357.81) JSON tree in network preview panel

I've also found a few suggestions that this has been a problem in the past but alludes to the fact it was fixed? - Google Chrome - Dev Tools - Network Tab - Preview - JSON vs. Text

I've posted to Dev Tool's Twitter account as well as submitted an email/bug with no further input. Has anyone fixed this issue for version 45.0.2454.101 (64-bit) or the previous version?

Grosso

Answer 1

It looks like this has been resolved as of Chrome Version 46.0.2490.71 (for Mac, haven't confirmed if this was an issue/solved for PC)

Grosso

Not displaying as JSON object/tree on Preview tab in Windows 10 Chrome 61.0.3163.100 (with the correct header type sent: "application/json"). – Womble

Answer 2

The reason a JSON result set might not be handled as an object depends on how the JSON is formed. The result JSON string must use double quotes for keys and values for it to be parsed into an object.

In other words, return:

{ "msg" : "Success...", "numRows" : 23, "records" : [ { "name" : "Tony", ... ] } }

When my JSON result set stopped being parsed into an object, someone else had added JSON that used single quotes for keys and/or values.

{ "msg" : "Success...", ... , 'archiveMsg' : 'Using archive data' }

It took only one instance of using single quotes in the data structure to break the display. It still functioned properly in JavaScript, but I had no idea why the AJAX result JSON was now an unparsed string, instead of an object. Took a while to sleuth that one out.

Chrome and Brave are the only browsers I have tested this on.

Note: It is possible to return a header type of "application/json", but Chrome and Brave simply "pretty printed" the JSON structure. Not ideal, but it helped me limp along until I figured out what the real problem was.

Wynnie

I hadn't even thought of that. Most of the JSON data I worked with was serialized by a framework (e.g. Django, RoR), so I wouldn't think that would occur. With hand-crafted responses, say in test data, that certainly could occur, especially w. IDEs having the ability to set preferences on linting. – Grosso

I neither advocate or disparrage using frameworks in applications. I personally like to keep apps simple and spin my own very simple framework. If a framework is acting up, it is possible to spend days of time debugging things that are trivial to deal with. Maybe it's overkill, but this approach works for me. – Wynnie