ES6 imports in chrome devtools

[Andrew Clancy]

Does anyone know how to see es6 imports in chrome devtools? eg. `import {map} from 'lodash'` and in devtools we get `Uncaught ReferenceError: map is not defined` at any breakpoint. 

I've tried tweaking sourcemaps & have never been able to get this working. Exploring both Angular (2+) and React apps, similar experiences.

[Andrew Clancy]

Updated question:

Does anyone know how to see es6 imports in chrome devtools in a webpack application? eg. import {map} from 'lodash' and in devtools we get Uncaught ReferenceError: map is not defined at any breakpoint. This may not be webpack specific.

I've tried tweaking sourcemaps & have never been able to get this working. Exploring both Angular (2+) and React apps, similar experiences.

For minimal replication steps: anyone can easily replicate this with either the angular cli or create-react-app cli tools - create an empty project & start debugging - check an import. However, any javascript web application using ES6 imports should do - ie. if you have a web app, and can see imports defined, then please comment.

For example, from the create-react-app quickstart https://github.com/facebook/create-react-app, simply run:

npx create-react-app my-app

cd my-app

npm start

Open app, chrome devtools, open app.js, put a breakpoint in render and try to inspect React.

From a colleague: 

All the code is transpiled, whether it's es6 or TS, and imports as such. In dev console you can see your local scope to see variables available in each. If you do not reference a specific import in the function at break point the import will not be availble. This is due to how the closures work. Variables that are mentioned in the lexical scope (in the code) are sewn into runtime scope (actual environment when executed) when javascript is parsed.

So to answer your question, you can't just access anything from the inner scope at run-time if it's not in the function code when it's parsed.

[PhistucK]

Yeah, the closure thing probably is an unfortunate-at-debugging JavaScript engine (V8) optimization. :(

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chrome DevTools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/b7a998ca-95da-408a-aef2-e4913a3e0019%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Andrew Clancy]

Sure, however is there some workaround to make devtool de-optimise
this during debugging in some way ...? Or, is this a limitation of the
webpack build process (and is there a workaround there?)

> To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/CABc02_JGm12C%2B-9Ogzzj%2B3Aps0RkXFe7J7QcG5V-BwWozc1s8w%40mail.gmail.com.

[PhistucK]

Are you typing map in the console and get the error, or are you seeing this error under "Local scope" for map?

For the former, Webpack/something probably changed its name. For the latter, I think it might be a Developer Tools bug.

☆PhistucK

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/CA%2BbrG2CrGM6U%3D3nAwkAj57P422XOxrwP2TynFhWK225%3D2O5X3Q%40mail.gmail.com.