How to display entire XML from JQuery's AJAX callback function?

I have this simple code to query against the web service:-

$.get( url ,  
    function(xml) {
        var hello = $(xml).find("hello").text();
        ...

        alert(xml); // displays [object XMLDocument]
        alert($(xml)); // displays [object Object]
    }                       
);

This works fine, but I'm interested to see entire XML structure from the callback function for debugging purpose. I tried a few things, but I co开发者_如何学编程uldn't get it to display the XML. What I want to see is something like this:-

<stuff>
    <hello>bear</hello>
</stuff>

Any clue? Thanks.

If you are using firebug in firefox, but may also work in IE8 or chrome, you can try:

console.dirxml(xml) OR console.dir(xml) OR console.log(xml)

In IE8 press F12 to open up the developers console or you may get the error saying the normal browser doesn't know what console is (after F12 it should).

Alternatively you could use prettyPrint to display the object. Or take a look at the answer to Is there an equivalent for var_dump (PHP) in Javascript?

You would need a little trickery. Introduce a new element, which wraps your XML and output the .html() from that. Like

var fakexml = "<stuff><hello>bear</hello></stuff>";

alert($('<debug>').append(fakexml).html());

or use .wrapAll()

alert($(fakexml).wrapAll('<debug>').parent().html());