Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to evaluate variable in source map inside the Chrome Developer tools?

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?

like image 625
kyrisu Avatar asked Oct 15 '15 13:10

kyrisu


People also ask

How do I view a variable in Chrome dev tools?

You need to double click the variable name, then right click will reveal the add to watch option.

How do I view variables in Chrome?

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.

How do you check the value of a variable in inspect element?

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.

How do I view global variable in Chrome console?

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.

How do I see multiple variables in Chrome DevTools?

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.

Is This page deprecated in Chrome DevTools?

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.

How do I enable source maps in chrome?

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.

How do I indicate that a source map is available?

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.


1 Answers

Closest I can get to this is "Store as global variable" (Chrome 75):

chrome debugger

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.

like image 75
jcollum Avatar answered Sep 28 '22 17:09

jcollum