Auto attach
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.
Exercise
Answer
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"
1
"name": "Launch Project 3"
Copied!
    Change the "url" value to "localhost:3000"
1
"url": "http://localhost:3000"
Copied!
    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
Last modified 2yr ago
Copy link