it-swarm.com.de

Gibt es eine Entsprechung für var_dump (PHP) in Javascript?

Wir müssen sehen, welche Methoden/Felder ein Objekt in Javascript hat.

250
eddy147

Wie die anderen schon sagten, können Sie Firebug verwenden, und Sie werden sich mit Firefox keine Sorgen machen. Sowohl Chrome als auch Safari verfügen über eine integrierte Entwicklerkonsole, die eine nahezu identische Benutzeroberfläche mit der Firebug-Konsole aufweist. Ihr Code sollte also in allen Browsern portierbar sein. Für andere Browser gibt es Firebug Lite .

Wenn Firebug keine Option für Sie ist, probieren Sie dieses einfache Skript aus:

function dump(obj) {
    var out = '';
    for (var i in obj) {
        out += i + ": " + obj[i] + "\n";
    }

    alert(out);

    // or, if you wanted to avoid alerts...

    var pre = document.createElement('pre');
    pre.innerHTML = out;
    document.body.appendChild(pre)
}

Ich würde es nicht empfehlen, jede einzelne Eigenschaft zu warnen: Einige Objekte haben viele Eigenschaften, und Sie werden den ganzen Tag dort sein, wenn Sie auf "OK", "OK", "OK", "O" klicken Auf der Suche nach".

219
nickf

Wenn Sie Firefox verwenden, ist das firebug plug-in console eine hervorragende Möglichkeit, Objekte zu untersuchen

console.debug(myObject);

Alternativ können Sie die Eigenschaften (einschließlich Methoden) wie folgt durchlaufen:

for (property in object) {
    // do what you want with property, object[property].value
}
107
Ken

Viele moderne Browser unterstützen die folgende Syntax:

JSON.stringify(myVar);
53
PPrice

Es kann nicht genug gesagt werden, dass Sie dazu console.debug (object) verwenden können. Diese Technik erspart Ihnen buchstäblich Hunderte von Stunden im Jahr, wenn Sie dies für Ihren Lebensunterhalt tun: p

26
AceoStar

Um die Frage aus dem Kontext des Titels dieser Frage zu beantworten, haben wir hier eine Funktion, die etwas Ähnliches wie PHP var_dump macht. Es wird nur eine Variable pro Aufruf ausgegeben, aber es gibt sowohl den Datentyp als auch den Wert an und durchläuft Arrays und Objekte [selbst wenn sie Arrays von Objekten sind und umgekehrt]. Ich bin sicher, dass dies verbessert werden kann. Ich bin eher ein PHP Typ.

/**
 * Does a PHP var_dump'ish behavior.  It only dumps one variable per call.  The
 * first parameter is the variable, and the second parameter is an optional
 * name.  This can be the variable name [makes it easier to distinguish between
 * numerious calls to this function], but any string value can be passed.
 * 
 * @param mixed var_value - the variable to be dumped
 * @param string var_name - ideally the name of the variable, which will be used 
 *       to label the dump.  If this argumment is omitted, then the dump will
 *       display without a label.
 * @param boolean - annonymous third parameter. 
 *       On TRUE publishes the result to the DOM document body.
 *       On FALSE a string is returned.
 *       Default is TRUE.
 * @returns string|inserts Dom Object in the BODY element.
 */
