Tips for troubleshooting a VueJS 3 Typescript project in VS Code and Chrome with SourceMaps (using Vue CLI and Webpack)

Question

Tips for troubleshooting a VueJS 3 Typescript project in VS Code and Chrome with SourceMaps (using Vue CLI and Webpack)

TL;DR: The VS Code debugger shows "Unbound breakpoint" error, but setting breakpoints in Chrome DevTools works. Chrome opens the respective file in VS Code automatically (after which the VS Code debugger for that file functions properly). Additionally, source files in Chrome have strange names like "HelloWorld.vue?4a7c."

I recently set up a new VueJS 3 project with Typescript using "vue create my_project". I chose Typescript, Babel, and Vue version 3 during setup.

I'm attempting to get the VS Code debugger running to debug my project similar to how I've done it with other projects, such as Java. I followed the best practices recommended by VS Code documentation. Unfortunately, since there isn't a specific debugging recipe for VueJS Typescript, I combined the VueJS and Typescript recipes and tried to adapt them for my needs.

The issue I'm facing is when I set a breakpoint in VS Code, it displays an "Unbound breakpoint" message. It seems that VS Code is struggling to map any of the source map files to my actual source files. This suggests that webpack may be causing issues with file naming or there could be an error in my file mapping configuration.

So far, I've managed to inspect the project using Chrome Developer Tools and set breakpoints in files like "main.ts," where the debugger works as expected once a breakpoint is hit. However, dealing with ".vue" files is more complex. In Chrome, these ".vue" files are obfuscated/compiled, but they show up as files named in a format like "[file-name].vue?[4-digit-hex-value]" (for example, "HelloWorld.vue?4a7c"). Setting breakpoints in these files works, and the corresponding file opens in VS Code automatically.

If anyone has a successful configuration setup that works in their environment, I would greatly appreciate some guidance.

Currently, I have the following configuration files:

launch.json

...

typescript vue.js visual-studio-code webpack source-maps

Answer 1

Answer №1

The approach I've decided to take at the moment is as follows:

(I'm not entirely sure what goes on in the background, but somehow it seems to work - I really don't know if source maps are being generated or not)

I simply utilize the official VS Code Chrome debug setup and included a pre-launch task that initiates the developer server which serves the application in dev mode. Surprisingly, this seems to be all that's required for seamless integration with a fully functional VS Code debugger for my VueJS 3 Typescript application (including Tailwind).

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "My VueJS Chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "serve",
            // "userDataDir": "${env:HOME}/.vscode/vscode-chrome-debug-userdatadir" 
            // This config is to always use the same configuration for the chrome app (system wide) 
            // therefore you can install the prefered extensions once and they will stay!
            // Taken from here: https://stackoverflow.com/questions/51725854/run-vscode-chrome-debugger-with-its-extensions
        }
    ]
}

tasks.json (This is the official VueJS VS Code pre launch task recipe)

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "serve",
            "type": "npm",
            "script": "serve",
            "isBackground": true,
            "problemMatcher": [{
                "base": "$tsc-watch",
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Starting development server",
                    "endsPattern": "Compiled successfully"
                }
            }],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

Simply place these two files into the .vscode directory of your project root and you're good to go!

OFF-TOPIC (Installation of tailwindcss):

Followed the official setup guide from here - adapted to work with vue cli create instead of vite.

1. Install tailwindcss, postcss, autoprefixer - generate tailwindcss config files

Using npm:

npm install -D tailwindcss postcss autoprefixer

Using yarn:

yarn add tailwindcss postcss autoprefixer

Generate the config files:

npx tailwindcss init -p

2. Add these two lines to the tailwind.config.js file:
The important lines are:

    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",

So your file should resemble this:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Create a ./src/index.css file and include the @tailwind directives for each of Tailwind’s layers.

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Import the recently-created ./src/index.css file in your ./src/main.js file.

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

Note the import './index.css'

That's all there is to it. Simply start using it with npm run serve or yarn serve, or follow the setup outlined at the beginning of this solution.

Answer 2

The approach I've decided to take at the moment is as follows:

(I'm not entirely sure what goes on in the background, but somehow it seems to work - I really don't know if source maps are being generated or not)

I simply utilize the official VS Code Chrome debug setup and included a pre-launch task that initiates the developer server which serves the application in dev mode. Surprisingly, this seems to be all that's required for seamless integration with a fully functional VS Code debugger for my VueJS 3 Typescript application (including Tailwind).

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "My VueJS Chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "serve",
            // "userDataDir": "${env:HOME}/.vscode/vscode-chrome-debug-userdatadir" 
            // This config is to always use the same configuration for the chrome app (system wide) 
            // therefore you can install the prefered extensions once and they will stay!
            // Taken from here: https://stackoverflow.com/questions/51725854/run-vscode-chrome-debugger-with-its-extensions
        }
    ]
}

tasks.json (This is the official VueJS VS Code pre launch task recipe)

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "serve",
            "type": "npm",
            "script": "serve",
            "isBackground": true,
            "problemMatcher": [{
                "base": "$tsc-watch",
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Starting development server",
                    "endsPattern": "Compiled successfully"
                }
            }],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

Simply place these two files into the .vscode directory of your project root and you're good to go!

OFF-TOPIC (Installation of tailwindcss):

Followed the official setup guide from here - adapted to work with vue cli create instead of vite.

1. Install tailwindcss, postcss, autoprefixer - generate tailwindcss config files

Using npm:

npm install -D tailwindcss postcss autoprefixer

Using yarn:

yarn add tailwindcss postcss autoprefixer

Generate the config files:

npx tailwindcss init -p

2. Add these two lines to the tailwind.config.js file:
The important lines are:

    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",

So your file should resemble this:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Create a ./src/index.css file and include the @tailwind directives for each of Tailwind’s layers.

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Import the recently-created ./src/index.css file in your ./src/main.js file.

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

Note the import './index.css'

That's all there is to it. Simply start using it with npm run serve or yarn serve, or follow the setup outlined at the beginning of this solution.

Tips for troubleshooting a VueJS 3 Typescript project in VS Code and Chrome with SourceMaps (using Vue CLI and Webpack)

Answer №1

Similar questions

Having trouble with Vuetify's 'text-wrap' class not functioning properly for wrapping text to the next line? Find out

Is there a way to simulate a minified module for testing purposes?

Verifying Vuejs values post-click testing

Adding a Component in Ionic 3: Step-by-Step Guide

Confirming changes to checkbox values in Angular 2 prior to updating

The Nuxt loading progress bar keeps appearing and disappearing repeatedly

`Planning the layout of an Angular application with distinct sections`

How can I correctly annotate property 'firebase' on type '{ children?: ReactNode; }' in order to resolve the error?

Is it possible to extract TypeScript types from one interface in order to integrate them into another separate interface?

Nested arrays in an Angular interface

What is the ideal configuration for Typescript within ASP.NET 4 MVC 5 on Visual Studio 2015?

React.js: If you encounter this file type, make sure to set up the necessary loader as no loaders are currently set to process it

Struggling to update TypeScript and encountering the error message "Unable to establish the authenticity of host 'github.com (192.30.253.113)'"

Traversing fields of a document within a Firestore collection using Angular

What is the role of the 'type' attribute in a button element

Preventing style conflicts in react-native with styled-components

Numerous issues persist in Angular 6 related to unresolved errors such as crypto, fs, http, https, net, path, stream, tls, and zlib

Learn how to incorporate a custom event listener for Vuetify's v-select component by utilizing directives

basic tiptap add-on or advanced prosemirror module

Tips for disregarding global CSS in Nuxt.js?