在具有导入模块的 Chrome 开发工具中看不到手表表达式

Question

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

当我使用调试工具（Chrome v65 的 Chrome 开发工具）时，似乎无法查看表达式，但将鼠标悬停在表达式上时，会显示该值。

# 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);

令人惊讶的是，transpiled 将 urlEnv 变量替换为 _url2.default。我不知道这种行为是由于Webpack 还是Babel，但确实，我们有这样的声明：

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

var _url2 = _interopRequireDefault(_url);

因此，如果我在 Watch 表达式面板或 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);