This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is Chrome’s JavaScript console lazy about evaluating arrays?
Basically what I am finding is that google chrome is having issues with it's developer tools.
Take this snippet for example:
console.log($(this).find(' .buttons .cancel'));
$(this).find(' .buttons .cancel').remove();
When that snippet is triggered, if there are two items that match those selectors google chrome outputs [, ]. basically it is finding the elements, but it seems to be slower at displaying the data than it should be.
I want to be able to log what items I am deleting, but as it stands I must run it first without the .remove() line. and then after I know that is working I can run it again with the remove() function.
Consider the following test:
a={a:'a'}. It returns an object.
a.a='b'
expand the return from the first command. It shows a: "b"
So, an object is always shown in the state it is in when it first gets open in the Chrome developer console. For (pseudo-)arrays, what matters is the state of the object when the console gets to it. This could be right after the normal javascript returns (hard to tell why. Performance reasons, perhaps).
You can handle this by always logging elements that don't change, such as:
primitive values: console.log("hello")
clones of DOM nodes or jQuery objects: console.log($(this).find(".buttons .cancel").clone())
If logging an immutable object is not an option, you can still log while tracing the code: console.log(document); debugger;
If you pass an object to Google Chrome's console.log() that is not a primitive value like string or a number, it does not output that object's contents immediately. Probably due to some interprocess communication, there is some delay in actually getting the data from the object and outputting to the console. This will/can cause problems if you are immediately modifying the same object as you won't necessarily get the right thing displayed in the console.
One work-around is to only pass finished strings to console.log(). Since strings are immutable, they will never get changed by anything else so you won't get deceived by console.log().
In your case, you are removing the DOM elements in the next line of code. Because of Chrome's timing weirdness, this removes the DOM elements before console.log() can actually see what they are and output them. You could do something like this instead which makes the displayed string immediately and passes that string to console.log():
console.log($(this).find(' .buttons .cancel').toString());
Related
I am new to the DOM and I am console logging things so I can see what my code is doing to my website without implementing it right away.
I have read the documentation about console.log and console.dir
I am confused because I am using VS code and sometimes my console.log() behaves as a console.dir() when I am looking at the chrome console.
This is frustrating me because to check if an attribute I am creating is working as I want it to, I have to scroll down all the properties to find the one I want.
For an example, if I am logging a variable xyz that is a div with a class of test.
input --> console.log(xyz)
output --> div.test
the output has a drop down with all the possible properties of div... many of them null. If I scroll down to className it says test so I know it worked correctly
How do I get it so it shows
This would make everything I do much faster
It does this sometimes but if I refresh it reverts back to that JSON like tree
In my JavaScript, I have two elements.
I have logged the two elements and it shows the following:
Element 1:
Element 2:
The problem is:
When I console.log the children of each element (element.children) it obviously returns a list of elements.
But the weird thing is, that one element is empty (and has a length of 0), but has 3 elements (and has a length of 3) once expanded.
If you read the logs below for the children of the elements, you will understand what I am talking about...
Element 1 (this one is working as expected):
Element 2 (the problematic one):
Does anyone have any idea what is going on here? How can there be contradictory reports of the number of children?
How do I fix this? I need to loop through the children, but it won't let me because the length is apparently 0.
Thanks in advance!
All help appreciated.
When you log objects to the console, the object's current state is not snapshotted and displayed (as you might expect); instead, the console gets a live reference to the object. When you expand it in the console, you see its contents as of when you expand it, not as of when you logged it. More on that in this question and its answers.
So apparently your collections are empty when you do your logging, and then gain their elements later. You just want to make your code wait until the collections are populated. For instance, if you're doing this immediately when your script is run, consider putting the script at the end of the document, right before the closing </body> tag.
The very subtle blue (i) icon next to the object has a tooltip that's useful; if you hover it you see:
It says "Object value at left was snapshotted when logged, value below was evaluated just now."
But generally: Rather than stumbling around in the dark with a console.log torch, I suggest turning on the lights using the debugger built into your browser and/or IDE.
In my JavaScript, I have two elements.
I have logged the two elements and it shows the following:
Element 1:
Element 2:
The problem is:
When I console.log the children of each element (element.children) it obviously returns a list of elements.
But the weird thing is, that one element is empty (and has a length of 0), but has 3 elements (and has a length of 3) once expanded.
If you read the logs below for the children of the elements, you will understand what I am talking about...
Element 1 (this one is working as expected):
Element 2 (the problematic one):
Does anyone have any idea what is going on here? How can there be contradictory reports of the number of children?
How do I fix this? I need to loop through the children, but it won't let me because the length is apparently 0.
Thanks in advance!
All help appreciated.
When you log objects to the console, the object's current state is not snapshotted and displayed (as you might expect); instead, the console gets a live reference to the object. When you expand it in the console, you see its contents as of when you expand it, not as of when you logged it. More on that in this question and its answers.
So apparently your collections are empty when you do your logging, and then gain their elements later. You just want to make your code wait until the collections are populated. For instance, if you're doing this immediately when your script is run, consider putting the script at the end of the document, right before the closing </body> tag.
The very subtle blue (i) icon next to the object has a tooltip that's useful; if you hover it you see:
It says "Object value at left was snapshotted when logged, value below was evaluated just now."
But generally: Rather than stumbling around in the dark with a console.log torch, I suggest turning on the lights using the debugger built into your browser and/or IDE.
I am using document.getElementsByClassName('pattern-checkbox') to get the patterns array here.
Any suggestion why some of the elements are undefined? I can see, for example, 25-pattern-checkbox exists in the DOM.
The only thing unusual that I can think of is that these input fields are not visible, but part of a dropdown menu that is closed at the time of searching.
It turns out this is a bug in the MS Edge browser debugger console. Different result in Chrome.
In my JavaScript, I have two elements.
I have logged the two elements and it shows the following:
Element 1:
Element 2:
The problem is:
When I console.log the children of each element (element.children) it obviously returns a list of elements.
But the weird thing is, that one element is empty (and has a length of 0), but has 3 elements (and has a length of 3) once expanded.
If you read the logs below for the children of the elements, you will understand what I am talking about...
Element 1 (this one is working as expected):
Element 2 (the problematic one):
Does anyone have any idea what is going on here? How can there be contradictory reports of the number of children?
How do I fix this? I need to loop through the children, but it won't let me because the length is apparently 0.
Thanks in advance!
All help appreciated.
When you log objects to the console, the object's current state is not snapshotted and displayed (as you might expect); instead, the console gets a live reference to the object. When you expand it in the console, you see its contents as of when you expand it, not as of when you logged it. More on that in this question and its answers.
So apparently your collections are empty when you do your logging, and then gain their elements later. You just want to make your code wait until the collections are populated. For instance, if you're doing this immediately when your script is run, consider putting the script at the end of the document, right before the closing </body> tag.
The very subtle blue (i) icon next to the object has a tooltip that's useful; if you hover it you see:
It says "Object value at left was snapshotted when logged, value below was evaluated just now."
But generally: Rather than stumbling around in the dark with a console.log torch, I suggest turning on the lights using the debugger built into your browser and/or IDE.