Configuring and Using VSCode Debugging for Front‑End Development

The author often encounters leftover console.log statements in code reviews and uses this opportunity to share a practical debugging workflow in VSCode.

Debug configuration: Create a .vscode/launch.json file in the project root and add a configuration like the following, specifying the type (chrome or edge), a custom name, request mode (launch or attach), and the URL of the page to debug.

{
  "configurations": [
    {
      "type": "chrome", // mode: chrome or edge
      "name": "lambo",   // custom debug name
      "request": "launch", // attach or launch
      "url": "http://localhost:8000/meta" // page to debug
    },
    ... // you can add multiple configurations for quick switching
  ]
}

Adding breakpoints: Open the source file, hover over the gutter at the desired line, click the appearing dot to turn it red, and the breakpoint will appear in the breakpoints panel at the bottom left, where it can be enabled or disabled.

After setting breakpoints, click the Run button and select the previously defined configuration name.

VSCode launches a clean Chrome instance (similar to incognito), ensuring no cached data interferes with debugging. The Variables panel on the left shows all variables at the current breakpoint, typically the Local scope is sufficient.

Press F5 to move to the next breakpoint and continue stepping until the desired result is achieved.

Conclusion: Mastering debugging in VSCode greatly improves front‑end development efficiency, and the debugger also offers advanced features such as watch expressions and call stack inspection for deeper analysis.