如何在Safari中更改console.log的默认行为?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在Safari中更改console.log的默认行为?相关的知识,希望对你有一定的参考价值。

在没有附加组件的Safari中,console.log将在最后执行状态下显示对象,而不是在调用console.log时的状态。

我必须克隆对象只是为了通过console.log输出它来获得该行的对象状态。

例:

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

我想你正在寻找console.dir()

console.log()没有做你想要的,因为它打印了对象的引用,当你打开它时,它就被改变了。 console.dir在您调用它时打印对象中属性的目录。

下面的JSON想法很好;你甚至可以继续解析JSON字符串并获得一个可浏览的对象,就像.dir()会给你的:

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

另一答案

只需在打开控制台后刷新页面或打开控制台,然后再将请求提交到目标页面....

另一答案

只需在控制台上打印整个对象。

console.dir(object);
另一答案

如果我想在记录时看到它的状态,我通常会做的就是将其转换为JSON字符串。

console.log(JSON.stringify(a));
另一答案

Vanilla JS:

@evan's answer在这里看起来最好。只需(ab)使用JSON.parse / stringify有效地制作对象的副本。

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

JQuery specific solution:

您可以使用jQuery.extend在特定时间点创建对象的快照

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

这里实际发生的是jQuery正在使用test对象的内容创建一个新对象,并记录它(因此它不会改变)。

AngularJS (1) specific solution:

Angular提供了copy函数,可以用于相同的效果:angular.copy

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

Vanilla JS wrapper function:

这是一个包装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返回之前执行它,那将是正确的

另一答案

使用Xeon06的提示,你可以在一个对象中解析他的JSON,这里是我现在用来转储对象的日志函数:

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}
另一答案

我定义了一个工具:

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

当我想登录控制台时,我只需:

MyLog("hello console!");

它运作得很好!

另一答案

您可能希望以人类可读的方式记录对象:

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

这会使对象在每个级别缩进2个空格。

How can I pretty-print JSON using JavaScript?

另一答案

可以选择使用调试器库。

https://debugjs.net/

只需将脚本包含在您的网页中并放入日志语句即可。

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

记录

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}
另一答案

我可能会因为暗示这一点而被枪杀,但这可以更进一步。我们可以直接扩展控制台对象本身,使其更加清晰。

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

我不知道这是否会在时空连续体中引起某种类型的库冲突/核熔毁/裂口。但它在我的qUnit测试中运行得很漂亮。 :)

以上是关于如何在Safari中更改console.log的默认行为?的主要内容,如果未能解决你的问题,请参考以下文章

在 svelte 中,如何在变量更改时使用 `console.log('yes')`?

如何让 console.log 显示对象的当前状态?

如何在 Swift 中将 javascript console.log 到 println() 到 Xcode 调试器?

Console.log 打印后基于用户输入的更改

webpack打包取消所有的console.log语句

即使调用了渲染函数中的 console.log,组件也不会在状态更改时重新渲染