Як перевірити об'єкти 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.