无法通过导入模块在Chrome开发工具中查看观看表达式

Question

我使用webpack和babel并尝试使用ES2015模块。

当我使用调试工具（Chrome v65的chrome dev工具）时，似乎无法观察表达式，但鼠标悬停在表达式上，则会显示该值。

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

另一方面：

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

我在这个文件中添加了一个断点。有趣的是，源地图正在运行，并且断点的线路得到了很好的尊重。

这是屏幕到达时的样子：

如您所见，鼠标悬停在表达式上，表明找到了urlEnv.dac。但是在Watch面板上，urlEnv未定义。在控制台上，同样的事情发生了。

您有解决方案或解决方法吗？

更糟糕的是，当我尝试通过远程调试在Android上进行调试时。在我的Android 5.0设备上，即使是鼠标也无法显示表达式的值。

我的webpack.config.js看起来像：

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

Answer 1

经过一番分析后，我想知道ES5是如何生成Babel代码的。

因此，我想放置断点的源映射index.js文件中的原始行是：

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

在我的名为app.js的包中，相应的行是：

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

Surprinsingly，transiled将urlEnv变量替换为_url2.default。我不知道这种行为是由于Webpack还是Babel，但事实上，我们有这个声明：

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

var _url2 = _interopRequireDefault(_url);

因此，如果我在“监视”表达式面板或Chrome控制台中键入_url2.default.dac，那么我会看到值的变量。

所以这是Chrome的限制，它与源地图中的变量名称和转换后的代码中的真实姓名不匹配。

要完成，我注意到如果我们使用命名导入而不是默认导入，如下所示：

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

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

然后它的转换方式是：

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