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

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:

Related

Inspect an Exception object like a normal object in Firefox dev tools

I'm trying to debug an issue where I have an exception being thrown and caught. When I log it to the console, Firefox displays it completely differently from a normal object:
I can force it to display like a normal object by doing JSON.parse(JSON.stringify(e)), but is there a less clunky way?
When you set a breakpoint within the catch block, you can see the exception's properties using the Scopes panel in the sidebar of the Debugger panel.
In that panel, all objects of the current stack frame are shown under the Block scope.
In addition to that, I have now also created an enhancement request asking to add a way to display an exception's properties within the console.
PS: To log errors, you can use console.error() instead of console.log().

How can the Developer Tools browser console return something other than window for "this"?

While working on JavaScript projects, I often use the console to check on objects. In the project I'm currently working with I've somehow altered the scope of the console. When I type this into the console (in Chrome Developer Tools) after everything loads I get one of the objects. Every other time I've done this (this) with other projects and sites (including StackOverflow), I've gotten back the window object.
How is it possible that the console's scope can be changed? Also helpful if you have any tips for how to debug this.
I think my problem was due to a break-point I had in the code within a component. When I was running this during the break it was returning the scope from the point of the break-point.
So it seems that the scope of the console changes along with the code execution. Somehow I never noticed this before.

Values of V8 NamedProperty object properties are not shown in debugger

We are using the V8 version 5.3.332 in my Android App. We are trying to debug the javascript using the Node-Inspector(0.11.3)(Also tried with Eclipse Chrome Dev Tools) but strangely values of certain object properties are not shown when we hover or seen it in scoped variables section. This behaviour is particularly seen for the V8 objects which has Named Property handler attached. If the V8 object is prepared with SetAccessor then values of all properties are shown properly.
We observed that, For Named Property objects, its NamedGetter is not called for its properties so all properties are being shown as undefined.
We are preparing the V8 object as below
Local funTem = FunctionTemplate::New(isolate,callback);
Local inst = funTem->InstanceTemplate();
inst->SetNamedPropertyHandler(NamedGetter,NamedSetter,NamedQueryCallback,0,NamedEnumerator);
When Debugger tries to evaluate the expression of this object, only its NamedEnumarator is called but not its NamedGetter.
Can you please let me know what could be the issue here.
For reference, this was also asked and answered on the mailing list: https://groups.google.com/forum/#!topic/v8-dev/wTYrzdx4Y3Y.

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?

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

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).

Categories