New issue
Advanced search Search tips
Starred by 178 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Blocking:
issue 424201
issue 424552



Sign in to add a comment

display source map variable names in Developer Tools

Reported by noliver....@gmail.com, Dec 9 2013 Back to list

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1733.1 Safari/537.36

Steps to reproduce the problem:
1. Open any script with a corresponding source map (v3) (ex: http://jquery.com/ open 'jquery.js')
2. place a breakpoint
3. when the function is hit, instead of the original variable names, the minified names are listed in the Scope Variables pane.

What is the expected behavior?
The original variable names from the source file (ex `jquery.js`) instead of the minified file (ex `jquery.min.js`) mapped by the source-map file (ex `jquery.min.map`) should be shown in the Scope Variables pane.

What went wrong?
Minified variable names are shown (ex: `a`, `c`, `e`, etc) instead of original source names.

Did this work before? No 

Chrome version: 33.0.1733.1  Channel: canary
OS Version: 6.3
Flash Version: Shockwave Flash 11.9 r900
 
chromeCanary_mappedVariableNames.PNG
82.3 KB View Download
Owner: vsevik@chromium.org
Status: Assigned
This will stay unresolved until the sourcemap spec is updated to include symbols mappings.

Comment 2 by vsevik@chromium.org, Mar 27 2014

Owner: aandrey@chromium.org
Source map spec supports names mapping, but we need to know where scope variables come from in the compiled source. We could try to get this information from V8.
Cc: u...@chromium.org yangguo@chromium.org
Will this get fixed?  It makes source maps useless when debugging complex code.
I just ran into this as well and it's a huge pain.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36

Comment 6 by difos...@gmail.com, Jul 17 2014

Any luck on getting compiled source locations like vsevik mentioned?

Perhaps you could create the necessary type of mapping before or while you are passing the code to V8?

Like Chad said, this is currently a huge pain.
I faced this problem for a quite a long time ago, but it is still not resolved. Do somebody has some additional information about the implementing stage of this? 

Comment 8 Deleted

Labels: M-41
Cc: dim...@chromium.org
Labels: -M-41 M-42 MovedFrom-41
Moving all non essential bugs to the next Milestone.
Labels: -M-42 MovedFrom-42
[AUTO] This issue has already been moved once and is lower than Priority 1,therefore removing mstone.
This issue makes source maps completely unused.
This is not just an issue when the code is minified. Babeljs, Coffeescript, Typescript, etc change the names of variables when transpiling. It would be very helpful for if this could be fixed. This issue makes the source maps essentially useless in many situations.
Facing similar issues, with browserify, cant really use sourcemaps without original variable names, this should be pushed up the priority to fix. considering when this bug was raised 2 years is a long time to get a resolution. 
Not having feature parity with Internet Explorer is just embarrassing.

Comment 17 by sc...@nextgen.net, May 22 2015

"Not having feature parity with Internet Explorer is just embarrassing."

Which version of IE are you suggesting has this feature?  IE11 certainly doesn't...it behaves exactly the same as Chrome.

1) Open F12 tools on a site that uses source maps.
2) In one of the source files (which just like Chrome shows the "original" symbols, thanks to source maps), set a breakpoint.
3) When execution stops at that point, look at the [locals] in the Watches pane...they are the minified names, just like Chrome.
Owner: kozyatinskiy@chromium.org

Comment 19 by Deleted ...@, Jun 4 2015

I'm extending my Maven plugin for web resource optimization to support source maps (use Google Closure Compiler) and facing the same issue. Are there any browsers at all that don't show minified local variable names?

Comment 20 by psy...@gmail.com, Aug 23 2015

Any updates? really useful fix, anything we can do to help?

Comment 21 by Deleted ...@, Sep 10 2015

I'm quite surprised, indeed, to discover this as a bug (not specifically with Chrome, I see: I tried IE 11 and Firefox with the same results). Is there any way to properly debug a minified script?

Comment 22 by jamie...@gmail.com, Sep 17 2015

This used to be mostly an annoyance, since debugging minified code isn't something you need to do very often. But we're trying to start using ES2015 in production dev processes, and import target names get mangled by Babel. It's hard to imagine dealing with name mangling on a regular basis during normal development. 

