How to use chrome breakpoint debugging tools with VueJS?

Question

I develop with VIM, and I am trying to find a way to use chrome breakpoints for my frontend Vue.js app. I'm also using nuxt to develop my app with Vue.

Has anyone been able to successfully set a breakpoint in chrome without having to use vscode as their editor? If so what changes did they have to make?

For clarity's sake, I have of course tried entering debugger into my JS code, and I have also clicked on the left side of the source file in the chrome to apply a breakpoint on a particular line. Neither of these ways of applying a breakpoint have worked for me.

And? What was the solution?

geoidesic
– geoidesic

2022-10-19 09:48:05 +00:00
Commented Oct 19, 2022 at 9:48 — geoidesic
– geoidesic, Commented Oct 19, 2022 at 9:48

soroush · Accepted Answer · 2020-09-03 08:34:07Z

2

As I know There 2 way to use break point in these framework :

First, add debugger; in your code where you want like below:

  methods: {
    test() {
      let x = 15 * 5
      debugger
      //// other code
    }
  },

Second, open developer mode in source file found the place you want to have break point and click left side of it :)

answered Sep 3, 2020 at 8:34

soroush

7566 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

robskrob Over a year ago

Hi sorry soroush, perhaps I was not clear enough in my question. I will update my question -- of course I have tried debugger and opening up the source in the browser and applied a breakpoint.

soroush Over a year ago

Probably you have something like linting tools that remove debugger from your code

Collectives™ on Stack Overflow

How to use chrome breakpoint debugging tools with VueJS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related