javascript - 使用导入模块无法在 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

经过更多分析后，我想看看 Babel 是如何生成 ES5 代码的。

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

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

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

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

令人惊讶的是，转译后的 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);