在带有导入模块的 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);

令人惊讶的是，转译后的urlEnv变量替换为_url2.default. 我不知道这种行为是否是由于Webpack或Babel，但事实上，我们有这样的声明：

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

var _url2 = _interopRequireDefault(_url);

_url2.default.dac因此，如果我在 Watch 表达式面板或 Chrome 控制台中输入，我就会看到该值的变量。

所以这是 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);