function my_dump (var_value, var_name)
{
    // Check for a third argument and if one exists, capture it's value, else
    // default to TRUE.  When the third argument is true, this function
    // publishes the result to the document body, else, it outputs a string.
    // The third argument is intend for use by recursive calls within this
    // function, but there is no reason why it couldn't be used in other ways.
    var is_publish_to_body = typeof arguments[2] === 'undefined' ? true:arguments[2];

    // Check for a fourth argument and if one exists, add three to it and
    // use it to indent the out block by that many characters.  This argument is
    // not intended to be used by any other than the recursive call.
    var indent_by = typeof arguments[3] === 'undefined' ? 0:arguments[3]+3;

    var do_boolean = function (v)
    {
        return 'Boolean(1) '+(v?'TRUE':'FALSE');
    };

    var do_number = function(v)
    {
        var num_digits = (''+v).length;
        return 'Number('+num_digits+') '+v;
    };

    var do_string = function(v)
    {
        var num_chars = v.length;
        return 'String('+num_chars+') "'+v+'"';
    };

    var do_object = function(v)
    {
        if (v === null)
        {
            return "NULL(0)";
        }

        var out = '';
        var num_elem = 0;
        var indent = '';

        if (v instanceof Array)
        {
            num_elem = v.length;
            for (var d=0; d<indent_by; ++d)
            {
                indent += ' ';
            }
            out = "Array("+num_elem+") \n"+(indent.length === 0?'':'|'+indent+'')+"(";
            for (var i=0; i<num_elem; ++i)
            {
                out += "\n"+(indent.length === 0?'':'|'+indent)+"|   ["+i+"] = "+my_dump(v[i],'',false,indent_by);
            }
            out += "\n"+(indent.length === 0?'':'|'+indent+'')+")";
            return out;
        }
        else if (v instanceof Object)
        {
            for (var d=0; d<indent_by; ++d)
            {
                indent += ' ';
            }
            out = "Object \n"+(indent.length === 0?'':'|'+indent+'')+"(";
            for (var p in v)
            {
                out += "\n"+(indent.length === 0?'':'|'+indent)+"|   ["+p+"] = "+my_dump(v[p],'',false,indent_by);
            }
            out += "\n"+(indent.length === 0?'':'|'+indent+'')+")";
            return out;
        }
        else
        {
            return 'Unknown Object Type!';
        }
    };

    // Makes it easier, later on, to switch behaviors based on existance or
    // absence of a var_name parameter.  By converting 'undefined' to 'empty 
    // string', the length greater than zero test can be applied in all cases.
    var_name = typeof var_name === 'undefined' ? '':var_name;
    var out = '';
    var v_name = '';
    switch (typeof var_value)
    {
        case "boolean":
            v_name = var_name.length > 0 ? var_name + ' = ':''; // Turns labeling on if var_name present, else no label
            out += v_name + do_boolean(var_value);
            break;
        case "number":
            v_name = var_name.length > 0 ? var_name + ' = ':'';
            out += v_name + do_number(var_value);
            break;
        case "string":
            v_name = var_name.length > 0 ? var_name + ' = ':'';
            out += v_name + do_string(var_value);
            break;
        case "object":
            v_name = var_name.length > 0 ? var_name + ' => ':'';
            out += v_name + do_object(var_value);
            break;
        case "function":
            v_name = var_name.length > 0 ? var_name + ' = ':'';
            out += v_name + "Function";
            break;
        case "undefined":
            v_name = var_name.length > 0 ? var_name + ' = ':'';
            out += v_name + "Undefined";
            break;
        default:
            out += v_name + ' is unknown type!';
    }

    // Using indent_by to filter out recursive calls, so this only happens on the 
    // primary call [i.e. at the end of the algorithm]
    if (is_publish_to_body  &&  indent_by === 0)
    {
        var div_dump = document.getElementById('div_dump');
        if (!div_dump)
        {
            div_dump = document.createElement('div');
            div_dump.id = 'div_dump';

            var style_dump = document.getElementsByTagName("style")[0];
            if (!style_dump)
            {
                var head = document.getElementsByTagName("head")[0];
                style_dump = document.createElement("style");
                head.appendChild(style_dump);
            }
            // Thank you Tim Down [http://stackoverflow.com/users/96100/tim-down] 
            // for the following addRule function
            var addRule;
            if (typeof document.styleSheets != "undefined" && document.styleSheets) {
                addRule = function(selector, rule) {
                    var styleSheets = document.styleSheets, styleSheet;
                    if (styleSheets && styleSheets.length) {
                        styleSheet = styleSheets[styleSheets.length - 1];
                        if (styleSheet.addRule) {
                            styleSheet.addRule(selector, rule)
                        } else if (typeof styleSheet.cssText == "string") {
                            styleSheet.cssText = selector + " {" + rule + "}";
                        } else if (styleSheet.insertRule && styleSheet.cssRules) {
                            styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
                        }
                    }
                };
            } else {
                addRule = function(selector, rule, el, doc) {
                    el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
                };
            }

            // Ensure the dump text will be visible under all conditions [i.e. always
            // black text against a white background].
            addRule('#div_dump', 'background-color:white', style_dump, document);
            addRule('#div_dump', 'color:black', style_dump, document);
            addRule('#div_dump', 'padding:15px', style_dump, document);

            style_dump = null;
        }

        var pre_dump = document.getElementById('pre_dump');
        if (!pre_dump)
        {
            pre_dump = document.createElement('pre');
            pre_dump.id = 'pre_dump';
            pre_dump.innerHTML = out+"\n";
            div_dump.appendChild(pre_dump);
            document.body.appendChild(div_dump);
        }  
        else
        {
            pre_dump.innerHTML += out+"\n";
        }
    }
    else
    {
        return out;
    }
}
9
ReverseEMF

