VS Code “Breakpoint ignored because generated code not found” error for JS code using vscode-chrome-debug

Question

On Windows 10 I put together very simple node Express app:

investigate-debugger
+--.vscode
   +-- launch.json
+-- app.js
+-- index.html
+-- program.js

Server started with app.js code:

//////////////////app.js
var express = require('express');
var app = express();

app.use(express.static('.'));

app.listen(8080, function () {
  console.log('Example app listening on port 8080!');
});

index.html just loads the program.js file:

//////////////////index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <script src="program.js"></script>
</head>
<body>
</body>
</html>

//////////////////program.js
var x = 5;
var y = 4;  // here is  “Breakpoint ignored because generated code not found” 
console.log(5 + 4);

I have configured launch.js in the following way:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Chrome, launch",
            "type": "chrome",
            "request": "launch",        
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": false,
            "sourceMaps": false,
            "userDataDir": "${workspaceRoot}/.vscode/chrome"
        }
    ]
}

When I run debugger, I see the output 9 in the debugger console, I see the browser opened in the correct path and yet breakpoint does not work in the program.js, line 2:

What did I wrong here?

Most probably you should enable sourcemaps as they are needed for debugging. Also in case you use webpack, you might need to tweak your settings for webpack to generate sourcemaps that VSCode can find and use for debugging. — Tommi Grönlund
– Tommi Grönlund, Commented Dec 19, 2016 at 14:09
No webpack or other bandler. Things don't work for me irrespectively of sourceMaps — Oleksandr Nechai
– Oleksandr Nechai, Commented Dec 19, 2016 at 19:33
I have solved this issue for myself and put together a blog post about this. Perhaps someone will find it helpful: nechai.net/2017/03/22/… — Oleksandr Nechai
– Oleksandr Nechai, Commented Jun 8, 2017 at 5:47
@AlexanderNechay there is nothing at the blog link you provided, did you mean to include a different link? — Azurespot
– Azurespot, Commented Dec 28, 2018 at 2:26
@Azurespot, I am sorry, my provider lost my site's data. I have republished the article on medium: medium.com/@nechais/… — Oleksandr Nechai
– Oleksandr Nechai, Commented Dec 29, 2018 at 12:59

Flip · Accepted Answer · 2017-08-05 01:50:15Z

1

To enable breakpoints in all files, you'll need to modify your settings.json. (File -> Preferences -> Settings)

// Place your settings in this file to overwrite default and user settings.
{  
    "debug.allowBreakpointsEverywhere": true
}

I've also noticed that when using the chrome debugger, you need to specify the actual html file as part of the URL. For example, when you debug, chrome may open as localhost:8080 which will not work. Instead, you'll need to specify the actual page such as localhost:8080/index.html.

Hope this helps someone.

answered Aug 5, 2017 at 1:50

Flip

262 bronze badges

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

Comments

Delcon · Accepted Answer · 2017-01-13 14:55:48Z

0

try adding '/*' to your site "url".

"url": "http://localhost:8080/*",

this tells VS Code that it should track all files in debugging.

This solved it for me.

answered Jan 13, 2017 at 14:55

Delcon

2,5851 gold badge24 silver badges23 bronze badges

1 Comment

Eric Hartford Over a year ago

this did not work for me. it said that * was not a site.

Nayantara Jeyaraj · Accepted Answer · 2017-08-16 06:58:28Z

0

Please refer to https://github.com/Microsoft/vscode-chrome-debug#sourcemaps . you need adjust your sourceMapPathOverrides.

The default configure may not fit you case. After adjust, run .scripts command in debug console to view output.

Make sure the following two points

1) The .js file is mapped to correct absolute path
2) If there're multiple same files, let the correct file map to correct path and let others map to wrong path.

edited Aug 16, 2017 at 6:58

Nayantara Jeyaraj

2,7167 gold badges37 silver badges67 bronze badges

answered Aug 16, 2017 at 3:39

user8470204

412 bronze badges

Collectives™ on Stack Overflow

VS Code “Breakpoint ignored because generated code not found” error for JS code using vscode-chrome-debug

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related