Как проверять объекты Javascript

Как я могу проверить объект в окне предупреждения? Обычно при оповещении объекта просто выдается имя узла:

alert(document);

Но я хочу получить свойства и методы объекта в окне предупреждения. Как я могу реализовать эту функциональность, если это возможно? Или есть другие предложения?

В частности, я ищу решение для производственной среды, где console.log и Firebug недоступны.


person Valentina    schedule 18.03.2011    source источник
comment
сделать console.log в Firefox или Chrome   -  person KJYe.Name 葉家仁    schedule 18.03.2011
comment
Я смущен. В производственной среде у вас есть реальные пользователи, верно? Итак, почему вы хотите выдать предупреждение со свойствами объекта? Может быть, лучшим решением будет сериализовать объект и зарегистрировать его в файле или отправить по электронной почте?   -  person Nathan Long    schedule 19.03.2011
comment
Может быть, ему/ей нужно оповещение как инструмент, а фактическая функциональность нужна для чего-то другого. Могут быть всевозможные причины, по которым он/она может захотеть это сделать, например, показать статистику или возникновение ошибки, или сделать и то, и другое, просто передав объект тому, что он/она использует для проверки объекта.   -  person Christian    schedule 21.03.2011
comment
Связано с Node.js: stackoverflow .com/questions/24902061/   -  person Ciro Santilli 新疆再教育营六四事件ۍ    schedule 02.11.2014
comment
Иногда JSON.stringify полезно.   -  person BrainSlugs83    schedule 25.06.2015


Ответы (8)


Циклы for-in для каждого свойства в объекте или массиве. Вы можете использовать это свойство, чтобы получить значение, а также изменить его.

Примечание. Частные свойства недоступны для проверки, если вы не используете "шпион"; в основном, вы переопределяете объект и пишете некоторый код, который выполняет цикл for-in внутри контекста объекта.

Ибо in выглядит так:

for (var property in object) loop();

Некоторый пример кода:

function xinspect(o,i){
    if(typeof i=='undefined')i='';
    if(i.length>50)return '[MAX ITERATIONS]';
    var r=[];
    for(var p in o){
        var t=typeof o[p];
        r.push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+'  ') : o[p]+''));
    }
    return r.join(i+'\n');
}

// example of use:
alert(xinspect(document));

Редактировать: Некоторое время назад я написал свой собственный инспектор, если вам интересно, я рад поделиться им.

Редактировать 2: Ну, я все равно написал один.

person Christian    schedule 18.03.2011
comment
Должен быть как-то защищен от рекурсии. Хэши (словари) с некоторыми внутренними идентификаторами html-рендерера? Нубам может быть полезно вставить эту проверку в код. - person Nakilon; 03.04.2012
comment
@Nakilon У меня всегда были проблемы с бесконечной рекурсией, особенно в PHP. Есть два способа исправить это: использовать параметр глубины или изменить хэш и добавить собственное свойство, которое вы используете для проверки рекурсии. Глубинный, наверное, безопаснее. - person Christian; 03.04.2012
comment
Мне больше нравится эта версия строки 7. Он немного больше похож на ruby ​​и делает несколько приятных пробелов r.push(i+''+p+' =› '+(t=='object' ? '{\n'+xinspect(o[p],i+' ' )+('\n' + i + '},') : o[p]+'')); - person BC.; 13.06.2012
comment
Этот фрагмент кода полностью сломал Safari Mobile на iPhone. Я бы выбрал решение JSON.stringify ниже для более безопасной альтернативы. - person Daniel; 29.08.2012
comment
Эта штука разбила сафари, хром осматривая объект, не рекомендовал бы. - person Keno; 13.12.2016
comment
«Yucky» и в Firefox тоже. Вместо этого используйте alert(JSON.stringify(object)). - person ashleedawg; 20.05.2019

Как насчет alert(JSON.stringify(object)) с современным браузером?

В случае TypeError: Converting circular structure to JSON есть еще варианты: Как сериализовать DOM-узел в JSON даже если есть циклические ссылки?

Документация: JSON.stringify() содержит информацию о форматирование или предварительная настройка вывода.

