Can't see watch expression in Chrome dev tools with import module

Question

I'm using webpack and babel and try using ES2015 module.

When I use the debug tool (chrome dev tools for Chrome v65), it seems impossible to watch an expression but with the mouse over the expression, the value is shown.

# url.js
export default {
    "dac": "http://10.75.10.10:9000/api",
}

On the other side :

# index.js
import urlEnv from "./url"

I added a breakpoint in this file. Interestingly, the source map is working and the line to put a breakpoint is well respected.

This is how the screen looks like when it arrives on it :

As you can see, the mouse over the expression shows that the urlEnv.dac is found. But on the Watch panel, urlEnv is not defined. On the console, the same thing happens.

Have you a solution or workaround for that?

What is worse, is when I try to debug on Android via remote debugging. On my Android 5.0 device, even the mouse can't display the expression's value.

My webpack.config.js looks like :

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "www"),
    filename: "app.js"
  },
  devtool: "inline-source-map",

Answer 1

After a bit more analysis, I had idea to see how the ES5 code was generated by Babel.

So the original line in the sourcemap index.js file where I wanted to put a breakpoint is :

console.log("urlEnv", urlEnv.dac)

In my bundle, named app.js, the corresponding line is :

console.log("urlEnv", _url2.default.dac);

Surprinsingly, the transpiled replaces the urlEnv variable with _url2.default. I don't know if this behavior is due to Webpack or Babel, but indeed, we have this declaration :

var _url = __webpack_require__(/*! ./url */ "./src/url.js");

var _url2 = _interopRequireDefault(_url);

So if I type _url2.default.dac in the Watch expression panel or in the console of Chrome, then I see the value's variable.

So this is a limit of Chrome which can't match the name of the variable in the source map and the real name in the transpiled code.

To be complete, I notice that if we use an named import instead of a default one, like this :

# index.js
import { urlEnv } from "./url"

# url.js
export const urlEnv = {
"dac": "http://10.75.10.10:9000/api"
}

Then the way it is transpiled is :

console.log("urlEnv", _url.urlEnv.dac);