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
Related
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 am using Firebug 1.10.2 with Firefox 14.0.1. When showing a web page, the Firebug add-on has this "behavior": Firebug’s “Aborted” message upon Ajax request.
What should I make? Is it so dangerous that I must improve my web application because the presence of some error, or it is a Firebug bug or something else?
Please see the documentation of XHR open() for example here:
https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest
Note: Calling this method an already active request (one for which
open()or openRequest()has already been called) is the equivalent of
calling abort().
Just create a new XHR instance whenever you need one. Better yet, use jQuery or other JS library to do AJAX. It should shield you from these intricacies.
I saw this problem when trying to load a JavaScript file using HTTPS, but was serving the site on my local development environment using HTTP. The request to fetch the JavaScript file would fail with the Aborted message in FireBug. Making the requests use the same protocol worked for me.
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.
I would like to set Firebug to automatically display results of a POST or GET ajax request.
Is there such an option to automatically open the response tab? When I am debugging multiple requests it is a bit tedious to click on each one. I've looked through the general options and also done some Google searching.
http://img109.imageshack.us/img109/3279/firebug.jpg
The simple solution for me was to just start using FireLogger instead. Simpler and cleaner.
Cya later FirePHP!!
image http://img809.imageshack.us/img809/7227/firelogger4phpmainshot.png
I normally do my web dev using Firefox - I periodically test for cross browser compatability of my pages by using FF and IE.
I have just found that one of my AJAX pages stopped working in IE - although it works fine in FF. With FF, I always use FireBug to debug my Ajax interactions. I am looking for a similar tool to use with IE - to see what it is causing it to fail, even though it is a straightforward AJAX process on the page.
I downloaded Firebug Lite and that was very helpful, as it brought a familiar dev environment into IE. Unfortunately, I have not been able to debug my AJAX interactions following the ForebugLite's documentation:
firebug.watchXHR: Use this function to watch the status of XmlHttpRequest objects.
var req = new XmlHttpRequest;
firebug.watchXHR(req);
I inserted that in my page - so the top of my page looks like this:
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>
var req = new XmlHttpRequest;
firebug.watchXHR(req);
</script>
However, I still could not debug the AJAX interactions (i.e. nothing shows in the console window when I click on a link that triggers an AJAX call).
Has anyone managed to do this before (IE7 and Firebug Lite)?
Or, you could install Fiddler and watch all of your web traffic.
Try DebugBar - I think it will capture this.
To use Firebug lite, you have to attach Firebug to each XHR request. So you'll wanna call firebug.watchXHR(req); for each ajax request you make, before you fire the request.
If you are using a library such as Jquery or Prototypejs to make your Ajax requests, you can wire Firebug lite into the process for easy debugging.
charles is another option for studying your network traffic but debugBar would probably be my choice.