What are the new methods for debugging a Vue 3 app generated using @vue/cli 5 since the Debugger for Chrome has been deprecated?

I am looking to set up a basic Vue3 project using the latest @vue/cli and debug it with VS Code or Chrome. Here is the command I used to create the project:

vue create testApp
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)

I noticed that the page on the Vue website seems outdated here. It suggests using the "Debugger for Chrome" extension in VS Code which is now deprecated here. Additionally, there are differences in the vue.config.js file.

    const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

Components in Chrome do not allow debugging https://i.sstatic.net/82LPgCKT.png. Do you have any tips on how to currently debug a Vue3 app generated by @vue/cli 5?

javascriptdebuggingvuejs3vue-cli-5

Answer №1

Enhance the vue.config.js file to allow for easier debugging of components in Chrome, but unfortunately it does not support debugging with VS Code and Chrome simultaneously.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map',
  },
})

https://i.sstatic.net/GsnEhonQ.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The execution of gradlew.bat encountered an error with exit code 1 during the compilation of a Vue NativeScript project

Just diving into vue-nativescript, I encountered an error while attempting my first app trial. info: Starting bundling process for android... Watching the files with Webpack... Executing post-build scripts info: Launching NativeScript application... Sc ...

javascriptandroidvue.jsnativescript

What is the solution for resolving module issues when working with `unplugin-vue-components`?

I'm currently working on integrating unplugin-vue-components into my project to streamline the process of registering first-party plugin components across all my individual projects. However, I'm encountering difficulties in getting Vite to prope ...

javascripttypescriptvue.jsvite

Tips for modifying an expression within an ngFor loop based on checkbox selections in Angular 2

Here is the HTML code snippet I am working with: <tr *ngFor="let Resolution of Resolutions"> <td>{{Resolution.steps}}</td> <td> <div class="col-sm-10 "> <div *ngFor="let Suggestion of Resolution.Suggestio ...

javascriptangularjscheckboxangularngfor

Cannot use React's setState function

This element represents the main container: modifyData(){ this.setState({ modified: true }).bind(this) } I am passing it to a sub-element: <Profile updateData={this.modifyData} auth={this.props.auth} details={profile}/> The sub ...

javascriptnode.jsfunctionreactjsstate

Is your Jquery code behaving sporadically, functioning for a moment and then ceasing to

After successfully implementing a slide mechanism on a page, it suddenly stopped functioning properly without any apparent changes being made. Here is the code snippet: $(document).ready(function () { var hash = window.location.hash.substr(1); var ...

javascriptjquery

What is the method for concatenating two strings in JavaScript without any whitespace in between?

When working with two strings involving time, consider the following scenario: var gettime= $("#select-choice-2 :selected").text(); The above code returns a time value in 24-hour format, such as 17:45 However, if you require the time to display in the ...

javascript

The hide() and on() methods are not compatible with Internet Explorer (IE)

My code is working fine on Google Chrome, but for some reason it's not functioning properly on Internet Explorer (IE). I'm using IE11 and really need this to work on all browsers. Please help me figure out what's going wrong here. $(' ...

javascriptjqueryhtmlcssinternet-explorer

Difficulty arises when attempting to run code when a checkbox is not selected

In my form validation process, I am facing an issue where I need to validate certain values only if a checkbox is unchecked. If the checkbox is checked, I want to use the values that were previously added. However, none of the existing code snippets seem t ...

javascriptvalidation

React does not play well with the Sendgrid Node.js library

Seeking assistance with integrating node.js to handle email sending on my website. Interested in having the email form immediately send upon submission, rather than using the standard "mailto" action. Utilizing Sendgrid as the email service for API and ser ...

javascriptnode.jsreactjswebpacksendgrid

How can the jQuery click() method be utilized?

Currently working on a web scraping project, I have managed to gather some valuable data. However, I am now faced with the challenge of looping through multiple pages. Update: Using nodeJS for this project Knowing that there are 10 pages in total, I atte ...

javascriptjquerynode.jsweb-scraping

When the user clicks, I plan to switch the audio source

I am looking to update the audio source when a button is clicked, but I am having trouble getting it to work. image description data() { return { audioSrc: '' } }, methods: { setActiveAudio(item) { this.$refs.audioE ...

javascriptvue.js

What is the best way to connect objects that have been separated?

Looking for a way to reattach my detached objects and wondering how to replace the function that currently only triggers an alert. Any suggestions or help is appreciated. http://jsfiddle.net/jy2Zj/ In addition, I have another question - is there a method ...

javascriptjquery

Prevent redirection on buttons within ionic lists

THE ISSUE: I am facing an issue in my Ionic app where I am using the ion-list component. Each item in the list can be swiped to reveal a button (add/remove to favorites). Additionally, each item serves as a link to another page. The problem arises when ...

javascriptcssangularjsionic-framework

In the event that the API server is offline, what is the most effective way to notify users that the server is not accessible on the client-side?

I am working on a project where my website interacts with an API hosted on a different server. The website makes API calls and displays the data in a table. However, I want to implement a way to alert the user client-side using JavaScript if the API server ...

javascriptajaxerror-handlingserver

Using the LIKE operator in MSSQL within a Node.js SQL query

Is there a way to fetch data even when the query value for "naziv" is not an exact match with the value in the table, but just similar? const sqlConfig = require("../config/ms.config") exports.data = async (req, res) => { const { sifar ...

javascriptsqlnode.jssql-serverdatabase

Leverage the Power of Two AngularJS Factories

Can I efficiently use two Factories in AngularJS by calling one from the other? Here's the Scenario: I have a Factory that returns an Array. This Factory is responsible for checking if the data to populate this Array already exists in local SQL Stor ...

javascriptangularjsfactory

The Node.js websocket server (utilizing the ws module) is not operating in a secure manner

I am facing an issue with my websocket server setup on a secure domain with SSL. It seems that the server is not using wss protocol, but instead sticking to ws. Below is the code snippet that shows how the WebSocket server is created: const httpsServer = ...

javascriptnode.jstypescriptexpresswebsocket

Harness the power of external JavaScript to initiate a click event within a Next.js component

Recently, I've been given the task of manually updating a UI that was developed using Next.js. One particular element in the UI is repeated countless times (okay, not exactly a million but you get it), and my job is to toggle its state by clicking on ...

javascriptnext.jsautomation

Organizing a JSON array into separate arrays

I have come across the following JSON array {"label":[{"name":"Government Schools", "datapoints":[{"year":"2007-2008","total":"1300"}, {"year":"2008-2009","total":"1280"}, {"year":"2009-2010","tot ...

javascriptphparraysjson

Disable Autocomplete Chip functionality when only one can be selected

When multiple is set to true, I prefer the Chip option. Is there a way to enable the Chip functionality even when multiple is set to false? <Autocomplete className={classes.search} options={top100Films} ge ...

javascriptreactjsmaterial-ui