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.
Related
i want to get seat value called from ajax.
when i see chrome developer tools i can see seat value
what i want which generated by ajax call but when i see source page i couldn't see.
how i can get seat value data using Httpwebrequest or similar other method not webbrowser ?
is it possible find ajax call url and use this url with httpwebrequest to get seat value?
any tip much appreciate
i tested with Post url in source but no luck
On the network tab of the chrome developer tools, you can see all ajax network calls.
Edit:
Open the network tab then reload the page
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
I need to do some screen scraping on a web page where the content I need is generated by AJAX. On the initial page there is a table with 4 tabs. When you click on any of the tabs the content of the table changes. I need the content from the 3rd tab only.
I have used the google chrome 'Inspect Element' tool to see what the requests and post data was and I can get the information I need when I put the information (session id and a lot of other cookie data as well as post data) from the inspect element result into a PHP curl request. But this only works for the 30 minutes that the session lasts. Does anyone know of a way I can get to this information?
I wont reproduce the code here but I will point you to the answer.
Its within this book:
http://www.amazon.com/Webbots-Spiders-Screen-Scrapers-Developing/dp/1593273975/ref=dp_ob_image_bk
A must buy for someone doing what your doing.
In the end I used htmlunit to get the content I needed. I also found the HTMLUnit Scripter very useful to help generate the Java code required.
I want to save the sequence of events and loading of resources on the webpage. Is there any way to export net tab web requests on Firebug ?
I found different ways to do this:
Firebug itself allows to copy the content on the net panel as an HTML table. The copy/paste functions work as usual. It is sufficient for exporting the summary shown in the net panel.
HTTPFox addon can do the same by using the Copy All Rows contex-menu option. This produces a tab separated format which works better with text editors.
NetExport Firebug extension adds export function to the net panel in Firebug. The data can be exported in HAR format which is used other tools or as JSON data. The online HAR Viewer allows to see the exported data as it was captured in Firebug.
I found that Firefox has addon HTTPFox, This allows many more functionalities to test HTTP web requests.
Please, Let us know if there are any more ways.
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?