PhpStorm调试Node.js+Serverless应用代码行号异常问题

我用PhpStorm调试Jasmine测试时遇到两个异常：

• 测试文件（file.test.js）内的断点可正常暂停，但单步进入应用代码时，虽能打开正确文件，跳转的行号却与实际位置完全不符。比如在测试的await xyz()行设断点，调试器会跳转到xyz()所在文件，但定位到第15行，和实际函数声明位置相差甚远。
• 应用代码内的断点无法触发，调试器会直接跳过。

测试通过package.json中的test脚本启动：

"test": "cross-env BUILD_ENV=test UTIL_LOG=LOG_ALL nyc jasmine JASMINE_CONFIG_PATH=jasmine.json"

我怀疑问题和source maps有关，但对Node.js、Webpack、Babel等技术不够熟悉，无法确定具体原因。以下是相关配置文件：

webpack.config.js #

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const slsw = require('serverless-webpack');

module.exports = {
    entry: slsw.lib.entries,
    target: 'node',
    mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
    externals: [nodeExternals()],
    optimization: {
        minimize: false
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            retainLines: true
                        }
                    }
                ],
                include: __dirname,
                exclude: /node_modules/
            }
        ]
    },
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, '.webpack'),
        filename: '[name].js'
    },
    devtool: 'source-map'
};

.babelrc #

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "node": "18"
                }
            }
        ]
    ]
}

PhpStorm调试配置截图 #

1. 调整Webpack的devtool配置 #

当前使用的source-map生成独立的map文件，对Node.js调试兼容性一般。建议替换为inline-source-map，将source map嵌入输出文件，让调试器更易识别映射关系：

devtool: 'inline-source-map'

2. 强化Babel的source map生成 #

在.babelrc中明确添加source map配置，配合retainLines确保编译后行号映射精准：

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "node": "18"
                }
            }
        ]
    ],
    "sourceMaps": "both",
    "retainLines": true
}

3. 排除nyc的干扰 #

nyc（代码覆盖率工具）会改写代码，可能破坏source map映射。先临时移除测试脚本中的nyc，验证调试是否恢复正常：

"test": "cross-env BUILD_ENV=test UTIL_LOG=LOG_ALL jasmine JASMINE_CONFIG_PATH=jasmine.json"

若恢复正常，再给nyc添加source map支持参数：

"test": "cross-env BUILD_ENV=test UTIL_LOG=LOG_ALL nyc --require source-map-support/register jasmine JASMINE_CONFIG_PATH=jasmine.json"

4. 检查PhpStorm调试配置 #

确认以下设置：

• 勾选JavaScript Debug配置中的Use source maps选项
• Node interpreter选择的版本为18（与Babel target配置一致）
• 未在调试忽略列表中添加应用源码目录

5. 确保测试运行编译后代码 #

若测试直接执行源码，但调试器关联的是Webpack编译后的source map，会导致行号不匹配。修改测试脚本，让Jasmine加载.webpack目录下的编译产物，或者配置Webpack为测试环境单独构建带source map的代码。

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