帶有導入模塊的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。 但是在“監視”面板上，未定義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代碼。

因此，我要在其中放置斷點的sourcemap 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);

因此，如果我在“監視”表達式面板或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);