Jak sprawdzać obiekty JavaScript


100

Jak mogę sprawdzić obiekt w polu alertu? Zwykle alarmowanie obiektu po prostu powoduje wyświetlenie nazwy węzła:

alert(document);

Ale chcę uzyskać właściwości i metody obiektu w polu alertu. Jak mogę osiągnąć tę funkcjonalność, jeśli to możliwe? Czy są jakieś inne sugestie?

W szczególności szukam rozwiązania dla środowiska produkcyjnego, w którym nie są dostępne console.log i Firebug.


9
zrobić console.logna Firefox lub Chrome
KJYe.Name 葉家仁

1
Jestem zmieszany. W środowisku produkcyjnym masz rzeczywistych użytkowników, prawda? Dlaczego więc miałbyś chcieć zgłosić alert z właściwościami obiektu? Może lepszym rozwiązaniem jest serializacja obiektu i zalogowanie go do pliku lub wysłanie e-maila?
Nathan Long

Może potrzebuje alertu jako narzędzia, ale rzeczywistej funkcjonalności, aby zrobić coś innego. Może istnieć wiele powodów, dla których może chcieć to zrobić, na przykład pokazanie statystyk, wystąpienie błędu lub zrobienie obu, po prostu przekazując obiekt do tego, czego używa do sprawdzenia obiektu.
Christian


Czasami JSON.stringifyjest pomocny.
BrainSlugs83

Odpowiedzi:


56

for- inpętli dla każdej usługi na przedmiocie lub macierzy. Możesz użyć tej właściwości, aby uzyskać wartość, a także ją zmienić.

Uwaga: Prywatne nieruchomości nie są dostępne do wglądu, chyba że używasz „szpiega”; w zasadzie nadpisujesz obiekt i piszesz kod, który wykonuje pętlę for-in wewnątrz kontekstu obiektu.

Bo w wygląda tak:

for (var property in object) loop();

Przykładowy kod:

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

Edycja: Jakiś czas temu napisałem do własnego inspektora, jeśli jesteś zainteresowany, chętnie się podzielę.

Edycja 2: Cóż, i tak je napisałem.


Powinien być w jakiś sposób chroniony przed rekurencją. Hashe ( słowniki ) z niektórymi wewnętrznymi identyfikatorami mechanizmu renderowania HTML? Może być przydatne dla noobów do umieszczenia tego sprawdzenia w kodzie.
Nakilon

@Nakilon Zawsze miałem problem z nieskończoną rekurencją, szczególnie w PHP. Istnieją dwa sposoby, aby to naprawić: użycie parametru głębokości lub zmodyfikowanie skrótu i ​​dodanie własnej właściwości, której używasz do sprawdzania rekurencji. Głęboki jest prawdopodobnie bezpieczniejszy.
Christian

Ta wersja linii 7 podoba mi się bardziej. Wygląda trochę bardziej jak ruby ​​i robi ładne białe spacje r.push (i + '"' + p + '" =>' + (t == 'object'? '{\ N' + xinspect (o [p], i + '') + ('\ n' + i + '},'): o [p] + ''));
BC.

2
Ten fragment kodu całkowicie zrujnował Safari Mobile na iPhonie. Wybrałbym rozwiązanie JSON.stringify poniżej, aby uzyskać bezpieczniejszą alternatywę.
Daniel

1
To coś rozbił safari, chrom sprawdzający przedmiot, nie polecał.
Keno

194

A co alert(JSON.stringify(object))z nowoczesną przeglądarką?

W przypadku TypeError: Converting circular structure to JSON, oto więcej opcji: Jak serializować węzeł DOM do JSON, nawet jeśli istnieją odwołania cykliczne?

Dokumentacja: JSON.stringify()zawiera informacje na temat formatowania lub upiększania wyniku.


+1 Dobra sugestia. Dodałbym, że mógłby użyć jsonview ( jsonviewer.stack.hu ), aby ładnie to zobaczyć.
Christian

