In Safari with no add-ons, console.log
will show the object at the last state of execution, not at the state when console.log
was called.
在没有附加组件的Safari中,控制台。日志将显示在最后执行状态的对象,而不是在控制台的状态。日志被称为。
I have to clone the object just to output it via console.log
to get the state of the object at that line.
我必须克隆这个对象,以便通过控制台输出它。log以获取该行的对象的状态。
Example:
例子:
var test = {a: true}
console.log(test); // {a: false}
test.a = false;
console.log(test); // {a: false}
11 个解决方案
#1
166
I think you're looking for console.dir()
.
我想你在找console.dir()。
console.log()
doesn't do what you want because it prints a reference to the object, and by the time you pop it open, it's changed. console.dir
prints a directory of the properties in the object at the time you call it.
log()不会做您想做的事情,因为它会打印对象的引用,当您打开它时,它就会改变。控制台。dir在调用对象时打印对象中属性的目录。
The JSON idea below is a good one; you could even go on to parse the JSON string and get a browsable object like what .dir() would give you:
下面的JSON思想很好;您甚至可以继续解析JSON字符串并获得一个可浏览的对象,就像.dir()将提供给您的内容一样:
console.log(JSON.parse(JSON.stringify(obj)));
console.log(JSON.parse(JSON.stringify(obj)));
#2
70
What I usually do if I want to see it's state at the time it was logged is I just convert it to a JSON string.
如果我想查看日志记录时的状态,我通常会把它转换成JSON字符串。
console.log(JSON.stringify(a));
#3
24
Vanilla JS:
@evan's answer seems best here. Just (ab)use JSON.parse/stringify to effectively make a copy of the object.
@evan的回答在这里是最好的。(ab)使用JSON。解析/stringify可以有效地复制对象。
console.log(JSON.parse(JSON.stringify(test)));
JQuery specific solution:
You can create a snapshot of an object at a certain point in time with jQuery.extend
您可以使用jQuery.extend在特定的时间点创建对象的快照。
console.log($.extend({}, test));
What is actually happening here is jQuery is creating a new object with the test
object's content, and logging that (so it will not change).
这里实际发生的情况是,jQuery正在用测试对象的内容创建一个新的对象,并记录该对象(因此它不会改变)。
AngularJS (1) specific solution:
Angular provides a copy
function that can be used to the same effect: angular.copy
角提供了一个复制函数,可以用于相同的效果:角。复制
console.log(angular.copy(test));
Vanilla JS wrapper function:
Here is an function which wraps console.log
but will make a copy of any objects before logging them out.
这是一个封装控制台的函数。但在日志中记录所有对象,并在日志中记录它们。
I wrote this in response to a few similar but less robust functions in the answers. It supports multiple arguments, and will not try to copy things if they are not regular objects.
我写这篇文章是为了回应一些相似但不那么健壮的函数。它支持多个参数,如果不是常规对象,则不会尝试复制。
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))
}
example usage: consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})
示例用法:comfort elogwithobjectcopy ('obj', {foo: 'bar'}, 1, /abc/, {a: 1})
#4
6
That > Object
in the console, isn't only showing the current state. It actually is deferring reading the object and it's properties until you expand it.
控制台中的>对象不仅显示当前状态。它会延迟读取对象的属性直到你展开它。
For example,
例如,
var test = {a: true}
console.log(test);
setTimeout(function () {
test.a = false;
console.log(test);
}, 4000);
Then expand the first call, it will be correct, if you do it before the second console.log
returns
然后展开第一个调用,如果您在第二个控制台之前执行,它将是正确的。日志返回
#5
2
using Xeon06's hint, you may parse his JSON in an object, and here is the log function I now use to dump my objects :
使用Xeon06的提示,您可以在一个对象中解析他的JSON,下面是我现在用来转储对象的日志函数:
function odump(o){
console.log($.parseJSON(JSON.stringify(o)));
}
#6
1
I defined an utility:
我定义了一个实用程序:
function MyLog(text) {
console.log(JSON.stringify(text));
}
and when I want to log on console I simply do:
当我想登录控制台时,我只需要:
MyLog("hello console!");
It works very well!
它工作得很好!
#7
1
You might want to log the object in a human readable way:
您可能希望以人类可读的方式记录对象:
console.log(JSON.stringify(myObject, null, 2));
This indents the object with 2 spaces at each level.
这将在每个层次上为对象缩进2个空格。
How can I pretty-print JSON using JavaScript?
如何使用JavaScript漂亮地打印JSON ?
#8
1
There is an option to use a debugger library.
有一个选项可以使用调试器库。
https://debugjs.net/
Just include the script into your web page and put log statements.
只需将脚本包含到web页面中,并放置日志语句。
<script src="debug.js"></script>
Logging
日志记录
var test = {a: true}
log(test); // {a: true}
test.a = false;
log(test); // {a: false}
#9
0
I may be shot for suggesting this, but this can be taken one step further. We can directly extend the console object itself to make it more clear.
我可能会因为提出这个建议而被枪毙,但这可以更进一步。我们可以直接扩展控制台对象本身,使其更清晰。
console.logObject = function(o) {
(JSON.stringify(o));
}
I don't know if this will cause some type of library collision/nuclear meltdown/rip in the spacetime continuum. But it works beautifully in my qUnit tests. :)
我不知道这是否会在时空连续体中造成某种类型的库碰撞/核泄漏/撕裂。但它在我的qUnit测试中效果很好。:)
#10
0
Simply refresh the page after you open the console or open the console before you submit the request to the targeted page....
只要刷新页面后打开控制台或打开控制台之前提交请求到目标页面....
#11
-1
Just print whole object on console.
只需在控制台打印整个对象。
console.dir(object);
#1
166
I think you're looking for console.dir()
.
我想你在找console.dir()。
console.log()
doesn't do what you want because it prints a reference to the object, and by the time you pop it open, it's changed. console.dir
prints a directory of the properties in the object at the time you call it.
log()不会做您想做的事情,因为它会打印对象的引用,当您打开它时,它就会改变。控制台。dir在调用对象时打印对象中属性的目录。
The JSON idea below is a good one; you could even go on to parse the JSON string and get a browsable object like what .dir() would give you:
下面的JSON思想很好;您甚至可以继续解析JSON字符串并获得一个可浏览的对象,就像.dir()将提供给您的内容一样:
console.log(JSON.parse(JSON.stringify(obj)));
console.log(JSON.parse(JSON.stringify(obj)));
#2
70
What I usually do if I want to see it's state at the time it was logged is I just convert it to a JSON string.
如果我想查看日志记录时的状态,我通常会把它转换成JSON字符串。
console.log(JSON.stringify(a));
#3
24
Vanilla JS:
@evan's answer seems best here. Just (ab)use JSON.parse/stringify to effectively make a copy of the object.
@evan的回答在这里是最好的。(ab)使用JSON。解析/stringify可以有效地复制对象。
console.log(JSON.parse(JSON.stringify(test)));
JQuery specific solution:
You can create a snapshot of an object at a certain point in time with jQuery.extend
您可以使用jQuery.extend在特定的时间点创建对象的快照。
console.log($.extend({}, test));
What is actually happening here is jQuery is creating a new object with the test
object's content, and logging that (so it will not change).
这里实际发生的情况是,jQuery正在用测试对象的内容创建一个新的对象,并记录该对象(因此它不会改变)。
AngularJS (1) specific solution:
Angular provides a copy
function that can be used to the same effect: angular.copy
角提供了一个复制函数,可以用于相同的效果:角。复制
console.log(angular.copy(test));
Vanilla JS wrapper function:
Here is an function which wraps console.log
but will make a copy of any objects before logging them out.
这是一个封装控制台的函数。但在日志中记录所有对象,并在日志中记录它们。
I wrote this in response to a few similar but less robust functions in the answers. It supports multiple arguments, and will not try to copy things if they are not regular objects.
我写这篇文章是为了回应一些相似但不那么健壮的函数。它支持多个参数,如果不是常规对象,则不会尝试复制。
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))
}
example usage: consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})
示例用法:comfort elogwithobjectcopy ('obj', {foo: 'bar'}, 1, /abc/, {a: 1})
#4
6
That > Object
in the console, isn't only showing the current state. It actually is deferring reading the object and it's properties until you expand it.
控制台中的>对象不仅显示当前状态。它会延迟读取对象的属性直到你展开它。
For example,
例如,
var test = {a: true}
console.log(test);
setTimeout(function () {
test.a = false;
console.log(test);
}, 4000);
Then expand the first call, it will be correct, if you do it before the second console.log
returns
然后展开第一个调用,如果您在第二个控制台之前执行,它将是正确的。日志返回
#5
2
using Xeon06's hint, you may parse his JSON in an object, and here is the log function I now use to dump my objects :
使用Xeon06的提示,您可以在一个对象中解析他的JSON,下面是我现在用来转储对象的日志函数:
function odump(o){
console.log($.parseJSON(JSON.stringify(o)));
}
#6
1
I defined an utility:
我定义了一个实用程序:
function MyLog(text) {
console.log(JSON.stringify(text));
}
and when I want to log on console I simply do:
当我想登录控制台时,我只需要:
MyLog("hello console!");
It works very well!
它工作得很好!
#7
1
You might want to log the object in a human readable way:
您可能希望以人类可读的方式记录对象:
console.log(JSON.stringify(myObject, null, 2));
This indents the object with 2 spaces at each level.
这将在每个层次上为对象缩进2个空格。
How can I pretty-print JSON using JavaScript?
如何使用JavaScript漂亮地打印JSON ?
#8
1
There is an option to use a debugger library.
有一个选项可以使用调试器库。
https://debugjs.net/
Just include the script into your web page and put log statements.
只需将脚本包含到web页面中,并放置日志语句。
<script src="debug.js"></script>
Logging
日志记录
var test = {a: true}
log(test); // {a: true}
test.a = false;
log(test); // {a: false}
#9
0
I may be shot for suggesting this, but this can be taken one step further. We can directly extend the console object itself to make it more clear.
我可能会因为提出这个建议而被枪毙,但这可以更进一步。我们可以直接扩展控制台对象本身,使其更清晰。
console.logObject = function(o) {
(JSON.stringify(o));
}
I don't know if this will cause some type of library collision/nuclear meltdown/rip in the spacetime continuum. But it works beautifully in my qUnit tests. :)
我不知道这是否会在时空连续体中造成某种类型的库碰撞/核泄漏/撕裂。但它在我的qUnit测试中效果很好。:)
#10
0
Simply refresh the page after you open the console or open the console before you submit the request to the targeted page....
只要刷新页面后打开控制台或打开控制台之前提交请求到目标页面....
#11
-1
Just print whole object on console.
只需在控制台打印整个对象。
console.dir(object);