I'm debugging a GWT app using SuperDevMode in Chrome. What it gives me is the access to Java source maps in devtools.
My problem is that when I'm debugging the code I would like to evaluate some of the variables.
My question is - is it possible to evaluate a variable from the source map?
If not - is it possible to navigate from the source map to the compiled javascript code?
You need to double click the variable name, then right click will reveal the add to watch option.
To view any variable in chrome, go to "Sources", and then "Watch" and add it. If you add the "window" variable here then you can expand it and explore.
In the monitors view, the debugger always shows the value for a variable if it can be obtained. To view and inspect one or multiple variables at a time, right-click the variable or variables and select Monitor Local Variable from the pop-up menu to work with the variables in the Monitors view.
Right click a Scope Variable and select Store as Global Variable . The console will immediately output the temporary name of the now globally available variable.
Chrome DevTools allows you to easily see multiple variables throughout your application. Watching variables within Sources keeps you out of the console and focused on improving your code. The Sources panel provides the ability to watch variables within your application. This is located in the watch section of the debugger sidebar.
Warning: This page is deprecated. See following section for up-to-date information: Watch the values of custom JavaScript expressions Chrome DevTools allows you to easily see multiple variables throughout your application. Watching variables within Sources keeps you out of the console and focused on improving your code.
Note: Support for source maps is enabled by default in Firefox’s developer tools. You may need to enable support manually in Chrome. To do this, launch the Chrome dev tools and open the Settings pane (cog in the bottom right corner). In the General tab make sure that Enable JS source maps and Enable CSS source maps are both ticked.
You indicate to the browser that a source map is available by adding a special comment to the bottom of your optimised file. This comment will usually be added by the program that was used to generate the source map. The developer tools will only load this file if support for source maps is enabled and the developer tools are open.
Closest I can get to this is "Store as global variable" (Chrome 75):
It will get named something like temp1
in the console. You can then interact with it like any other variable. If there's a better way I'd love to know about it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With