Нам нужно увидеть, какие методы / поля имеют объекты в Javascript.
Как говорили другие, вы можете использовать Firebug, и это избавит вас от беспокойства в Firefox. Chrome и Safari имеют встроенную консоль разработчика, которая имеет почти идентичный интерфейс с консолью Firebug, поэтому ваш код должен быть переносимым в этих браузерах. Для других браузеров есть Firebug Lite .
Если Firebug не подходит для вас, попробуйте этот простой скрипт:
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) }
Я бы рекомендовал не предупреждать каждое отдельное свойство: некоторые объекты имеют много свойств, и вы будете там весь день, нажав «ОК», «ОК», «ОК», «О … черт возьми, это была собственность, которую я был находясь в поиске".
Если вы используете firefox, то консоль плагинов firebug – отличный способ изучения объектов
console.debug(myObject);
Кроме того, вы можете прокручивать свойства (включая методы) следующим образом:
for (property in object) { // do what you want with property, object[property].value }
Многие современные браузеры поддерживают следующий синтаксис:
JSON.stringify(myVar);
Нельзя сказать, что для этого вы можете использовать console.debug (object). Этот метод спасет вас буквально сотни часов в год, если вы сделаете это для жизни: p
Чтобы ответить на вопрос из контекста названия этого вопроса, вот функция, которая делает что-то похожее на PHP var_dump. Он удаляет только одну переменную за вызов, но указывает тип данных, а также значение, и он выполняет итерацию через массив и объекты [даже если они представляют собой массивы объектов и наоборот). Я уверен, что это можно улучшить. Я больше парень из PHP.
/** * 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 [ie 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 [ie 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; } }
console.dir (в нижней части связанной страницы) в firebug, или веб-инспектор google-chrome выведет интерактивный список свойств объекта.
См. Также этот ответ Stack-O
Если вы используете Firebug, вы можете использовать console.log для вывода объекта и получения гиперссылки, исследуемого элемента в консоли.
Немного улучшения функции nickf для тех, кто не знает тип входящей переменной:
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; } }
Я улучшил ответ nickf, поэтому он рекурсивно перебирает объекты:
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; }
Если вы ищете функцию PHP, преобразованную в JS, есть этот маленький сайт: http://phpjs.org . Там вы можете получить большую часть функции PHP, надежно написанной в JS. для var_dump try: http://phpjs.org/functions/var_dump/ (обязательно проверьте верхний комментарий, это зависит от «эха», который также можно загрузить с того же сайта)
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');
Они должны корректно работать. В Google Chrome и Mozilla Firefox (если вы используете старую версию firefox, поэтому вам нужно установить плагин Firebug)
В Internet Explorer 8 или выше вы должны сделать следующее:
Для получения дополнительной информации вы можете посетить этот URL-адрес: https://developer.chrome.com/devtools/docs/console-api
Вы хотите видеть весь объект (все вложенные уровни объектов и переменных внутри него) в форме JSON. JSON означает JavaScript Object Notation и печать строки JSON вашего объекта – хороший эквивалент var_dump (для получения строкового представления объекта JavaScript). К счастью, JSON очень прост в использовании в коде, а формат данных JSON также довольно удобочитаем.
Пример:
var objectInStringFormat = JSON.stringify(someObject); alert(objectInStringFormat);
Я использовал первый ответ, но мне показалось, что в нем нет рекурсии.
В результате получилось:
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); }
Основываясь на предыдущих функциях, найденных в этом сообщении. Добавлен рекурсивный режим и отступы.
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; }
пример
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>";
результат
b: 1 (number) c: d: 3 (number) e: 2 (number) c: d: 3 (number) e: 2 (number)
Следующий мой любимый эквивалент var_dump / print_r в Javascript для PHP 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; }