Visual Studio Code debugging chrome, Breakpoints wont hit Visual Studio Code debugging chrome, Breakpoints wont hit google-chrome google-chrome

Visual Studio Code debugging chrome, Breakpoints wont hit


Setting the workspace location to the location of my typescript files, and not my build files, worked for me.

Unverified Breakpoint (my compiled file location)

"webRoot": "${workspaceRoot}/build/client"

Working Breakpoint (my ts file location)

"webRoot": "${workspaceRoot}/client"

I feel I should mention that I am using the Debugger for Chrome extension


So I've been messing with this for hours and finally got it working: RVCA18 was right on with his answer:

You need to make sure that webRoot is set correctly, and correctly will depend on where you are running dnx from. If from your 'project' folder, then that's your actual webRoot.

You can also use your sourcemap file. If you open the file, it has a structure something like this: {"version":3,"sources":[],"names":[],"sourcesContent":[]}

Find the sources prop which is an array of all of your source files. For example, if I search for one of my class names, I find the source to be something like: "webpack:///./app/components/TargetCard.js". I am using webpack and have a dir structure like below (simplified):

main  app  dist

which means that my webRoot as far as VSCode is concerned should equate to the dir one level above 'app', or 'main'. This is also where I run webpack from, so it makes sense. If I open the 'main' folder in VSCode, then my ${workspaceRoot} will also be 'main', so to have the debugger find my files I should set webRoot to simply be ${workspaceRoot}.


If you are using the debugger for chrome extension I would check that you are running chrome with remote debugging?I was able to get mine working after I started running chrome with remote debugging.from https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

For now, Chrome needs to be started with remote debugging enabled, and only supports one concurrent connection. This means if you open up DevTools inside Chrome, the connection to VS Code will get terminated by Chrome. This is slightly annoying, and we hope this issue will be fixed sometime soon.

To do this i have a batch file that opens chrome with this command.

start /d  "C:\Program Files (x86)\Google\Chrome\Application"  chrome.exe --remote-debugging-port=9222