Skip to main content
D
dwightwhe1-Visitor
1-Visitor
November 12, 2014
Question

Debugging widget in Runtime

  • November 12, 2014
  • 1 reply
  • 2430 views

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!

    1 reply

    M
    mateuszboc1-Visitor
    1-Visitor
    November 13, 2014

    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




      D
      dwightwhe1-VisitorAuthor
      1-Visitor
      November 13, 2014

      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!




        Terms & ConditionsCookie settingsAccessibility statement