Chrome Javascript Console - Reference to object output with console.log(obj)? - javascript

Is there a way to get a javascript reference to an object that was output to the chrome console?
For example, say I had the following javascript:
top.it = {hi:'there'};
console.log(top.it);
This would output to the chrome console as
Object {hi: "there"}
I do this alot, and sometimes would like to get a reference to the object in the console, to run methods on it, and things like that.
Is there a way to get a reference to objects that have been output using console.log?
I know there's a way to get references to recently inspected items (e.g. $0), but this isn't for inspected items...

Right click on the console log output provides the option "Store as Global Variable".
Here is a video of it(not created by me).

Related

Why `queryObjects()` in chrome console returns undefined but then results are printed out? [duplicate]

Chrome DevTools has a console feature called queryObjects that lets you find all the objects with a particular constructor; e.g.
queryObjects(Promise)
However, it seems to only display the objects, not return them. This means that I can't write, say,
queryObjects(MyCustomType)[4].getName()
Is there a way to do this?
I am using Chrome 67.0.3396.87
Once you've run the queryObjects(MyCustomType) command you can right-click on the resulting Array(XX) in the console and select "Store As Global Variable". It'd be better if you could just do let myThings = queryObjects(MyCustomType);.

Get vue object inside object into console

I have a object in my Vue called 'file'.
When I use console.log to look at its contents its as below in the picture
console.log(file);
But now I want to see the contents of exif so I tried
console.log(file.exif)
The problem is that its always 'undefined'. What am I doing wrong? Please help.
The first thing I notice is that exif doesn't have the ... that all the other properties have. This suggests that it doesn't have a property getter. As reactive properties all have getters it would suggest that this property was added later than the others without using Vue.set.
With that in mind it is worth noting that objects logged to the console are live. If you hover over the little blue i icon you'll get some indication of this. The console does not take a copy of the properties when you log an object. It will only grab the property values when you expand the object in the console.
So what I believe is happening is that the property exif does not exist at the point you are logging out the object but it is subsequently added before you click on the object in the console.
There are other things you can try logging to double check. e.g. console.log(JSON.stringify(file)) or console.log(Object.keys(file)). These should all confirm that the exif property does not exist at that point.

How to see kendo.js methods in the console / while debugging?

I'm using .kendoTabStrip and it have some methods like .reload. I'm looking at this doc and what I'm doing is:
let tabStrip = $(".k-tabstrip").data("kendoTabStrip");
debugger
console.log(tabStrip)
tabStrip.reload("li.k-state-active")
$(".k-tabstrip").data("kendoTabStrip"); is equivalent to creating a tabStrip like in the doc, I'm just accessing it in a different way.
The strange part is that when I do the console.log or I inspect tabStrip while debugging, I can't see the methods like .reload like in the pictures below.
Debug
Console
But when I access the method, it's there, .reload exits even though I can't see it in other ways.
Accessing the variable
Why this is happening here and how can I see the .reload methods (or all the others) while debugging?
That happens because that reference is in fact the Kendo's Widget object from which TabStrip inherits(as seen here). To see the TabStrip's methods you have to expand the __proto__ property:

Javascript access functions of constructor

I have an object called twillioObject.
When I do a console.log of twillioObject, I get this output in developer tools:
I want an object of the Connection and Device classes. It seems that I can't reach it.
I have experience in JavaScript but I haven't seen this situation before. How does this work?

Make IE 8's javascript console give more info than "{...}" for objects

I'm trying to debug an issue that only seems to occur in IE 7 and 8, and the debugger's console is being utterly useless.
Any time I type in an expression that results in an object it just prints "{...}" to the console. I need to inspect the returned object, but it gives me no easy way to do so.
Is there any way to get this to behave more like Chrome's debug tools or Firebug, both which let me actually inspect the object?
You can always add a "watch expression" - in this way, it also displays the {...}, but it is expandable and you can see the internals of the object.
get the new and much improved firebug lite for IE.

Categories