How to debug the Javascript code of a Vue.js application using Visual Studio Code

This blog post is a short cheat sheet, how to setup Vue.js debugging in Visual Studio Code, when you run the application in a Chrome Browser. I used the example source code of the Cloud Native Starter project.

If you debug a Vue.js application, you usually need two kinds of debugging.

First debug and inspect the frontend page itself: such as Html, Css and so on.

Second debug the logic of the Javascript code for the application.

First debug and inspect the frontend page it self: such as Html, Css and so on¶

That can be easily realized by adding the Vue.js devtools to the Chrome browser, which you find here Vue.js devtools. The image below displays a screen shot of the chrome extension.

The gif below shows an example usage.

Second debug the logic of the Javascipt code of the application.¶

You can also visit directly the instruction in the Vue.js Debug documentation, but here are the steps I want to note related to that topic.

Step 1: Ensure you have setup a Visual Studio Code workspace¶

You can also simply follow the instructions in the Visual Studio Code documentation.

Simplified: Create a folder and save the *.code-workspace file into a folder. The image below shows an example.

Step 2: Add a Debugger for Chrome extension to Visual Studio Code¶

Debugger for Chrome “Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.”

This start a controlled Chrome browser instance

Step 3: Add a debug configuration to the Visual Studio Code workspace¶

Add a debug configuration to the launch.json file. In the following image you see a folder structure used for that example.

Step 4: Configure .vscode/launch.json¶

This is the content of .vscode/launch.json file. In this case the “url” and “webRoot” are customized, to my application needs.

• "url": "http://localhost:8080" the URL and PORT of your local Vue.js application
• "webRoot": "[YOUR_PATH_TO_THE_CODE]/src" the path to the source code of your Vue.js application

{
     "type": "chrome",
     "request": "launch",
     "name": "vuejs: chrome",
     "url": "http://localhost:8080",
     "webRoot": "[YOUR_PATH_TO_THE_CODE]/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
     }
}

Step 4: Create a file called vue.config.js¶

Create a file called vue.config.js in the root folder of your Vue.js project.

// vue.config.js
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
 module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}

The image below shows the vue.config.js file where I used it in the example source code.

Step 5: Change to the debug view and start the debug configuration “vuejs: chrome”¶

As you see in the gif below this starts a controlled Chrome browser instance and invokes the configured URL http://localhost:8080.

Step 6: Now start your Vue.js application and watch the stop at your debug point¶

In my case I first do an authentication at Keycloak and then the content will be loaded from a microservice. In the gif you see the debug point.

Summary¶

It’s awesome that with Vue.js you are able to use two ways for your debugging one to inspect the frontend page itself Html, Css and so on and one for the logic in your Javascript code of your application.

I hope this was useful for you and let’s see what’s next?

Greetings,

Thomas

#vue, #visualstudiocode, #vscode, #javascript, #debug