Có tương đương với var_dump (PHP) trong Javascript không?


258

Chúng ta cần xem các phương thức / trường mà một đối tượng có trong Javascript.


3
Nó một phần phụ thuộc vào cách bạn muốn in nó, nhưng đây là một triển khai thực sự tốt đẹp trả về một số HTML mà sau đó bạn có thể thêm vào tài liệu của mình (hoặc viết thư cho debugdiv): james.padolsey.com/javascript/prettyprint-for- javascript
Alex Vidal

Tôi tạo một mã JavaScript định dạng kết quả như var_dump của PHP: rubsphp.blogspot.com/2011/03/vardump-para-javascript.html

1
Tôi thấy đoạn mã này tốt hơn nhiều và tôi sử dụng đoạn mã này trong các dự án của mình: phpjs.org/fifts/var_dump:604
Hafiz

Tôi sử dụng chức năng được tìm thấy trên trang web này: theredpine.wordpress.com/2011/10/23/var_dump-for-javascript

Câu trả lời:


220

Như những người khác đã nói, bạn có thể sử dụng Fireorms và điều đó sẽ giúp bạn không phải lo lắng về Firefox. Cả Chrome & Safari đều có bảng điều khiển dành cho nhà phát triển tích hợp có giao diện gần như giống hệt với bảng điều khiển của Fireorms, vì vậy mã của bạn phải được di chuyển trên các trình duyệt đó. Đối với các trình duyệt khác, có Fireorms Lite .

Nếu Fireorms không phải là một lựa chọn cho bạn, thì hãy thử tập lệnh đơn giản này:

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)
}

Tôi khuyên bạn không nên cảnh báo cho từng tài sản riêng lẻ: một số đối tượng có RẤT NHIỀU tài sản và bạn sẽ ở đó cả ngày nhấp vào "OK", "OK", "OK", "O ... chết tiệt đó là tài sản tôi đã tìm kiếm".


6
Tôi cũng khuyên bạn nên chống lại nó - thật lòng tôi chỉ sử dụng console.debug. Nhưng tôi đã chỉ ra khả năng lặp lại - tùy thuộc vào người dùng những gì họ muốn làm với mỗi tài sản
Ken

Tôi đã sử dụng firebird một thời gian rồi, nhưng không biết về Fireorms Lite, cảm ơn vì đã chỉ ra nó.
codefin

@nickf, tôi có thể yêu cầu bạn ghé thăm tại stackoverflow.com/questions/9192990/ không? Donnow cho dù một yêu cầu như vậy trong bình luận là chấp nhận được.
Istiaque Ahmed

Tôi nghĩ rằng một phiên bản mạnh mẽ hơn của chức năng này tồn tại tại stackoverflow.com/a/11315561/1403755 về cơ bản là một bản sao của print_r cho php
TorranceScott

108

Nếu bạn đang sử dụng firefox thì bảng điều khiển trình cắm thêm fireorms là một cách tuyệt vời để kiểm tra các đối tượng

console.debug(myObject);

Ngoài ra, bạn có thể lặp qua các thuộc tính (bao gồm các phương thức) như thế này:

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

1
Tôi thích phương pháp này vì tôi chỉ cần gõ một vài byte. Tôi sử dụng nó thường xuyên.
userBG

Điều này hoạt động khi phát triển các ứng dụng gốc phản ứng - yêu thích nó!
luk2302

59

Rất nhiều trình duyệt hiện đại hỗ trợ cú pháp sau:

JSON.stringify(myVar);

5
Nó bắn một ngoại lệ khi nhận các cấu trúc hình tròn thay vì bảo vệ chống lại chúng.
Coyote

