Exploring Vue.js Debugging in WebStorm

Currently, I am in the process of debugging a Nuxt + Vue.js application and I find myself needing to examine the description of an object that is being passed to one of my components' methods. Additionally, I desire to step through this method to identify any issues present within it.

While utilizing WebStorm for this task, I came across some helpful information on how to work with Vue.js in WebStorm from this source.

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

Following the instructions provided above, I proceeded to run "npm run dev" and then initiated the debug mode in WebStorm. Although the page successfully loaded in Chrome, I faced an issue where my set breakpoints were not being triggered.

Despite this setback, I am aware that my method is being executed as I can observe its flawed results within my Vue app running in Chrome.

In attempting to rectify this problem, I also experimented with using the Vue Devtools extension in Chrome; however, while it proved to be useful, it did not offer the specific step-through functionality that I am seeking.

Outlined below is the configuration of my Javascript debugger:

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

I have begun to wonder if the loading order of a Vue project in the browser could be contributing to this issue. As someone who is relatively new to Vue.js, any assistance or insights would be greatly appreciated.

javascriptgoogle-chromevue.jswebstormnuxt.js

Answer №2

I found a solution that worked perfectly for me: 

build: {
    extend(config, ctx) {
      // config.devtool = 'eval-source-map'
      if (ctx.isDev && ctx.isClient) {
        config.devtool = 'eval-source-map'
      }
    }
  }

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

Automated Form Submission using Selenium

Trying to automate form submission with selenium, but encountering JavaScript issues causing exceptions. Instead of directing submit to the form action, Selenium is redirecting it to localhost. Any help on why this is happening and how to fix it? Here&apo ...

javascriptjavaseleniumwebforms

Sending an AJAX request to a Controller Action using an Object as input

I am currently using an AJAX call to a Controller within an ASP.NET MVC solution. The code snippet for the AJAX call is as follows: $.ajax({ url: "ControllerClass/ControllerMethod?date=" + date, type: "POST", dataType: 'json&a ...

javascriptc#asp.netajaxasp.net-mvc

leveraging dependency injection to retrieve a function in JavaScript

I'm exploring a way to obtain a function in JavaScript without executing it, but still defining the parameters. My current project involves creating a basic version of Angular's dependency injection system using Node.js. The inject() method is us ...

javascriptnode.jsfunctiondependency-injectionreturn

Is it possible to nest axios post requests within another axios post request?

Can someone assist me with getting the session ID from the API to utilize it as a part of my input for an Axios POST request in order to retrieve user information? Despite double-checking my code thoroughly, I keep encountering a session expired error. Any ...

phpvue.jsaxiosnativescript-vue

Is it possible to convert a string of elements in JavaScript into JSON format?

Within my JavaScript code, a variable holds the following information: url=http://localhost quality=100 tag="4.4, 5.5" I am interested in converting this data to JSON format using JavaScript, like this: "result": { "url": "http://localhost", "qu ...

javascriptjsonstringbuild

What is the best way to activate a function within an npm package in a Vue application?

I'm just starting out with Vuejs and I've recently installed the vue-countup-v2 npm package. I successfully imported it into my Vue component and noticed that it works perfectly when the page loads. However, I am interested in triggering the Coun ...

javascriptvue.jsnpmwebpackvue-component

Why is the time input field in AngularJS programmed to expect a date instead?

When booking, I stored the time using $filter('date')($scope.booktime, 'mediumTime'). After booking, I have an editbooking function where I pass the time and encounter an error in the console: Error: [ngModel:datefmt] Expected 11:59:00 ...

javascriptangularjs

Using Three.js, generate a series of meshes that combine to create a seamless 90-degree donut shape

I'm on a quest to discover an algorithm that can create the following shape in Three.js. Here is my rough sketch of the expected shape The number of meshes needed to form the 90 degree donut, as well as the thickness and spacing between them, should a ...

javascriptthree.jsgeometryshapesmesh

Top method for independently scrolling overlapping elements in both the x and y directions

Sorry if this is repeating information. I have a structure of nested divs like this: -container -row In order to enable scrolling without the default scrollbar appearing, each container and row has an additional container. My goal is to be able to scrol ...

javascripthtmlcssdom-eventsinline-styles

Storing chrome identity api responses in a Vue.js component can be achieved by creating a function

When passing the response from the Chrome Identity API to the tab running my Vue-powered Chrome extension, I encountered an issue in storing this information inside my Vue instance for use within a component. Despite trying to assign the info to a variable ...

javascriptvue.jsgoogle-chrome-extension

When you utilize React.createRef, the value of `current` is consistently null

I attempted to follow the steps outlined in this guide. Despite my efforts, I seem to be overlooking something as I can't figure out why current always returns null in this specific scenario. class App extends React.PureComponent { constructor(pro ...

javascriptreactjsref

Customize the position of the Datetimepicker

Is there a way to customize the position of the datetimepicker, ensuring that it stays within the visual boundaries without getting cut off? I need help with this. ...

javascriptjqueryjquery-uidatepickerdatetimepicker

How can I retrieve the data property within the setup function in Vue 3?

Trying to access a data property inside setup() in Vue 3 is resulting in the following error: TypeError: Cannot read property '$localStorage' of undefined data() data() { return { $localStorage: {}, } setup setup() { this.$loca ...

javascriptvue.jsvuejs3

Is there a way to show an incorrect username and password message directly above the sign-in form?

Is there a way to have an error message display just above the sign-in form if the username and password are incorrect? I don't want it to redirect to another page, but simply show the error right above the form in my code. <!Doctype html> < ...

javascriptphphtmlcss

Attempting to update the state by utilizing the values provided by useContext

Hey there! I'm currently working on a Gatsby React app and my main objective on this particular page is to remove some localStorage and reset context AFTER rendering. The timing of this reset is crucial because I need the page to initially render with ...

javascriptreactjsreact-contextreact-state-managementreact-state

The AngularJS directive is being triggered before the Jquery AJAX request is completed

I am currently facing an issue where the chart in my AngularJS application (using NVD3.org) is loading before the AJAX call completes and data is fetched. How can I ensure that the chart waits for the AJAX call to finish? <script> var dataxx= ...

javascriptjqueryangularjsajax

What is the best way to refresh the DOM following an Ajax request using jQuery?

Is there a way to dynamically update the DOM with newly added records after making a call? Should I fetch the new database record content in the callback function and then append it using jQuery? Please provide guidance if there is insufficient data to a ...

phpjavascriptjqueryajax

Efficiently create and deploy with Vite Serve and Build concurrently

In an unconventional scenario, I find myself needing to serve my Vue app in two distinct ways simultaneously: Firstly, as a typical development server index file with Hot Module Replacement (HMR) enabled, typically achieved using vite serve Secondly, as b ...

vue.jsvite

What is the reason behind needing to restart the server each time I make a change to my React application?

I'm diving into my first project using React, stepping away from my usual tools of pure HTML, JavaScript, PHP, and Node.js. I decided to create a single-page application portfolio, but I've encountered a frustrating issue. Every time I make a cha ...

javascripthtmlreactjsreload

Tips for avoiding unnecessary re-renders

The component I created sends props to both the checkbox and range components. During testing, I noticed that when a change was made in the range component, the checkbox also re-rendered even though it wasn't changed, and vice versa. Issue: When ...

javascriptreactjsecmascript-6material-uireact-hooks