Tips for troubleshooting a Vue application using Google Chrome debugger

Instead of relying on console.log, I want to start using the Chrome Developer Debug Tool more frequently. I recently came across a helpful article about debugging in general (such as setting breakpoints and executing line by line) here.

However, when attempting to apply this knowledge in a real-life scenario - specifically within a vue (nuxt) application that I am currently working on - I encountered difficulties.

All my files are merged into complex javascript files, making it challenging for me to debug them.

I then stumbled upon another article: Debugging .vue component in Chrome. Although I hoped it would provide some clarity, I still feel lost.

In an attempt to resolve this issue, I added the following code snippet to my nuxt.config.js:

configureWebpack: {
  devtool: 'source-map'
},

Despite this, I could not locate any sourcemaps for my .js files in the debugger. It would be beneficial if I could easily access all js files related to each vue component, store file, and other utility scripts that I have created. While unsure if this is achievable, I believe there must be a way to identify and debug my Javascript code effectively within the debugger tool. Is this assumption incorrect?

javascriptgoogle-chromedebuggingvue.jsnuxt.js

Answer №1

Nuxt.js includes the definition of a sourcemap in the build property of the nuxt.config.js file: Step 1:

 build: {
        extend (config, { isClient }) {
          // Modify webpack config only for client-bundle
          if (isClient) {
            config.devtool = '#source-map'
          }
        }
 }

Step 2: Re-run the npm command line (nuxt does not automatically apply changes in nuxt.config.js like on other pages).

npm run dev

Step 3: Open Google Chrome, press ctrl + shift + I or F12 to open source via : ///webpack ...

I came across this information on the official URL: https://nuxtjs.org/api/configuration-build#extend

Answer №2

To implement the following settings in your nuxt config file, use the code snippet below:

build: {
    filenames: {
      chunk: '[name].js'
    },
  extend(config, ctx) {
      const path = require('path');
      // Enable ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.devtool = '#source-map';
      }
    }
}

This should meet your needs. Additionally, you can utilize the debugger keyword in your JavaScript code to deliberately set breakpoints, and also set breakpoints directly in your browser.

Answer №3

If you're facing debugging issues with Nuxt and using TypeScript, here are the VS Code configurations specifically for Nuxt-TS.

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:{ADD_YOUR_APP_PORT_HERE}",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "args": ["dev"],
      "osx": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
      },
      "linux": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
      }
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": ["server: nuxt", "client: chrome"]
    }
  ]
}

To enable source maps, add this to your nuxt.config.ts file:

// nuxt.config.ts
extend (config: any, ctx: any) {
    if (ctx.isDev) {
      config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
    }
}

For a more in-depth tutorial, visit my blog at:

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

Increasing Divs in React with Buttons

Just getting started with React/Next and I have a query that I need help with. I'm attempting to create a button that dynamically adds more divs in real-time. Here is the code snippet I have so far: import React from 'react' const Clown = ...

javascriptreactjsfor-loopwebfrontend

Resolving problem with saving an Array of Objects due to parsing issues with empty objects

I'm experiencing a peculiar problem with the Parse .save method. Saving individual Objects and Arrays of strings works seamlessly. However, when attempting to save an Array of Objects like: [{"pos": 10101, "id": 2312}, {...}, {...}], I encounter issue ...

javascriptarraysdatabaseparse-platform

Failing to retrieve data from Ajax response

When handling requests in a servlet, the following code snippet processes the request received: Gson gson = new Gson(); JsonObject myObj = new JsonObject(); LoginBean loginInfo = getInfo(userId,userPwd); JsonElement loginObj = gson.toJsonTree(loginInfo) ...

javajavascriptjqueryajaxservlets

The alignment of the JQuery Mobile tabs is off

As I work on developing a Cordova app, I've noticed that the tabs on my Android phone display in an unusual way. Here's what they look like: The image above was created in JSFiddle using JQuery 2.1.0 and JQM 1.4.2 selected with the following co ...

javascriptjqueryhtmlcssjquery-mobile

Having trouble with reactjs and typescript? Getting the error message that says "Type 'string' is not assignable to type 'never'"?

When trying to setState with componentDidMount after an axios request is completed, you may encounter the error message Type 'string' is not assignable to type 'never'. Below is the code snippet: import * as React from 'react&apos ...

javascriptreactjstypescript

Load an XML file from the local server asynchronously on the Chrome web browser

