VsCode中Tsx项目console.log无法在Chrome输出的问题排查与解决

问题情况 #

两个VSCode + TSX项目，其中一个运行正常，但第二个项目中console.log("STH")完全没有输出，alert("XXX")却能正常执行。尝试卸载重装VSCode后问题仍存在，导致无法正常开发。

相关环境与配置 #

• 已安装的VSCode扩展：Gitlens、prettier ESLint、Pretty Typescript Errors、SonarLint、Tailwind CSS Intellisense
• launch.json配置：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

• craco.config.js中的关键配置片段：

plugins: [
    new TerserPlugin({
        terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
                drop_console: true,
                drop_debugger: true,
                pure_funcs: ['console.log']
            }
        }
    })
]

解决步骤 #

1. 修改craco.config.js中的TerserPlugin配置，移除compress对象下的drop_console、drop_debugger属性，同时删除pure_funcs: ['console.log']；
2. 重装redux-devtools扩展；

完成以上操作后，console.log的输出恢复正常。

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