I am working on Electron/TypeScript/React/Webpack project, this is my launch.json file in VS Code Run and Debug:

{
  "version": "0.2.0",
  "configurations": [
      {
          "type": "node",
          "request": "launch",
          "name": "Electron: Main",
          "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
          "runtimeArgs": [
              "--remote-debugging-port=9223",
              "."
          ],
          "windows": {
              "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
          },
          "preLaunchTask": "npm: package"   //recompile before debugging (execute the package script defined in package.json)
      },
      {
          "name": "Electron: Renderer",
          "type": "chrome",
          "request": "attach",
          "port": 9223,
          "webRoot": "${workspaceFolder}",
          "timeout": 60000
      }
  ],
  "compounds": [
      {
          "name": "Electron: All",
          "configurations": [
              "Electron: Main",
              "Electron: Renderer"
          ]
      }
  ]
}

“Electron: Main” is for the Main Process, “Electron: Renderer” is for the Renderer Process.

Before, when I run “Electron: Main” and “Electron: Renderer”, I can debugger my project frontend in my VS code directly, I can Watch variables without no problem.

I am pretty sure I didn’t change anything in launch.json.

But now, I ain’t sure since when, after I run “Electron: Main” and “Electron: Renderer”, I can’t watch any variables when I am debugging, and I can see a bunch of variables named weirdly as in the picuture:

I cannot watch variables

Seemingly, Run and Debug is debugging in the production mode, am I right or not?

The thing is I didn’t change anything regarding the debugging, it turned into this mysteriously one day.

I’ve been trying many alternative way to modify launch.json, none of them works.

Anyone can give me a clue what’s going on?