Vscode: Debugging within vscode using Babel sourcemaps.

[Alanz2223]

• VSCode Version:1.5.3
• OS Version:Windows 8.1

I am trying to attach a debugger to the Jest testing environment in order to debug and test my react app. After some wrestling, I can start the Jest client via npm by running the command node --debug-brk=5858 --harmony node_modules/jest/bin/jest.js --runInBand through npm. I can also set breakpoints, but the issue is that I am using a babel transformer and instead of having my code brake at the original source, it breaks at the transpiled output which is not very intuitive.

This is my launch configuration

`{
"name" : "Attach via jest",
"type": "node",
"request": "attach",
"sourceMaps" : true,
"port": 5858,
"timeout" : 5000

}`

And within my .babelrc I have the following

{ "presets" : ["react-native"], "sourceMaps" : "inline" }

for inline source maps. Now I am not too familiar with how the inline source maps are supposed to work and even less if vscode supports them. So I would like to know if anyone could me with getting vscode to obtain the sourcemaps from babel and break at the correct points on the original source, rather than the transpiled output. Are there any other options I overlooked?

[Alanz2223]

@weinand I will also add that I added the "outDir" option to both the launch.json task and the .babelrc file, but vscode threw a "outDir" option not recognized.. Could it be that the attach option doesn't work with outDir? also I will point out that I upgraded to version 1.6

[catwarrior]

the same thing happens to me, but I didn't find a way to make it work, I don't know if it's a bug of babel or vscode.

VS Code v1.6.1
OS Windows 10 v10.0.14393
Node v6.5
babel 6.5.2

@Alanz2223 "outDir" is deprecated, "outFiles" should be used for same purpose.

I'm trying to use gulp-sourcemaps, now it could break to the line as expected, the problem is I have to set the breakpoint both in transformed version of the code, and the original source code.

I didn't try inline option yet, I will try it later.

here is my vscode launch.json

babel task as this

code structure as:
`

• build
  
  
  
  • transformed code here.
  
  
• node_modules
• src
  
  
  
  • original js code here.
  
  
• package.json
  `

[weinand]

The values of the attribute outFiles must be glob patterns.
So if your generated *.js files live anywhere in the 'build' directory, the pattern would be:

"outFiles": [ "${workspaceRoot}/build/**/*.js" ]

[weinand]

@catwarrior if you are not using remote debugging, don't specify localRoot and remoteRoot.

[catwarrior]

@weinand yes, I'm doing remote debugging.

and update the launch.json didn't help
"outFiles": [ "${workspaceRoot}/build/**/*.js" ]

I want to remote debug a nodejs app (es6 with babel transpiled) with vs code.

[catwarrior]

@weinand

I got more information when I was debugging:

two files, let say:
src/tokenValidate.js

build/tokenValidate.js

1. set breakpoint in src/tokenValidate.js, the breakpoint won't work.
2. set breakpoint in build/tokenValidate.js, this will break to coresponding line in src/tokenValidate.js.

which means I have to set breakpoint in transpiled file and doing debug in the original source file.

hope it helps.
best regards

---

seems something wrong with the sourcemap.
since I can only set breakpoint in build/tokenValidate.js.

I expect it breaks at where I set breakpoint, but it doesn't work.

[fkarlsson]

Has anyone succeeded with this yet? I have the same problem.

[mherodev]

I recently got local-dev and test-based debugging in VS Code working today with an app based on react-slingshot (https://github.com/coryhouse/react-slingshot)

I figured I'd share my .babelrc, jest.json and launch.json in hopes that it'd help anyone else trying to get the same thing done (below).

The key change I found around avoiding seeing transpiled code for us was related to jest code coverage. If we removed the code coverage configuration, we no longer saw transpiled output (with a lot of references to istanbul). The key to resolving this was adding the line: "testRegex": "src/.*\\.test\\.js$"

Feel free to lift from my configuration below.

.babelrc

{
  "presets": [
    "es2015",
    "latest",
    "react",
    "stage-0"
  ],
  "sourceMaps": "inline",
  "retainLines": true,
  "env": {
    "development": {
      "presets": [
        "react-hmre"
      ]
    },
    "production": {
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-remove-prop-types"
      ]
    },
    "test": {
      "plugins": []
    }
  }
}

jest.json

{
  "collectCoverageFrom": [
    "src/**/*.{js,jsx}"
  ],
  "coverageDirectory": "<rootDir>/coverage",
  "coverageReporters": [
    "html",
    "text-summary"
  ],
  "moduleNameMapper": {
    "\\.(css|scss)$": "identity-obj-proxy",
    "^.+\\.(gif|ttf|eot|svg|woff|woff2|ico)$": "<rootDir>/tools/fileMock.js"
  },
  "modulePaths": [
    "<rootDir>/src/"
  ],
  "testRegex": "src/.*\\.test\\.js$"
}

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Active Terminal",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "userDataDir": "${workspaceRoot}/.vscode/chrome",
      "webRoot": "${workspaceRoot}",
      "sourceMapPathOverrides": { "webpack:///*": "${webRoot}/*" }
    },
    {
      "name": "Debug Tests",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "stopOnEntry": false,
      "args": [
        "--config", "tools/config/jest.json"
      ],
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
      "runtimeArgs": [
          "--nolazy"
      ],
      "sourceMaps": true,
      "console": "internalConsole",
      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
}

[oshalygin]

@mherodev Thanks for that config!! Super helpful, also very happy to hear that you're using react-slingshot 💃

[silvenon]

This is the part I was missing:

"sourceMapPathOverrides": { "webpack:///*": "${webRoot}/*" }

Thanks @mherodev!