Jak mogę sprawić, by console.log pokazywała aktualny stan obiektu?

W Safari bez dodatków (a właściwie w większości innych przeglądarek), console.logpokaże obiekt w ostatnim stanie wykonania, a nie w stanie, w którym console.logzostał wywołany.

Muszę sklonować obiekt tylko po to, aby go wyprowadzić, console.logaby uzyskać stan obiektu w tym wierszu.

Przykład:

var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}

Myślę, że szukasz console.dir().

console.log()nie robi tego, co chcesz, ponieważ drukuje odniesienie do obiektu, a gdy go otwierasz, jest zmieniane. console.dirdrukuje katalog właściwości obiektu w momencie jego wywołania.

Poniższy pomysł na JSON jest dobry; możesz nawet przeanalizować ciąg JSON i uzyskać obiekt, który można przeglądać, taki jak dir ():

console.log(JSON.parse(JSON.stringify(obj)));

To, co zwykle robię, jeśli chcę zobaczyć jego stan w momencie, gdy został zarejestrowany, to po prostu przekonwertować go na ciąg JSON.

console.log(JSON.stringify(a));

Vanilla JS:

Odpowiedź @ evan wydaje się tutaj najlepsza. Po prostu (ab) użyj JSON.parse / stringify, aby efektywnie skopiować obiekt.

console.log(JSON.parse(JSON.stringify(test)));

Rozwiązanie specyficzne dla JQuery:

Możesz utworzyć migawkę obiektu w określonym momencie za pomocą jQuery.extend

console.log($.extend({}, test));

To, co się tutaj właściwie dzieje, to to, że jQuery tworzy nowy obiekt z zawartością testobiektu i rejestruje go (więc nie zmieni się).

Specyficzne rozwiązanie AngularJS (1):

Angular udostępnia copyfunkcję, której można użyć do tego samego efektu:angular.copy

console.log(angular.copy(test));

Funkcja wrappera Vanilla JS:

Oto funkcja, która zawija, console.logale tworzy kopię dowolnych obiektów przed ich wylogowaniem.

Napisałem to w odpowiedzi na kilka podobnych, ale mniej solidnych funkcji w odpowiedziach. Obsługuje wiele argumentów i nie będzie próbować kopiować rzeczy, jeśli nie są one zwykłymi obiektami.

function consoleLogWithObjectCopy () {
  var args = [].slice.call(arguments);
  var argsWithObjectCopies = args.map(copyIfRegularObject)
  return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
  const isRegularObject = typeof o === 'object' && !(o instanceof RegExp)
  return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
  return JSON.parse(JSON.stringify(o))
}

przykład użycia :consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

To > Objectw konsoli nie tylko pokazuje aktualny stan. W rzeczywistości odkłada odczytanie obiektu i jego właściwości, dopóki go nie rozwiniesz.

Na przykład,

var test = {a: true}
console.log(test);
setTimeout(function () {
    test.a = false; 
    console.log(test);
}, 4000);

Następnie rozwiń pierwsze wywołanie, będzie poprawne, jeśli zrobisz to przed console.logpowrotem drugiego

używając wskazówki Xeon06, możesz przeanalizować jego JSON w obiekcie, a oto funkcja dziennika, której teraz używam do zrzucania moich obiektów:

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}

Zdefiniowałem narzędzie:

function MyLog(text) {
    console.log(JSON.stringify(text));
}

a kiedy chcę się zalogować do konsoli, po prostu robię:

MyLog("hello console!");

Pracuje bardzo dobrze!

Możesz zarejestrować obiekt w sposób czytelny dla człowieka:

console.log(JSON.stringify(myObject, null, 2));

Powoduje to wcięcie obiektu za pomocą 2 spacji na każdym poziomie.

Jak mogę ładnie wydrukować JSON za pomocą JavaScript?

Istnieje możliwość użycia biblioteki debuggera.

https://debugjs.net/

Po prostu umieść skrypt na swojej stronie internetowej i umieść instrukcje dziennika.

<script src="debug.js"></script>

Logowanie

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}

Mogę zostać zastrzelony za zasugerowanie tego, ale można pójść o krok dalej. Możemy bezpośrednio rozszerzyć sam obiekt konsoli, aby był bardziej przejrzysty.

console.logObject = function(o) {
  (JSON.stringify(o));
}

Nie wiem, czy to spowoduje jakiś rodzaj kolizji biblioteki / rozpadu jądrowego / rozerwania w kontinuum czasoprzestrzeni. Ale działa pięknie w moich testach qUnit. :)

Po prostu odśwież stronę po otwarciu konsoli lub otwórz konsolę przed przesłaniem żądania do strony docelowej ....

Po prostu wydrukuj cały obiekt na konsoli.

console.dir(object);