Attempting to load a local XML/XSL file into a variable for editing seems to be causing an issue. The code provided functions properly in IE and Chrome, however, Chrome displays a warning due to the synchronous nature of the call. function loadXMLDoc(fileN ...

javascriptajaxxmlxslt

css based on the current time in the United States

I have a working code that currently reads the user's computer time, but I specifically need to get the hours from the USA regardless of the user's location. The CSS should be applied based on USA time. <script type="text/javascript"> dat ...

javascriptjquerycss

Is deconstruction binding possible with a function?

I'm currently puzzled by this piece of ReactJS code snippet I came across on this page: const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => ( <Todo key={todo.id} {...todo} onClick={() => onTodoClic ...

javascriptreactjsecmascript-6

Error encountered in thread "main": Issue with parsing string literal

import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.firefox.FirefoxDriver; public class FindElementsUsingJS { static WebDriver driver= new FirefoxDriver(); public static void main(Stri ...

javascriptselenium-webdriver

Updating documents in a mongoDB collection can be done by simply

I require an update to my database that will modify existing data, as illustrated below: existing data => [{_id:"abnc214124",name:"mustafa",age:12,etc...}, {_id:"abnc21412432",name:"mustafa1",age:32,etc...}, {_id ...

javascriptnode.jsmongodbexpressmeteor

Tips for setting up a queue system for alert messages in Vue.js with Vuetify

Seeking assistance with modifying my code to handle multiple alerts and implement a customizable timeout duration. Any advice on how to approach this would be greatly appreciated. ~/store/toast-messages.js export const state = () => ({ color: '&a ...

vue.jsvuejs2nuxt.jsvuetify.js

Receive emails: using the require() function with ES Module

After following the react-email documentation, I encountered an error when trying to run the yarn email command: $ email dev --port 3001 ***\node_modules\ora\index.js:65 if (process.platform === 'win32') { ...

javascriptreactjsnext.jsjsx

Issue: NS_ERROR_FAILURE encountered in Firefox when using getBBox()

Is there a way to use the method getBBox() in SVG to retrieve the width and height of an element? I have included my code below, which works in Chrome but not in Firefox. If anyone has a solution to this issue, please let me know. try { console.log( ...

javascriptjquerysvg

Tips for deactivating data monitoring in a Vue.js component attribute

Looking to develop a Vue.js component that accepts properties from its parent component, like this example: <table-cell :value="foo" format="date" /> Although value and format are set as properties, Vue automatically sets up obse ...

javascriptvue.js

When working with React and trying to update data using the useEffect hook, I encountered an issue with an Array data. Unfortunately, using map or Object.keys(data).map did not produce the desired results. Can anyone provide guidance on

After using the useEffect hook to update the data, I noticed that the data is an array when inspected in the DEV tools. However, when attempting to traverse the data using the map function, an error stating 'data.map is not a function' is returne ...

javascriptreactjsreact-hooks

Having trouble getting collision events to trigger in ThreeJS when using the PhysiJS physics engine?

When an object falls and collides with the ground, an alert box should pop up displaying the message "Box just hit the ground". However, there seems to be an issue as the alert box is not being created upon collision. Additionally, no relevant JavaScript ...

javascriptthree.jscollision-detectionphysics-enginephysijs

Can we enhance the efficiency of this equation?

The formula provided organizes the elements in the container based on mouse movement. The issue stemmed from the image size and the different calculations performed when approaching along the x and y axes from various directions. const zoomEffect = (even ...

javascriptreactjsnext.jsformulamagnification

Is it possible to selectively add backgrounds to cells in Kendo Vue based on certain conditions?

Is there a way to apply a background color to specific cells in a particular column without affecting the others? It seems like Vue doesn't have this built-in functionality. I found a tutorial on applying backgrounds to entire rows, but I'm look ...

vue.jskendo-ui

Exploring JavaScript Object-Oriented Programming (OOP) concepts. Delving into the

Here is a sample of JavaScript OOP that I am currently studying. I'm puzzled about why getA() and getC() are returning undefined, but getB() returns 2 when I update the variable B in the constructor and assign it to b. When I execute getD(), it appea ...

javascriptnode.js

Retrieving JSON information from a PHP script with AJAX

I am currently experiencing an issue with my PHP script, 'getNews.php'. Despite working correctly in the terminal and returning the expected data, I am encountering difficulties when trying to retrieve this information through JavaScript. <?p ...

javascriptphpjqueryajaxjson