person Torsten Becker    schedule 18.03.2011
comment
+1 Хорошее предложение. Я бы добавил, что он может использовать jsonview (jsonviewer.stack.hu), чтобы увидеть это красиво. - person Christian; 19.03.2011
comment
Если вы хотите, чтобы он также был красиво отформатирован, вы можете вызвать: alert(JSON.stringify(object, null, 4), где 4 — количество пробелов, используемых для отступа. - person Jan Molak; 05.08.2014
comment
Это дает мне «неопределенное» в качестве вывода. Я пытаюсь отлаживать тесты кармы. - person Alex C; 27.03.2015
comment
В этом подходе есть оговорки. ОП говорит, что хочет проверить методы объекта. stringify не показывает методы: JSON.stringify({f: ()=>{}}) => "{}". Кроме того, если объект реализует метод toJSON, вы получаете то, что возвращает этот метод, что бесполезно, если вы хотите проверить объект: JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'. - person Morozov; 26.09.2018

Используйте console.dir(object) и плагин Firebug

person Ranjeet    schedule 04.07.2012
comment
Это дало мне наиболее полную и полезную информацию о том, что я искал. Спасибо. - person Shon; 04.03.2014
comment
Я не знал о функции console.dir. Я не мог понять, почему я больше не могу просматривать весь объект в Firebug. Это теперь отсортировало это для меня. Спасибо! - person Andrew Newby; 01.07.2016
comment
Мне нужно знать, есть ли другие преимущества перед console.log помимо удобства отображения, пожалуйста - person user10089632; 23.08.2017

Методов немного:

 1. typeof tells you which one of the 6 javascript types is the object. 
 2. instanceof tells you if the object is an instance of another object.
 3. List properties with for(var k in obj)
 4. Object.getOwnPropertyNames( anObjectToInspect ) 
 5. Object.getPrototypeOf( anObject )
 6. anObject.hasOwnProperty(aProperty) 

В контексте консоли иногда могут быть полезны .constructor или .prototype:

console.log(anObject.constructor ); 
console.log(anObject.prototype ) ; 
person brotherol    schedule 02.11.2013

Используйте свою консоль:

console.log(object);

Или, если вы просматриваете элементы html dom, используйте console.dir(object). Пример:

let element = document.getElementById('alertBoxContainer');
console.dir(element);

Или, если у вас есть массив объектов js, которые вы могли бы использовать:

console.table(objectArr);

Если вы выводите много console.log (объектов), вы также можете написать

console.log({ objectName1 });
console.log({ objectName2 });

Это поможет вам пометить объекты, записываемые в консоль.

person Richard Torcato    schedule 22.11.2012
comment
Эти отображаемые значения изменяются динамически в режиме реального времени, что может ввести в заблуждение при отладке. - person user10089632; 23.08.2017
comment
в chrome используйте настройки консоли и нажмите «Сохранить журнал». Теперь, даже если ваш скрипт перенаправляет вас на другую страницу, ваша консоль не очищается. - person Richard Torcato; 23.08.2017
comment
Похоже, что эта проблема связана с Firefox, потому что в Chrome, если вы не используете console.log(), отображаемые значения остаются прежними. Вы можете предложить перейти на Chrome, но иногда вы проверяете доступность функций браузера. В любом случае спасибо за совет, может пригодится. - person user10089632; 23.08.2017
comment
Я не могу использовать console, потому что я использую стиль stackoverflow.com/q/7505623/1480391 и он несовместим - person Yves M.; 15.05.2018

Это вопиющее грабеж отличного ответа Кристиана. Я только что сделал его более читабельным:

/**
 * objectInspector digs through a Javascript object
 * to display all its properties
 *
 * @param object - a Javascript object to inspect
 * @param result - a string of properties with datatypes
 *
 * @return result - the concatenated description of all object properties
 */
function objectInspector(object, result) {
    if (typeof object != "object")
        return "Invalid object";
    if (typeof result == "undefined")
        result = '';

    if (result.length > 50)
        return "[RECURSION TOO DEEP. ABORTING.]";

    var rows = [];
    for (var property in object) {
        var datatype = typeof object[property];

        var tempDescription = result+'"'+property+'"';
        tempDescription += ' ('+datatype+') => ';
        if (datatype == "object")
            tempDescription += 'object: '+objectInspector(object[property],result+'  ');
        else
            tempDescription += object[property];

        rows.push(tempDescription);
    }//Close for

    return rows.join(result+"\n");
}//End objectInspector
person vaFyreHeart    schedule 11.12.2013

Вот мой инспектор объектов, который более удобочитаем. Поскольку код здесь записывается слишком долго, его можно загрузить по адресу http://etto-aa-js.googlecode.com/svn/trunk/spector.js

Используйте так:

document.write(inspect(object));
person Muhammad Eko Avianto    schedule 31.12.2014
comment
Обычно это так (и это определенно официальное руководство - не размещайте ссылки), OTOH, для чего-то с такой версией это может быть неплохо, поскольку вы знаете, что всегда будете смотреть на самый последний код, а не какая-то устаревшая вещь, которая была опубликована несколько лет назад и может больше не работать... -- Кроме того, этот огромный блок кода выглядел бы довольно ужасно, вставленный в стену текста. ТАК ОТВЕЧАЙТЕ... -- Не по теме: было бы неплохо, если бы на SO был способ иметь теги, похожие на спойлеры, для кода и иметь возможность ссылаться на внешний источник и автоматически обновлять его (когда это возможно), - person BrainSlugs83; 25.06.2015

person    schedule
comment
Как это делает console.log()? :) - person Christian; 18.03.2011
comment
используйте Firefox или Chrome. Получите Firebug для Firefox. должен иметь - person moe; 18.03.2011
comment
Это был сарказм. ОП специально запросил код JS, и если вы не предлагаете ему углубиться в firebug/fox/chrome, я не знаю, где он найдет ответ. - person Christian; 18.03.2011