Debugging Vue.js in Visual Studio Code

This guide provides step-by-step instructions on how to debug Vue.js using Visual Studio Code (VS Code).

Prerequisites

• Make sure you have Node.js installed if you are debugging server-side JavaScript. Download from nodejs.org.
• Ensure you have Vue CLI installed. If not, install it using npm install -g @vue/cli.

Setting Up the Debugger

1. Open Your Project in VS Code

   • Launch VS Code.
   • Open your project folder by going to File > Open Folder and selecting your project directory.

2. Open the Debug Panel

   • Click on the Debug icon on the left sidebar or use the shortcut Ctrl+Shift+D (Windows/Linux) or Cmd+Shift+D (Mac).

3. Add a Launch Configuration

   • Click on the Gear and select Add Configuration....
   • Choose Chrome or Firefox if you are debugging client-side JavaScript running in a browser.

   Example launch.json :

    {
   
        "version": "0.2.0",
        "configurations": [
            {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome against localhost",
                "url": "http://localhost:8080",
                "webRoot": "${workspaceFolder}"
            }
        ]
    }
   

4. add vue.config.js

   module.exports = {
    configureWebpack: {
      devtool: "source-map"
      }
   };

5. Setting a Breakpoint

   • Open the file where you want to set a breakpoint in VS Code.
   • Navigate to the line of code where you want to pause execution.
   • Click in the gutter to the left of the line number. A red dot will appear indicating the breakpoint.

6. Run the Vue Application

   • Open your terminal at the root folder of your project.
   • Serve the app using Vue CLI

   npm run serve

7. Start Debugging

   • Go to the Debug view in VS Code.
   • Select the vuejs: chrome or vuejs: firefox configuration.
   • Press F5 or click the green play button.

The debugger will start, and the execution will pause at the breakpoints you set.