console.dir (am unteren Rand der verlinkten Seite) wird entweder in Firebug oder im Google-Chrome-Web-Inspector eine interaktive Auflistung der Eigenschaften eines Objekts ausgegeben. 

Siehe auch diese Stack-O-Antwort

7
David

Sie möchten das gesamte Objekt (alle verschachtelten Ebenen von Objekten und Variablen darin) in JSON-Formular anzeigen. JSON steht für JavaScript Object Notation. Das Ausdrucken einer JSON-Zeichenfolge Ihres Objekts entspricht var_dump (um eine Zeichenfolgendarstellung eines JavaScript-Objekts zu erhalten). Glücklicherweise ist JSON im Code sehr einfach zu verwenden, und das JSON-Datenformat ist auch sehr gut lesbar.

Beispiel:

var objectInStringFormat = JSON.stringify(someObject);
alert(objectInStringFormat);
6
user5280460

Wenn Sie Firebug verwenden, können Sie console.log verwenden, um ein Objekt auszugeben und ein mit Hyperlinks versehenes, auswertbares Element in der Konsole anzuzeigen.

6
Paul Dixon
console.log(OBJECT|ARRAY|STRING|...);
console.info(OBJECT|ARRAY|STRING|...);
console.debug(OBJECT|ARRAY|STRING|...);
console.warn(OBJECT|ARRAY|STRING|...);
console.assert(Condition, 'Message if false');

Diese sollten auf Google Chrome und Mozilla Firefox ordnungsgemäß funktionieren (wenn Sie mit alter Firefox-Version arbeiten, daher müssen Sie das Firebug-Plugin installieren)
Auf Internet Explorer 8 oder höher müssen Sie Folgendes tun: 

  • Starten Sie "Developer Tools", indem Sie auf die Schaltfläche F12 klicken
  • Klicken Sie in der Registerkartenliste auf "Skript".
  • Klicken Sie auf der rechten Seite auf "Konsole"

Weitere Informationen erhalten Sie unter folgender URL: https://developer.chrome.com/devtools/docs/console-api

4
Halayem Anis

Verbesserung der Funktion von nickf für diejenigen, die den Typ der eingegebenen Variablen nicht kennen:

function dump(v) {
    switch (typeof v) {
        case "object":
            for (var i in v) {
                console.log(i+":"+v[i]);
            }
            break;
        default: //number, string, boolean, null, undefined 
            console.log(typeof v+":"+v);
            break;
    }
}
4
naterudd

Ich habe die Antwort von nickf verbessert, so dass sich Objekte rekursiv durchlaufen:

function var_dump(obj, element)
{
    var logMsg = objToString(obj, 0);
    if (element) // set innerHTML to logMsg
    {
        var pre = document.createElement('pre');
        pre.innerHTML = logMsg;
        element.innerHTML = '';
        element.appendChild(pre);
    }
    else // write logMsg to the console
    {
        console.log(logMsg);
    }
}

function objToString(obj, level)
{
    var out = '';
    for (var i in obj)
    {
        for (loop = level; loop > 0; loop--)
        {
            out += "    ";
        }
        if (obj[i] instanceof Object)
        {
            out += i + " (Object):\n";
            out += objToString(obj[i], level + 1);
        }
        else
        {
            out += i + ": " + obj[i] + "\n";
        }
    }
    return out;
}
4
Stan

Wenn Sie nach einer in PHP konvertierten PHP - Funktion suchen, gibt es folgende kleine Site: http://phpjs.org . Dort können Sie die meisten Funktionen der PHP - Funktion erhalten zuverlässig in JS geschrieben. Für var_dump versuchen Sie: http://phpjs.org/functions/var_dump/ (Der oberste Kommentar ist zu überprüfen, dies hängt von "echo" ab, das auch von derselben Website heruntergeladen werden kann.)

Ich habe die erste Antwort verwendet, aber ich hatte das Gefühl, dass eine Rekursion darin fehlte.

Das Ergebnis war folgendes:

function dump(obj) {
    var out = '';
    for (var i in obj) {
        if(typeof obj[i] === 'object'){
            dump(obj[i]);
        }else{
            out += i + ": " + obj[i] + "\n";
        }
    }

    var pre = document.createElement('pre');
    pre.innerHTML = out;
    document.body.appendChild(pre);
}
2
Doglas