So is this even on the radar, or should we be considering workarounds in order to debug compiled ES2015 effectively?

Comment 23 Deleted

You CANNOT be serious!
Cc: paulir...@chromium.org
Small update: now we're blocking until new version of sourcemap specification with symbol resolution format will be shipped.
There are at least two different proposals:
1. by Nick Fitzgerald [1][2]
2. by Andy Sterland and Ron Buckton [3][4]

[1] https://github.com/fitzgen/source-map-rfc/blob/scopes-and-bindings/proposals/env.md
[2] https://groups.google.com/forum/#!topic/mozilla.dev.js-sourcemap/BT032gzqhZI
[3] https://groups.google.com/forum/#!topic/mozilla.dev.js-sourcemap/nB8f2sstwmU
[4] https://gist.github.com/asterland/edf028ed7947c8c258d1
Status: ExternalDependency
 Issue 347230  has been merged into this issue.
Blocking: chromium:424552
Blocking: chromium:424201
Labels: -Via-Wizard -OS-Windows -MovedFrom-41 -MovedFrom-42 OS-All Cr-Platform-DevTools-JavaScript
 Issue 545983  has been merged into this issue.
Owner: sergeyv@chromium.org
Status: Assigned
Project Member

Comment 33 by bugdroid1@chromium.org, Mar 9 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9

commit b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9
Author: sergeyv <sergeyv@chromium.org>
Date: Wed Mar 09 03:23:41 2016

Devtools: resolve expressions in minified scripts with sourcemaps

BUG=327092

Review URL: https://codereview.chromium.org/1770263002

