cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X

Debugging widget in Runtime

dwightwhe
1-Newbie

Debugging widget in Runtime

Hi,

I'm trying to debug the display of the googlemaps widget inside a mashup in the browser Runtime and would like to view widget instance variables in the Chrome developer tools.

Where do I find the googlemaps widget instance object, i.e. the one with the thisWidget.maps and renderHtml() functions etc?

I run the latest Chrome (on Mac) and have the developer console. I can see the TW.Runtime object, I can see the TW.Runtime.Workspace.Mashups.Current.Data with service data loaded. The one thing I cannot find is the widget instance so that I can look at the google.maps.Map instance object.

This question is probably generic to any kind of widget. Where in the browser are the widget instances stored?

Thanks!

2 REPLIES 2

Hi,

When you open .runtime.js file of any widget - build in or imported the first one you see is ex.: </div><div><div>TW.Runtime.Widgets.gauge = function () {</div></div><div><br></div><div>So there you go! under Chrome dev console you can type TW.Runtime.Widgets.gauge and the gauge function will be returned. However this is not very useful as all variables will be not reachable from this point. </div><div><br></div><div>What I think you want to do is debug. Then go into Sources in your Chrome DEV view And find file CombinedExtensions. There is code for all extensions. From this point you can set breakpoints and inspect values of variables.


Take a look at this screenshot:

https://www.dropbox.com/s/alosarqfe1slmsf/howToDebugWidgets.png?dl=0


Mateusz,

Thaumatec




Mateusz,

thanks a lot. Stepping through the debugger was the key. The pointer to nested widgets underneath:

 TW.Runtime.RootMashup.rootWidget

is a local var, not accessible by the Chrome debugger.


I can set a breakpoint right after the this.map = google.maps.Map() call, go to the console, assign it a global variable, e.g. TW.gmap = this.map, resume the debugger and then work from there.


Much appreciated!




Top Tags