使用Webpack+Babel的ES2015模块在Chrome DevTools中无法查看监视表达式求助

针对你用Webpack+Babel构建ES2015模块项目，在Chrome v65调试时遇到的「悬停能看变量值但监视面板失效」的问题，我整理了几个针对性的排查方向和解决办法：

1. 调整Babel的模块转换配置 #

Babel的@babel/preset-env默认会把ES6模块转成CommonJS格式，这可能让DevTools在解析模块导出的变量时出现识别偏差。建议你在Babel配置里禁用自动模块转换，让Webpack直接处理ES模块，这样source map的变量映射会更准确：

修改你的.babelrc或babel.config.js：

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ]
}

2. 确认Webpack的Source Map类型 #

虽然你说source map正常，但不同类型的source map对调试变量的支持度不一样。Chrome DevTools对带完整变量信息的source map兼容性更好，开发环境建议使用eval-cheap-module-source-map或inline-source-map：

在Webpack配置中设置：

module.exports = {
  // ...其他配置项
  devtool: 'eval-cheap-module-source-map'
};

3. 调整变量的导出/导入方式 #

你当前用的是默认导出对象，有时候旧版DevTools对默认导出的变量监视会有异常。可以试试改成命名导出，或者把导入的变量转成局部变量再调试：

方案A：改用命名导出 #

修改url.js：

export const urlEnv = {
  "dac": "http://10.75.10.10:9000/api",
};

然后index.js中导入：

import { urlEnv } from "./url";

方案B：转成局部变量 #

在index.js中添加一行：

import urlEnv from "./url";
const localUrl = urlEnv; // 给localUrl添加监视表达式试试

4. 清理Chrome缓存并重置DevTools #

旧版本Chrome的缓存可能导致source map加载异常，试试这些操作：

• 按Ctrl+Shift+R（Windows）/Cmd+Shift+R（Mac）强制刷新页面
• 右键DevTools的刷新按钮，选择「Empty Cache and Hard Reload」
• 关闭DevTools再重新打开，或者重启Chrome浏览器

5. 考虑升级Chrome版本（若环境允许） #

Chrome v65是2018年的旧版本，后续版本修复了大量DevTools调试模块和source map的bug。如果你的开发环境允许升级，建议更新到最新稳定版，大概率能解决这类兼容性问题。

内容的提问来源于stack exchange，提问作者pom421