Як перевірити об'єкти Javascript


100

Як я можу оглянути об’єкт у вікні попередження? Зазвичай сповіщення про об'єкт просто викидає ім'я вузла:

alert(document);

Але я хочу отримати властивості та методи об’єкта у вікні попередження. Як я можу досягти цієї функціональності, якщо це можливо? Або є якісь інші пропозиції?

Зокрема, я шукаю рішення для виробничого середовища, де console.log та Firebug недоступні.


9
робити console.logна firefox або chrome
— KJYe.Name 葉家仁

1
Я збентежений. У виробничому середовищі у вас є справжні користувачі, правда? То чому б ви хотіли надіслати попередження з властивостями об’єкта? Можливо, кращим рішенням є серіалізація об'єкта та вхід до нього у файл чи надсилання електронного листа?
— Натан Лонг

Можливо, він / він потребує сповіщення як інструмент, але власне функціонал, щоб зробити щось інше. Можливо, існують всілякі причини, чому він / він може захотіти це зробити, наприклад, показ статистики чи виникнення помилок, або ж обидва, просто передаючи об'єкт тому, що він / він використовує для огляду об’єкта.
— Крістіан


Іноді JSON.stringifyкорисно.
— BrainSlugs83

Відповіді:


56

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 Я завжди сприймав нескінченну рекурсію, особливо в PHP. Виправити це можна двома способами: за допомогою параметра глибини або зміни хеша та додайте власне властивість, яке ви використовуєте для перевірки рекурсії. Глибина одна, ймовірно, безпечніша.
— Крістіан

Мені більше подобається ця версія рядка 7. Це трохи більше схоже на рубін і робить якийсь приємний пробіл r.push (i + '"' + p + '" =>' + (t == 'об'єкт'? '{\ N' + xinspect (o [p], i + '') + ('\ n' + i + '},'): o [p] + ''));
— до н.

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

1
Ця річ розбила сафарі, а хром оглядав предмет, не рекомендував би.
— Кено

194

Як щодо alert(JSON.stringify(object))сучасного браузера?

У разі TypeError: Converting circular structure to JSON, тут є більше варіантів: Як серіалізувати вузол DOM до JSON, навіть якщо є кругові посилання?

Документація: JSON.stringify()надає інформацію про форматування або уточнення виводу.


+1 Гарна пропозиція. Я додам, що він міг би використовувати jsonview ( jsonviewer.stack.hu ), щоб добре це побачити.
— Крістіан

2
Якщо ви хочете, щоб він також був добре відформатований, ви можете зателефонувати:, alert(JSON.stringify(object, null, 4)де 4кількість пробілів, які використовуються для відступу.
— Ян Молак

Це дає мені "невизначений" як вихід. Я намагаюся налагодити тести на карму.
— Алекс C

1
Цей підхід є застереженнями. ОП каже, що вона хоче перевірити методи об'єкта. 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

в хромі використовуйте налаштування консолі та натисніть "Зберегти журнал". Тепер навіть якщо ваш скрипт перенаправить вас на іншу сторінку, ваша консоль не буде очищена.
— Річард Торкато

Здається, що ця проблема пов'язана з Firefox, оскільки в Chrome, якщо ви не повторно консоліруєте.log (), відображені значення все ще є. Ви можете запропонувати перейти на Chrome, але іноді ви тестуєте доступність функцій браузера. У будь-якому випадку дякую за пораду, яка може бути корисною.
— користувач10089632

Я не можу використовувати, 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 ()? :)
— Крістіан

використовувати Firefox або Chrome. Отримати Firebug для Firefox. a must have
— moe

Я був саркастичним. ОП спеціально попросив код JS, і якщо ви не припускаєте, що він заглиблюється в firebug / fox / chrome, я не знаю, де він знайде відповідь.
— Крістіан

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, для чогось такого, що розглядається так, це може бути приємно, оскільки ви знаєте, що ви завжди збираєтесь дивитись на останній код, а не якась затхла річ, яка була розміщена років тому і, можливо, більше не працюватиме ... - Крім того, цей величезний блок коду буде виглядати досить жахливо вкладеним у стіну тексту ТА відповіді ... - Off topic: Було б непогано, якби в SO існували способи мати "спойлер" теги для коду та мати можливість посилання на зовнішнє джерело та автоматичне оновлення (коли можливо),
— BrainSlugs83
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.