如何交互式调试需托管运行的编译后JavaScript/React项目？

一、VSCode配置Chrome远程调试 #

• 保持现有流程不变：启动本地Web服务器和Webpack dev-watch增量编译
• 在VSCode中创建或修改.vscode/launch.json配置文件：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "url": "http://localhost:你的服务器端口", // 替换为本地服务器实际地址
      "webRoot": "${workspaceFolder}/src", // 替换为项目源码根目录
      "sourceMaps": true,
      "skipFiles": [
        "<node_internals>/**",
        "${workspaceFolder}/node_modules/**",
        "你的服务器静态资源目录/**" // 排除打包后的产物文件
      ]
    }
  ]
}

二、配置Webpack生成Source Map（关联源码必备） #

在Webpack开发环境配置文件（如webpack.dev.js）中添加Source Map配置，确保调试时能关联到原始源码：

module.exports = {
  // 现有配置...
  devtool: 'eval-cheap-module-source-map', // 开发环境推荐，兼顾编译速度和源码映射精度
  // 确保dev-watch模式下产物复制到服务器目录时，.map文件也同步复制
}

三、启用React热模块替换（HMR）解决状态丢失问题 #

无需刷新页面，修改代码后自动更新模块并保留应用状态：

1. 安装依赖：

npm install react-refresh @pmmmwh/react-refresh-webpack-plugin --save-dev

2. 修改Webpack配置：

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  // 现有配置...
  plugins: [
    // 其他已有的插件...
    new ReactRefreshWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              // 你的现有Babel配置（如@babel/preset-react、@babel/preset-env）
              plugins: [require.resolve('react-refresh/babel')],
            },
          },
        ],
      },
    ],
  },
};

3. 在项目入口文件（如index.jsx）中添加HMR触发逻辑：

if (process.env.NODE_ENV === 'development') {
  if (module.hot) {
    module.hot.accept();
  }
}

四、调试操作流程 #

1. 启动本地Web服务器和Webpack dev-watch
2. 在Chrome中打开目标页面，确保页面加载了最新的打包产物
3. 在VSCode源码文件中点击行号设置断点
4. 打开VSCode调试面板，选择Attach to Chrome配置，点击启动按钮
5. 触发页面操作命中断点后，即可在VSCode中查看变量、调用栈，执行交互式调试；修改代码后，HMR会自动更新页面模块，无需刷新，状态完全保留

五、其他IDE替代方案 #

• WebStorm：自带Chrome调试集成，直接在右上角调试配置中选择Chrome，填入本地服务器URL，启动调试后自动关联源码，配合上述HMR配置即可实现无刷新状态保留调试。

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