2 Replies Latest reply on Nov 13, 2014 4:25 PM by dwightwhe RSS
    dwightwhe Explorer

    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!



      • Debugging widget in Runtime
        mateuszboc Explorer

        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:


        Mateusz,

        Thaumatec




          • Debugging widget in Runtime
            dwightwhe Explorer

            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!