Firebug。

然后，在javascript中:

var blah = {something: 'hi', another: 'noway'};
console.debug("Here is blah: %o", blah);

现在你可以查看控制台，点击语句，看看里面有什么

将JSON响应解析为HTML的一个很好的简单解决方案。

var json_response = jQuery.parseJSON(data);
html_response += 'JSON Response:<br />';

jQuery.each(json_response, function(k, v) {
    html_response += outputJSONReponse(k, v);
});

function outputJSONReponse(k, v) {
    var html_response = k + ': ';

    if(jQuery.isArray(v) || jQuery.isPlainObject(v)) {
        jQuery.each(v, function(j, w) {
            html_response += outputJSONReponse(j, w);
        });
    } else {
        html_response += v + '<br />';
    }

    return html_response;
}

Firebug。

然后，在javascript中:

var blah = {something: 'hi', another: 'noway'};
console.debug("Here is blah: %o", blah);

现在你可以查看控制台，点击语句，看看里面有什么

在JavaScript中等效的var_dump ?很简单，没有。

但这并不意味着你就无能为力了。就像一些人建议的那样，使用Firebug(或其他浏览器中的等效工具)，但与其他人建议的不同的是，当你有(稍微)更好的工具console.dir时，不要使用console.log:

console.dir(object)

打印对象的所有属性的交互式列表。这 看起来与您在DOM选项卡中看到的视图相同。

你也可以试试这个函数。我不记得原作者了，但所有功劳都归他们。

工作就像一个魅力- 100%相同的var_dump在PHP。

来看看。

function dump(arr,level) { var dumped_text = ""; if(!level) level = 0; //The padding given at the beginning of the line. var level_padding = ""; for(var j=0;j<level+1;j++) level_padding += " "; if(typeof(arr) == 'object') { //Array/Hashes/Objects for(var item in arr) { var value = arr[item]; if(typeof(value) == 'object') { //If it is an array, dumped_text += level_padding + "'" + item + "' ...\n"; dumped_text += dump(value,level+1); } else { dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n"; } } } else { //Stings/Chars/Numbers etc. dumped_text = "===>"+arr+"<===("+typeof(arr)+")"; } return dumped_text; } // Example: var employees = [ { id: '1', sex: 'm', city: 'Paris' }, { id: '2', sex: 'f', city: 'London' }, { id: '3', sex: 'f', city: 'New York' }, { id: '4', sex: 'm', city: 'Moscow' }, { id: '5', sex: 'm', city: 'Berlin' } ] // Open dev console (F12) to see results: console.log(dump(employees));

我提出这一点是为了帮助那些需要实用的东西的人，给你一个漂亮的、美化的(缩进的)JS节点的图片。对于节点，没有其他解决方案适合我(“周期性错误”或其他什么…)。这将引导您遍历DOM Node下的树(不使用递归)，并为您提供深度、tagName(如果适用)和textContent(如果适用)。

在头节点下走过树时遇到的任何其他节点细节都可以根据自己的兴趣添加……

function printRNode( node ){
    // make sort of human-readable picture of the node... a bit like PHP print_r

    if( node === undefined || node === null ){
        throwError( 'node was ' + typeof node );
    }
    let s = '';

    // NB walkDOM could be made into a utility function which you could 
    // call with one or more callback functions as parameters...

    function walkDOM( headNode ){
      const stack = [ headNode ];
      const depthCountDowns = [ 1 ];
      while (stack.length > 0) {
        const node = stack.pop();
        const depth = depthCountDowns.length - 1;
        // TODO non-text, non-BR nodes could show more details (attributes, properties, etc.)
        const stringRep = node.nodeType === 3? 'TEXT: |' + node.nodeValue + '|' : 'tag: ' + node.tagName;
        s += '  '.repeat( depth ) + stringRep + '\n';
        const lastIndex = depthCountDowns.length - 1;
        depthCountDowns[ lastIndex ] = depthCountDowns[ lastIndex ] - 1;
        if( node.childNodes.length ){
            depthCountDowns.push( node.childNodes.length );
            stack.push( ... Array.from( node.childNodes ).reverse() );
        }
        while( depthCountDowns[ depthCountDowns.length - 1 ] === 0 ){
            depthCountDowns.splice( -1 );
        }
      }
    } 
    walkDOM( node );
    return s;
}