Can't place breakpoints in Visual Studio Code with Debugger for Chrome

Question

I am simply trying to debug some javascript that is within my html page.

I setup the configuration as follows:

but when I am debugging my html page (using the second option called "launch the div.html"), it runs but I can't set breakpoints...

Any ideas?

 { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080/", "webRoot": "${workspaceFolder}" }, { "type": "chrome", "request": "launch", "name": "Launch the div.html", "sourceMaps": true, "file": "${workspaceFolder}/div.html", "webRoot": "${workspaceFolder}" } ] }

Answer 1

It seems debugging inline JavaScript is not supported (I can't set a breakpoint either). You have to separate your JS code into its own file and include it into div.html like so: <script src="div.js"></script> Now set breakpoints in your div.js and start debugging. I encountered problems when I first run debugging that breakpoints were not hit/loaded. I could solve that be clicking on the green "Restart" debug button.

PS: You need the Debugger for Chrome extension to be installed, but it seems you have already done that.

Answer 2

Check again with VSCode 1.39 (Sept. 2019)

It does improve the UI for column breakpoints

While debugging, VS Code now shows all the breakpoint candidate locations inline.
This makes it easier for the user to place a breakpoint on a more accurate position.
To not clutter the UI, candidate breakpoints are only shown if there is more than one possible location on the line.

You can interact directly with inline breakpoints; clicking to enable and disable them and invoking their context menu for more actions.

Note that this feature requires support by the underlying runtime or debugger, and we expect only a few debug extensions will use this feature in the future.
For this release, Node Debug and the Debugger for Chrome support this.
As an example for extension authors, our Mock Debug sample "mocks" support for this.