Most web developers have become quite comfortable with their browser development tools. However, web development is quite possibly the only platform where code is written in one place, and debugged in another. It is far easier to debug code in the same place where you write it.
The Chrome Debugger extension for VS Code makes this possible. I have included it in the VS Code Can Do That extension pack.
Add a launch.config to the "3-debug-browser" apps project. Add a breakpoint to the updateColor method in the src/app.js file.
Run the project and then attach the VS Code debugger.
Open the Debug View (Cmd/Ctrl + Shift + D)
Open the dropdown list at the top and select "Add Config (3-deug-browser-apps)
Select "Chrome" from the prompt
This will create a new folder in "3-debug-browser-apps" called ".vscode". Inside there will be a file called "launch.json". VS Code will open this file by default.
Change the name to "Launch Project 3"
"name": "Launch Project 3"
Change the "url" value to "localhost:3000"
"url": "http://localhost:3000"
Open the integrated terminal and make sure you are in "3-debug-browser-apps"
Run npm start
A browser instance will launch with the running app
Return to VS Code
In the Debug View, make sure "Launch Project 3" is select in the dropdown list and click the green arrow
A new instance of Chrome will open
Open the "src/app.js" file in the "3-debug-browser-apps" project
Add a breakpoint to line 48
In the instance of Chrome that was opened by VS Code, change the color and click the button to update it
VS Code will hit the breakpoint
Return to Chrome and open the Developer Tools (Cmd/Ctrl + Shift + i)
Notice that Chrome also sees the debugger and is broken on the same line