Basierend auf früheren Funktionen, die in diesem Beitrag gefunden wurden . Rekursiver Modus und Einzug hinzugefügt.

function dump(v, s) {
  s = s || 1;
  var t = '';
  switch (typeof v) {
    case "object":
      t += "\n";
      for (var i in v) {
        t += Array(s).join(" ")+i+": ";
        t += dump(v[i], s+3);
      }
      break;
    default: //number, string, boolean, null, undefined 
      t += v+" ("+typeof v+")\n";
      break;
  }
  return t;
}

Beispiel

var a = {
  b: 1,
  c: {
    d:1,
    e:2,
    d:3,
    c: {
      d:1,
      e:2,
      d:3
    }
  }
};

var d = dump(a);
console.log(d);
document.getElementById("#dump").innerHTML = "<pre>" + d + "</pre>";

Ergebnis

b: 1 (number)
c: 
   d: 3 (number)
   e: 2 (number)
   c: 
      d: 3 (number)
      e: 2 (number)
2
Daweb

Sie können einfach das NPM-Paket var_dump verwenden

npm install var_dump --save-dev

Verwendungszweck:

const var_dump = require('var_dump')

var variable = {
  'data': {
    'users': {
      'id': 12,
      'friends': [{
        'id': 1,
        'name': 'John Doe'
      }]
    }
  }
}

// print the variable using var_dump
var_dump(variable)

Dies wird drucken:

object(1) {
    ["data"] => object(1) {
        ["users"] => object(2) {
            ["id"] => number(12)
            ["friends"] => array(1) {
                [0] => object(2) {
                    ["id"] => number(1)
                    ["name"] => string(8) "John Doe"
                }
            }
        }
    }
}

Link: https://www.npmjs.com/package/@smartankur4u/vardump

Dank mir später!

0
smartankur4u

Folgendes ist mein Favorit var_dump/print_r äquivalent in Javascript zu PHPs var_dump.

 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;
 }
0
Blackbam

Spät mit dem Spiel, aber hier ist eine wirklich praktische Funktion, die sehr einfach zu bedienen ist. Sie können beliebig viele Argumente übergeben, und der Objektinhalt wird im Browser-Konsolenfenster so angezeigt, als würden Sie Konsole nennen. log von JavaScript - aber von PHP

Beachten Sie, dass Sie auch Tags verwenden können, indem Sie 'TAG-YourTag' übergeben. Diese werden angewendet, bis ein anderer Tag gelesen wird, z. B. 'TAG-YourNextTag'.

/*
*   Brief:          Print to console.log() from PHP
*   Description:    Print as many strings,arrays, objects, and other data types to console.log from PHP.
*                   To use, just call consoleLog($data1, $data2, ... $dataN) and each dataI will be sent to console.log - note that
*                   you can pass as many data as you want an this will still work.
*
*                   This is very powerful as it shows the entire contents of objects and arrays that can be read inside of the browser console log.
*                   
*                   A tag can be set by passing a string that has the prefix TAG- as one of the arguments. Everytime a string with the TAG- prefix is
*                   detected, the tag is updated. This allows you to pass a tag that is applied to all data until it reaches another tag, which can then
*                   be applied to all data after it.
*
*                   Example:
*                   consoleLog('TAG-FirstTag',$data,$data2,'TAG-SecTag,$data3); 
*                   Result:
*                       FirstTag '...data...'
*                       FirstTag '...data2...'
*                       SecTag   '...data3...' 
*/
function consoleLog(){
    if(func_num_args() == 0){
        return;
    }

    $tag = '';
    for ($i = 0; $i < func_num_args(); $i++) {
        $arg = func_get_arg($i);
        if(!empty($arg)){       
            if(is_string($arg)&& strtolower(substr($arg,0,4)) === 'tag-'){
                $tag = substr($arg,4);
            }else{      
                $arg = json_encode($arg, JSON_HEX_TAG | JSON_HEX_AMP );
                echo "<script>console.log('".$tag." ".$arg."');</script>";
            }       
        }
    }
}

ANMERKUNG: func_num_args () und func_num_args () sind PHP-Funktionen zum Lesen einer dynamischen Anzahl von Eingabearrgs und ermöglichen es dieser Funktion, unendlich viele console.log-Anforderungen von einem Funktionsaufruf zu haben

0
Chris Sprague