CODEWITHSUNDEEP
debuggingvisual-studio-code
Oleksandr Nechai
Oleksandr Nechai

Reputation: 1867

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

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:

enter image description here

What did I wrong here?

Upvotes: 1

Views: 4418

Answers (3)

user8470204
user8470204

Reputation: 41

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.

Upvotes: 0

Flip
Flip

Reputation: 26

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.

Upvotes: 1

Delcon
Delcon

Reputation: 2545

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.

Upvotes: 0

Related Questions