2
Jeśli chciałbyś mieć również ładnie sformatowany, możesz wywołać:, alert(JSON.stringify(object, null, 4)gdzie 4jest liczba spacji użytych do wcięcia.
Jan Molak

To daje mi wynik „niezdefiniowany”. Próbuję debugować testy karmy.
Alex C

1
Istnieją zastrzeżenia dotyczące tego podejścia. OP mówi, że chce sprawdzić metody obiektu. stringify nie pokaże sposoby: JSON.stringify({f: ()=>{}}) => "{}". Ponadto, jeśli obiekt implementuje toJSONmetody masz co to powraca metoda, która jest bezużyteczna, jeśli chcesz sprawdzić obiektu: JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'.
Morozov

39

Użyj console.dir(object)i wtyczki Firebug


4
To dało mi najbardziej kompletne i pomocne informacje o tym, czego szukam. Dzięki.
Shon,

2
Nie byłem świadomy tej console.dirfunkcji. Nie mogłem zrozumieć, dlaczego nie mogę już wyświetlić całego obiektu w Firebug. Teraz to dla mnie załatwiło. Dzięki!
Andrew Newby

Muszę wiedzieć, czy console.logoprócz wygody wyświetlania są inne zalety tego rozwiązania, proszę
user10089632

17

Jest kilka metod:

 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) 

W kontekście konsoli czasami przydatne mogą być pliki .constructor lub .prototype:

console.log(anObject.constructor ); 
console.log(anObject.prototype ) ; 

17

Użyj swojej konsoli:

console.log(object);

Lub, jeśli przeglądasz elementy html dom, użyj console.dir (obiekt). Przykład:

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

Lub jeśli masz tablicę obiektów js, możesz użyć:

console.table(objectArr);

Jeśli wypisujesz dużo danych console.log (obiektów), możesz także pisać

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

Pomoże ci to oznaczyć obiekty zapisane na konsoli.


Te wyświetlane wartości zmieniają się dynamicznie w czasie rzeczywistym, co może wprowadzać w błąd podczas debugowania
user10089632

w chrome użyj preferencji konsoli i kliknij zachowaj dziennik. Teraz, nawet jeśli twój skrypt przekierowuje cię na inną stronę, twoja konsola nie jest czyszczona.
Richard Torcato

Wygląda na to, że ten problem jest związany z Firefoksem, ponieważ w Chrome, chyba że ponownie console.log (), wyświetlane wartości są nadal. Możesz zasugerować przejście na Chrome, ale czasami testujesz dostępność funkcji przeglądarki. W każdym razie dzięki za wskazówkę, która może się przydać.
user10089632

Nie mogę użyć, consoleponieważ używam stylizacji stackoverflow.com/q/7505623/1480391 i nie jest to zgodne
Yves M.

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

Jak to robi console.log ()? :)
Christian

użyj przeglądarki Firefox lub Chrome. Pobierz Firebug dla przeglądarki Firefox. must have
moe

Byłem sarkastyczny. OP specjalnie poprosił o kod JS i jeśli nie sugerujesz, że zagłębia się w firebug / fox / chrome, nie wiem, gdzie znalazłby odpowiedź.
Christian

6

To rażące zdzierstwo doskonałej odpowiedzi Christiana. Właśnie uczyniłem to nieco bardziej czytelnym:

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

Oto mój inspektor obiektów, który jest bardziej czytelny. Ponieważ zapisanie kodu tutaj zajmuje dużo czasu, możesz go pobrać ze strony http://etto-aa-js.googlecode.com/svn/trunk/inspector.js

Użyj w ten sposób:

document.write(inspect(object));

2
Zwykle tak jest (i zdecydowanie jest to oficjalna wskazówka - nie publikuj linków), OTOH, w przypadku czegoś, co jest wersją w ten sposób, może to być miłe, ponieważ wiesz, że zawsze będziesz patrzeć na najnowszy kod, a nie jakąś przestarzałą rzecz, która została opublikowana lata temu i może już nie działać ... - Poza tym ten ogromny blok kodu wyglądałby dość okropnie wklejony do ściany tekstu, więc odpowiedź ... - Poza tematem: byłoby miło, gdyby istniał sposób na SO, aby mieć tagi podobne do "spoilera" dla kodu i móc linkować do zewnętrznego źródła i mieć automatyczną aktualizację (jeśli to możliwe),
BrainSlugs83
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.