Giống như các console.tùy chọn, điều này chỉ hiển thị nội dung của biến, nó không gắn nhãn cho biến, vì vậy nếu bạn kết xuất một loạt các biến, bạn phải gắn nhãn thủ công cho từng biến. :-(
Synetech

27

Không thể nói đủ rằng bạn có thể sử dụng console.debug (object) cho việc này. Kỹ thuật này sẽ giúp bạn tiết kiệm hàng trăm giờ mỗi năm nếu bạn làm việc này để kiếm sống: p


2
Thật ngạc nhiên. Tôi chưa bao giờ nghe nói về console.debug (đối tượng) trước ngày hôm nay và nó đã tiết kiệm cho tôi rất nhiều thời gian trên một hình thức mà tôi đã vật lộn trong ba ngày. Trong 20 phút, tôi đã sửa nó. Cảm ơn bạn!
ShiningLight 27/2/2015

Sẽ tốt hơn nếu nó thực sự hiển thị tên của biến thay vì chỉ nội dung của nó để bạn có thể thấy một loạt các biến cùng một lúc mà không phải gắn nhãn thủ công tất cả. _¬
Synetech

@Synetech thử console.debug({object}). Nếu bạn cần nhiều : console.debug({object1, object2}).
SEoF

10

Để trả lời câu hỏi từ ngữ cảnh của tiêu đề của câu hỏi này, đây là một hàm thực hiện một cái gì đó tương tự như var_dump PHP. Nó chỉ loại bỏ một biến cho mỗi cuộc gọi, nhưng nó chỉ ra kiểu dữ liệu cũng như giá trị và nó lặp lại thông qua các mảng và đối tượng [ngay cả khi chúng là Mảng của các Đối tượng và ngược lại]. Tôi chắc chắn rằng điều này có thể được cải thiện. Tôi là một chàng trai PHP hơn.

/**
 * 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;
    }
}

7

console.dir (về phía dưới cùng của trang được liên kết) trong trình duyệt lửa hoặc trình kiểm tra web google-chrome sẽ đưa ra một danh sách tương tác các thuộc tính của đối tượng.

Xem thêm câu trả lời Stack-O này


Quá tệ, nó không thực sự gắn nhãn nó; nó chỉ hiển thị giá trị của nó mà không giúp ích gì nếu bạn muốn xem một loạt các biến. : - |
Synetech

7

Bạn muốn xem toàn bộ đối tượng (tất cả các cấp độ của các đối tượng và các biến bên trong nó) ở dạng JSON. JSON là viết tắt của Ký hiệu đối tượng JavaScript và in ra một chuỗi JSON của đối tượng của bạn tương đương với var_dump(để có được biểu diễn chuỗi của một đối tượng JavaScript). May mắn thay, JSON rất dễ sử dụng trong mã và định dạng dữ liệu JSON cũng khá dễ đọc với con người.

Thí dụ:

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

6

Nếu bạn sử dụng Fireorms, bạn có thể sử dụng console.log để xuất một đối tượng và nhận một mục siêu liên kết, có thể khám phá trong bảng điều khiển.


Vấn đề với điều này là nó không gắn nhãn cho biến, vì vậy nếu bạn kết xuất một loạt các biến, bạn phải tự gắn nhãn tất cả chúng để phân biệt chúng. : - \
Synetech

4

Một chút cải tiến về chức năng của nickf dành cho những người không biết loại biến đến:

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

Tôi đã cải thiện câu trả lời của nickf, vì vậy nó lặp vòng lặp qua các đối tượng:

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
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');

Các tính năng này phải hoạt động chính xác Trên Google Chrome và Mozilla Firefox (nếu bạn đang chạy với phiên bản cũ của firefox, vì vậy bạn phải cài đặt plugin Fireorms)
Trên Internet Explorer 8 trở lên, bạn phải làm như sau:

  • Khởi chạy "Công cụ dành cho nhà phát triển, bằng cách nhấp vào nút F12
  • Trên Danh sách tab, nhấp vào "Tập lệnh" Tab "
  • Nhấp vào nút "Bảng điều khiển" ở bên phải

Để biết thêm thông tin, bạn có thể truy cập URL này: https://developer.chrome.com/devtools/docs/console-api


4

Bạn chỉ có thể sử dụng gói var_dump NPM

npm install var_dump --save-dev

Sử dụng:

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)

Điều này sẽ in:

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"
                }
            }
        }
    }
}

Liên kết: https://www.npmjs.com/package/@smartankur4u/vardump

Cảm ơn tôi sau!


3

Nếu bạn đang tìm kiếm hàm PHP được chuyển đổi trong JS, thì có trang web nhỏ này: http://phpjs.org . Ở đó bạn có thể nhận được hầu hết các hàm PHP được viết một cách đáng tin cậy trong JS. đối với var_dump, hãy thử: http://phpjs.org/fifts/var_dump/ (đảm bảo kiểm tra nhận xét hàng đầu, điều này phụ thuộc vào "echo", cũng có thể được tải xuống từ cùng một trang)


2

Tôi đã sử dụng câu trả lời đầu tiên, nhưng tôi cảm thấy thiếu một đệ quy trong đó.

Kết quả là thế này:

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

Dựa trên các chức năng trước đây được tìm thấy trong bài viết này. Thêm chế độ đệ quy và thụt đầu dòng.

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

Thí dụ

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>";

Kết quả

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

Điều này là tốt, nhưng sẽ tốt hơn nếu nó hiển thị tên của biến (như trong PHP), để bạn có thể phân biệt nhiều biến mà không cần phải gắn nhãn thủ công.
Synetech

0

Sau đây là var_dump / print_r yêu thích của tôi tương đương trong Javascript với PHPvar_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

Cuối trò chơi, nhưng đây là một chức năng thực sự tiện dụng, cực kỳ đơn giản để sử dụng, cho phép bạn truyền bao nhiêu đối số tùy thích, và sẽ hiển thị nội dung đối tượng trong cửa sổ bảng điều khiển trình duyệt như bạn gọi là bảng điều khiển. đăng nhập từ JavaScript - nhưng từ PHP

Lưu ý, bạn cũng có thể sử dụng các thẻ bằng cách chuyển 'TAG-YourTag' và nó sẽ được áp dụng cho đến khi một thẻ khác được đọc, ví dụ: '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>";
            }       
        }
    }
}

LƯU Ý: func_num_args ()func_num_args () là các hàm php để đọc số lượng đối số đầu vào động và cho phép hàm này có vô số yêu cầu console.log từ một lệnh gọi hàm

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.