Как я могу изменить поведение по умолчанию console.log в Safari?
В Safari без дополнений, console.log покажет объект в последнем состоянии выполнения, а не в состоянии, когда console.log назывался.
Я должен клонировать объект, чтобы вывести его через console.log чтобы получить состояние объекта на этой линии.
Пример:
var test = {a: true}
console.log(test); // {a: false}
test.a = false;
console.log(test); // {a: false}
12 ответов
Я думаю, что вы ищете console.dir(),
console.log() не делает то, что вы хотите, потому что он печатает ссылку на объект, и когда вы открываете его, он меняется. console.dir печатает каталог свойств объекта во время его вызова.
Идея JSON ниже хороша; Вы можете даже проанализировать строку JSON и получить объект для просмотра, подобный тому, что даст вам.dir():
console.log(JSON.parse(JSON.stringify(obj)));
Что я обычно делаю, если я хочу видеть его состояние во время регистрации, я просто конвертирую его в строку JSON.
console.log(JSON.stringify(a));
Ваниль JS:
@ Эван ответ здесь кажется лучшим. Просто (ab) используйте JSON.parse/stringify, чтобы эффективно сделать копию объекта.
console.log(JSON.parse(JSON.stringify(test)));
JQuery конкретное решение:
Вы можете создать снимок объекта в определенный момент времени с помощью jQuery.extend
console.log($.extend({}, test));
Что на самом деле происходит здесь, так это то, что jQuery создает новый объект с test содержимое объекта, и регистрация этого (так что это не изменится).
AngularJS (1) конкретное решение:
Угловой обеспечивает copy Функция, которая может быть использована для того же эффекта: angular.copy
console.log(angular.copy(test));
Функция обертки Vanilla JS:
Вот функция, которая оборачивает console.log но сделает копию любых объектов прежде, чем выйти из них.
Я написал это в ответ на несколько похожих, но менее надежных функций в ответах. Он поддерживает несколько аргументов и не будет пытаться копировать вещи, если они не являются обычными объектами.
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))
}
пример использования: consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})
Тот > Object в консоли не только показывает текущее состояние. Это фактически задерживает чтение объекта и его свойств до тех пор, пока вы его не развернете.
Например,
var test = {a: true}
console.log(test);
setTimeout(function () {
test.a = false;
console.log(test);
}, 4000);
Затем разверните первый вызов, это будет правильно, если вы сделаете это до второго console.log возвращается
Существует возможность использовать библиотеку отладчика.
Просто включите скрипт на свою веб-страницу и поместите в журнал выписки.
<script src="debug.js"></script>
логирование
var test = {a: true}
log(test); // {a: true}
test.a = false;
log(test); // {a: false}
Используя подсказку Xeon06, вы можете проанализировать его JSON в объекте, и вот функция журнала, которую я сейчас использую для вывода своих объектов:
function odump(o){
console.log($.parseJSON(JSON.stringify(o)));
}
Возможно, вы захотите записать объект в удобочитаемом виде:
console.log(JSON.stringify(myObject, null, 2));
Это делает отступ для объекта с 2 пробелами на каждом уровне.
Я определил утилиту:
function MyLog(text) {
console.log(JSON.stringify(text));
}
и когда я хочу войти в консоль, я просто делаю:
MyLog("hello console!");
Это работает очень хорошо!
В конце 2022 года появился новый вариант: глубокое копирование объекта с новым DOM.structuredCloneметод:
console.log(structuredClone(obj))
который использует тот же алгоритм клонирования, который используется для передачи сообщений между веб-воркерами.
Это должно быть быстрее и работать с большим количеством типов объектов, чемJSON.parse(JSON.stringify(obj))техника.
Подробнее см. https://developer.mozilla.org/en-US/docs/Web/API/structuredClone .
Возможно, меня застрелили за то, что я предложил это, но это может сделать еще один шаг вперед Мы можем напрямую расширить консольный объект, чтобы сделать его более понятным.
console.logObject = function(o) {
(JSON.stringify(o));
}
Я не знаю, вызовет ли это какой-то тип столкновения библиотеки / ядерного распада / разрыва в континууме пространства-времени. Но это прекрасно работает в моих тестах qUnit.:)
Просто обновите страницу после того, как вы откроете консоль или откроете консоль, прежде чем отправить запрос на целевую страницу....
Просто напечатайте весь объект на консоли.
console.dir(object);