We Keep Coding

The values in '{}' are different with when it expand [duplicate]

Why does Chrome display two differing datasets depending on if you have the object view expanded?
In contracted view, my object has two properties:
In expanded view, my object has three properties:

The object you see in the console is a snapshot of the object at a particular point in time - the time when you logged it. When you expand the object, it will evaluate the properties again.
In the example below, I have created an object with two array properties. I logged it the console, and then I added a third property, c to it.
Only the first two properties are showing still, even though I just added a third property. After expanding the object in the console, I can see the third one. It is the latest state of the object.
If you hover over the little blue i icon, it explains what it has done:
Value below was evaluated just now.

#Gideon Pyzer is right. the properties were caculated and added after expanding the object in the console.
Just add one line code above your debug code and reopen the chrome dev tool, you will see the differences.
obj = Object.freeze(obj); //add this line before your console.log
console.log(obj);
Before:
After:
one similar question of mine:
Why can't I access the attr of the javascript object shown in chrome dev tool

You can clone your object to prevent re-evaluate.
console.log(Object.assign({}, obj));

You can get a real hard copy object by using this module. It will give you the snapshot of the object at moment when you call it.
https://www.npmjs.com/package/nest-object-deep-copy
const nestedHardCopy = require('nest-object-deep-copy');
console.log(nestedHardCopy(obj));

Javascript: view object in console

I have an object with deeply nested properties.
Here is the result of console.log(myObject) in Chrome.
But the result of console.log(myObject.schedules) is {}.
When I JSON.stringify the original object the result is {"schedules":{}}, which I find really confusing. As you see above, its logging a lot more than just that.
Any idea what the problem is?

Do console.dir(myObject) instead.
console.dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.
console.dir() | MDN

You can also use JSON.stringify(object), for more details read this.

The problem is that my object was being created via an asynch method call. So, at the point I was console.log() and JSON.stringify(), the object was not done being created.

Javascript object changing automatically?

I have the following code:
var doneFile=convertToMOSTEM(curFile.file,curFile.color,curFile.importance);
console.log('doneFile:');
console.log(doneFile);
debugger;
filesOS.add(doneFile);
debugger;
convertToMOSTEM returns a custom object. The console.log logs the custom object created by convertToMOSTEM to the console, but at the debugger statement directly after the console.log logs it as a different object. I do not wish to elaborate more about the contents of convertToMOSTEM, and am instead asking for situations where this can happen. I can say, however, that convertToMOSTEM creates a custom object with a custom constructor, and then it modifies some of the properties of that custom object, then returns the modified object. The console.log logs the correct version of the object, but the object that I get in the debugger statement is like a clean version of the custom object without the extra modifications applied by the convertToMOSTEM function. I am not sure if that is very clear, if you have any questions please ask me questions in the comments.

One possibility is that you're being misled by one bit of behavior that console.log() has that isn't obvious.
When you log an object, the console doesn't save all of the properties of that object for display later. The only real-time display is whatever the single-line printout from console.log() shows. If you click the triangle to expand an object that was displayed with console.log(), the expanded display shows the properties of that object at the time you click the triangle, not at the time of the original console.log() call.
To avoid this, log the individual properties you are interested in at the time of making the call. For example, if you have a person object with id, name, and email properties, don't do this:
console.log( person );
Do this instead:
console.log( person.id, person.name, person.email );
That way, if those three properties are string values, you will log their actual values at the time you make the console.log() call.

I want to display an object's values in chrome's console

It's something I'm missing in Chrome's console. I'm following a screencast where a javascript object is displayed in a browsable tre-like structure like this:
(arrow here) Object
When typing this for example, I'm only getting an empty array:
jQuery()

If you want to browse the elements within the jQuery object, you'll have to select something first.
$() returns an empty jQuery object.
If, on the other hand, you want to browse the methods/properties of the object created, you should use the console.dir method, which will give you a more in-depth view of your object:
console.dir(jQuery());
Here's the fiddle: http://jsfiddle.net/asYay/

The Object you are getting by typing
jQuery()
is an empty jQuery Object, which is represented by the same syntax as an empty array
[]
jQuery Objects are Array-like objects of html elements you select from the body. In your case, the selector (the first argument of the function which you would normally write into the function) is empty, so there is nothing to search for for jQuery and it returns an empty object.
If you would pass an argument with a DOM element (for example the body), it would return the body within the array
jQuery('body') //=> Array with the body html element inside
Note that HTML elements within the jQuery Object are normally not represented the same as standard objects in the Google Console. For standard objects, you will get the Object with its properties as a tree structure with an arrow before it to expand it (like the one you see in the screencast), with HTML elements, you get the DOM node, but no properties or methods to expand.
To see the difference, try this:
Display of an instance or a standard object in the Chrome console:
var object = {
hi: 'im an object',
and_i: 'am represented as a tree like structure',
i_can_haz: function() { return 'this is great, it shows all the stuff' }
};
If you type again:
object
You will get the Chrome Console Object representation.
For a HTML Object, just do this
var object = document.getElementsByTagName('body');
And if you want to access its properties and functions, use the dir method
dir(object);
You can use dir on virtually any object to access the properties
And object will be a representation of the body element. As said before, all jQuery does when selecting is putting these elements into an array, essentially.

How is $('h1') logging to the web console as an array in jQuery?

If you do console.log($('some selector')) in the browser, it returns what looks like an array (first line):
But notice that it's not an instanceof Array, but it's actually the jQuery object.
When you do console.dir($('h1')), it shows it's actually the jQuery object.
The question is, how are they making it look like it's an array in the web console? I noticed in the jQuery source here they add reference to a few Array and Object methods, and here they add toArray (and slice and others) to the jQuery object. Is the web console somehow checking for these methods and if it finds one (toArray, indexOf, slice, etc.), it prints it as an Array? I would like to get this behavior out of any custom object, such as the Ember.ArrayProxy. Currently when you log the Ember.ArrayProxy it shows > Object or whatever, but it would be nice to show it as an array.
Any ideas?

You make your object inherit Array using the prototype, like so:
function SomeType() {
this.push(16);
}
SomeType.prototype = [];
SomeType.prototype.constructor = SomeType; // Make sure there are no unexpected results
console.log(new SomeType()); // Displays in console as [16]
And, of course, all jQuery objects are instances of the jQuery function/constructor, so that's how jQuery does it. As a bonus, because of the inheritance, you get all the methods from Array, and the indexing that comes with it too!