Unable to debug React.js code in visual studio code

Question

I have express backend and react js on front end. I want to debug react code with visual studio code and im getting grayed out breakpoint with message "Breakpoint ignored because generated code not found (source map problem?)".

My bundled file and source map file is located in public folder. In chrome my project structure looks like this

I have installed debugger for chrome extension for visual studio code. My launch.json configuration is

{
    "version": "0.1.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/public",
            "trace": true
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceFolder}/index.html"
        },
    ]
}

Webpack configuration:

module.exports = {
  mode: "development",
  entry: {
    app: "./public/javascripts/app.jsx"
  },
  devtool: "source-map",
  output: {
    devtoolLineToLine: true,
    path: __dirname + "/public",
    pathinfo: true,
    sourceMapFilename: "./app.js.map",
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["react"]
          }
        }
      }
    ]
  },
  watch: true
};

And this is my project structure:

Please explain to me what am i doing wrong. Any help is well appreciated!

What files are you trying to set breakpoints on that are generating this error? — Paul McLoughlin
– Paul McLoughlin, Commented Apr 16, 2018 at 21:54
Can you try removing the /public from your webRoot? And, can you include the output of the .scripts command in your question? — Rob Lourens
– Rob Lourens, Commented Apr 17, 2018 at 0:04
@PaulMcloughlin File that i am trying to debug is app.jsx. React file. — D M
– D M, Commented Apr 17, 2018 at 21:15

Morpheus · Accepted Answer · 2020-12-17 03:02:28Z

4

try run "npm start" in terminal first.
when app started, start chrome debug

it worked for me

this is my launch.json:

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Chrome",
        "request": "launch",
        "type": "pwa-chrome",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}"
    }
]
}

answered Dec 17, 2020 at 3:02

Morpheus

3,0541 gold badge10 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

newlog Over a year ago

Running npm start made me realize that I had the frontend docker container running (in the same port) so most likely this the reason why the debugger didn't work. Stopping the container, running npm start solved it.

Patrick_B · Accepted Answer · 2018-05-05 12:42:24Z

0

Re. VSC's extension, it would be better to first update the Debugger for Chrome extension. Your launch.json config file should read versio 0.2.0. Then is your VSC up to date too? There was a bug in VSC 1.21.* who could be responsible for that. Check if it still there after updating to 1.23.

answered May 5, 2018 at 12:42

Patrick_B

12 bronze badges

Collectives™ on Stack Overflow

Unable to debug React.js code in visual studio code

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related