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


100

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

alert(document);

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

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


9
делать console.logв firefox или chrome
KJYe.Name 葉家仁

1
Я запутался. В производственной среде у вас есть реальные пользователи, верно? Так зачем вам создавать оповещения о свойствах объекта? Может быть, лучшим решением будет сериализовать объект и зарегистрировать его в файле или отправить электронное письмо?
Натан Лонг

Возможно, ему / ей нужно предупреждение как инструмент, но фактическая функциональность нужна для чего-то еще. Могут быть всевозможные причины, по которым он / она может захотеть это сделать, например, показать статистику или возникновение ошибки, или сделать то и другое, просто передав объект тому, что он / она использует для проверки объекта.
Christian


Иногда JSON.stringifyбывает полезно.
BrainSlugs83

Ответы:


56

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

Примечание. Личные свойства недоступны для проверки, если вы не используете «шпион»; По сути, вы переопределяете объект и пишете код, который выполняет цикл for-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: Ну, я все равно написал один.


Должно быть как-то защищено от рекурсии. Хеши ( словари ) с некоторыми внутренними идентификаторами html-рендерера? Для новичков может быть полезно вставить эту проверку в код.
Nakilon

@Nakilon Я всегда возражал против бесконечной рекурсии, особенно в PHP. Есть два способа исправить это: использовать параметр глубины или изменить хэш и добавить собственное свойство, которое вы используете для проверки рекурсии. Глубинный, наверное, безопаснее.
Кристиан,

Мне больше нравится эта версия строки 7. Он немного больше похож на рубин и имеет несколько хороших пробелов r.push (i + '"' + p + '" =>' + (t == 'object'? '{\ N' + xinspect (o [p], i + '') + ('\ n' + i + '},'): o [p] + ''));
БК.

2
Этот фрагмент кода полностью разрушил Safari Mobile на iPhone. Я бы выбрал решение JSON.stringify ниже в качестве более безопасной альтернативы.
Дэниел

1
Эта штука вылетела из сафари, хром осматривая объект, не рекомендую.
Keno

194

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

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

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


+1 Хорошее предложение. Я бы добавил, что он мог бы использовать jsonview ( jsonviewer.stack.hu ), чтобы хорошо это увидеть.
Christian

2
Если вы хотите, чтобы он тоже был красиво отформатирован, вы можете позвонить:, alert(JSON.stringify(object, null, 4)где 4- количество пробелов, используемых для отступов.
Ян Молак 05

Это дает мне «undefined» в качестве вывода. Пытаюсь отладить тесты кармы.
Alex C

1
У этого подхода есть свои недостатки. OP говорит, что хочет проверить методы объекта. stringify не будет показывать методы: JSON.stringify({f: ()=>{}}) => "{}". Кроме того , если объект реализует toJSONметод , вы получите то , что , что возвращает метод, который является бесполезным , если вы хотите , чтобы проверить объект: JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'.
Морозов

39

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


4
Это дало мне самую полную и полезную информацию о том, что мне было нужно. Спасибо.
Shon

2
Я не знал об этой console.dirфункции. Я не мог понять, почему я больше не могу просматривать весь объект в Firebug. Теперь все для меня рассортировано. Спасибо!
Эндрю Ньюби

Мне нужно знать, есть ли у этого другие преимущества, console.logпомимо удобства отображения, пожалуйста
user10089632

17

Есть несколько способов:

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

17

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

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

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


Эти отображаемые значения изменяются динамически в реальном времени, что может ввести в заблуждение для целей отладки
user10089632

в Chrome используйте настройки консоли и нажмите «Сохранить журнал». Теперь, даже если ваш скрипт перенаправляет вас на другую страницу, ваша консоль не очищается.
Ричард Торкато,

Кажется, что эта проблема связана с Firefox, потому что в Chrome, если вы не повторно используете console.log (), отображаемые значения все еще остаются. Вы можете предложить перейти на Chrome, но иногда вы проверяете доступность функций браузера. В любом случае спасибо за совет, который может быть полезен.
user10089632

Я не могу использовать, consoleпотому что я использую стиль stackoverflow.com/q/7505623/1480391, и он несовместим
Ив М.

9
var str = "";
for(var k in obj)
    if (obj.hasOwnProperty(k)) //omit this test if you want to see built-in properties
        str += k + " = " + obj[k] + "\n";
alert(str);

Как это делает console.log ()? :)
Christian

используйте Firefox или Chrome. Загрузите Firebug для Firefox. Должен быть
moe

Это был сарказм. OP специально запросил JS-код, и если вы не предлагаете ему углубиться в firebug / fox / chrome, я не знаю, где он найдет ответ.
Christian

6

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

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

4

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

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

document.write(inspect(object));

2
Обычно это так (и это определенно официальное руководство - не размещайте ссылки), OTOH, для чего-то, имеющего такую ​​версию, это может быть неплохо, поскольку вы знаете, что всегда будете смотреть на последний код, а не какая-то устаревшая вещь, которая была опубликована много лет назад и может больше не работать ... - Кроме того, этот огромный блок кода выглядел бы довольно ужасно, вставленный в стену текста, ТАК ответ ... - Не по теме: было бы хорошо, если бы на SO был способ иметь теги типа «спойлер» для кода и иметь возможность ссылаться на внешний источник и иметь его автоматическое обновление (когда это возможно),
BrainSlugs83
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.