Cr-Commit-Position: refs/heads/master@{#380051}

[modify] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/LayoutTests/http/tests/inspector/debugger-test.js
[add] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/LayoutTests/inspector/sources/debugger/debugger-minified-variables-evalution-expected.txt
[add] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/LayoutTests/inspector/sources/debugger/debugger-minified-variables-evalution.html
[add] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/LayoutTests/inspector/sources/debugger/resources/resolve-expressions-compressed.js
[add] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/LayoutTests/inspector/sources/debugger/resources/resolve-expressions-origin.js
[add] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/LayoutTests/inspector/sources/debugger/resources/resolve-expressions.js.map
[modify] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/Source/devtools/devtools.gypi
[rename] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/Source/devtools/front_end/es_tree/AcornTokenizer.js
[modify] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/Source/devtools/front_end/es_tree/module.json
[modify] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/Source/devtools/front_end/script_formatter_worker/JavaScriptFormatter.js
[modify] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/Source/devtools/front_end/script_formatter_worker/ScriptFormatterWorker.js
[modify] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/Source/devtools/front_end/script_formatter_worker/module.json
[modify] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/Source/devtools/front_end/sdk/SourceMap.js
[modify] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js
[modify] https://crrev.com/b3075c07b6fc33a7efdf833eb42a39a5aa75d2a9/third_party/WebKit/Source/devtools/front_end/sources/SourceMapNamesResolver.js

Owner: kozyatinskiy@chromium.org
I was very excited to see a commit land recently for this 2+ year old issue.

However, unless I misunderstand the Chrom(e|ium) release process or the intention of the committed change; I'm not yet seeing any difference.

I'm using Chrome 51.0.2679.0 (User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2679.0 Safari/537.36); which according to the change logs *should* include this latest commit (https://chromium.googlesource.com/chromium/src/+log/51.0.2679.0?pretty=fuller&n=10000)

When I set a breakpoint on a source-mapped script; the scope variables pane still shows the minified symbols (eg. "a", "e", "n", "t") instead of the original names.

Is this change behind a flag, perhaps?  Or have I totally misunderstood the nature of the most recent commit?
This change is behind a hidden experiment flag.
You can activate it in experiments tab in DevTools settings by name "Resolve variable names".
How to activate hidden experiments: http://islegend.com/development/how-to-enable-devtools-experiments-within-google-chrome/

Comment 38 Deleted

I have followed the steps mentioned in the URL above (http://islegend.com/development/how-to-enable-devtools-experiments-within-google-chrome/)

But I am unable to find "Resolve variable name" under "Experiments" in Settings though (see picture attached) 
Screen Shot 2016-03-22 at 2.32.54 PM.png
74.5 KB View Download
updated to the above:
Found that I was using wrong chrome. Chrome Canary has it. 

Cheers.

Comment 41 by jmsig...@gmail.com, Mar 24 2016

Thank you, thank you, thank you for working on this!

A few observations, which I imagine you're already aware of.

Function names are still minified in the call stack.  I can understand if this is considered a separate enhancement.

Variables are still minified in the console.  For example, if I have a variable called "myVar" that has been minified to "e", I still have to type "e" on the console to see the value and entering "myVar" on the console results in a reference error.  I can understand that translating the variable name on the console may be hard to do. Perhaps consider adding a tooltip in the variables pane that shows what the minified variable is so it can be quickly referenced form the console.

Thanks again!

Comment 42 Deleted

Comment 43 by mcf...@gmail.com, Apr 28 2016

This is looking great in Chrome 52, as someone said,
toogle for actual var names would be really helpful so that i can still type code into the console, otherwise I am sat guessing at the real names


Comment 44 by difos...@gmail.com, Apr 28 2016

Installed Canary and enabled chrome://flags/#enable-devtools-experiments

But I don't see "Resolve variable names" in the Experiments Settings (see picture attached).
Screen Shot 2016-04-28 at 17.52.55.png
32.2 KB View Download
@44 While in the experiments settings you have to press "Shift" 6 times to display the super secret experiments.  additional checkboxes with a gray background will then appear in the list.

Comment 46 by difos...@gmail.com, Apr 28 2016

Still no luck:
Screen Shot 2016-04-28 at 19.03.46.png
74.9 KB View Download
It's now enabled by default in Canary and you can't configure it anymore.
I'd like to make a quick pass at implementing variable name mapping in the Typescript sourcemap outputter, but I'm having trouble figuring out what spec for naming is actually being followed by the commit here.  There seem to be several different proposals going around, and the commit doesn't mention which was actually implemented.

Comment 49 by mhelv...@gmail.com, Aug 13 2016

I'm currently testing the experimental feature. It's working... a little bit? But there are some obvious places where the mapping is not used.

For example, see the attached screenshots, a paused debugger state where a mapping from `lyphRectangle` to `_lyphRectangle` exists.

The first screenshot indicates a couple of places where the mapping is not being used: the Watch- and Scope-lists and the value printed next to the variable in the source-code. The second screenshot shows the one place where it *is*: when hovering over the variable name in the code.
chromium-symbol-mapping-bug-1.png
30.4 KB View Download
chromium-symbol-mapping-bug-2.png
31.0 KB View Download
How is it possible to now know the minified variable name and e.g. type it into the console? At the very minimum the UI should show the actual name maybe besides the unminified name?
+1 Benjamin's suggestion. Debugging production code now involves guessing variable names.  It's not too difficult to get minified function ref names (mouse-over the function reference), but there doesn't appear to be any easy way to identify the minified variable names.

Suppose you have the following:

var baseHeaders = {...};
function getData(resource, data) {
    var headers = dataToHeaders({...baseHeaders, data});
    ...
}

In this case, I might add a breakpoint on the 'var headers' line and want to enter 'dataToHeaders({...baseHeaders, ...data})' into the console, or perhaps 'dataToHeaders({something: 'else'}). In order to accomplish this, I must mouse-over dataToheaders to find the minified name (say t), figure out the names for baseHeaders and data (I'm not sure how to do this in Chrome 56), and type t({...someVar, ...someVar2}).

It would be nice to know how to find the names for baseHeaders/data here. But it would be even nicer if I could just copy/paste dataToHeaders({...baseheaders, ...data}) into the console (or as a watch expression, or as a conditional breakpoint expression).

Perhaps I'm missing something? Thanks!
Cc: kozyatinskiy@chromium.org
 Issue 731273  has been merged into this issue.
Owner: kozy@chromium.org
Cc: kozy@chromium.org
 Issue 789117  has been merged into this issue.
 Issue 711220  has been merged into this issue.

Sign in to add a comment