CODEWITHSUNDEEP
reactjsdebuggingwebpackvisual-studio-codesource-maps
D M
D M

Reputation: 41

Unable to debug React.js code in visual studio code

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

chrome project structure

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:

My project structure

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

Upvotes: 4

Views: 6168

Answers (2)

Morpheus
Morpheus

Reputation: 3024

  1. try run "npm start" in terminal first.
  2. 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}"
    }
]
}

Upvotes: 4

Patrick_B
Patrick_B

Reputation: 1

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.

Upvotes: 0

Related Questions