0

I am developing VueJS / Express applications, getting into more advanced web dev than I've done before. I use VSCode, and develop the back end and front end in the same project. I am able to use VSCode debugger for the back end work, and use Chrome debugger for the front end.

VSCode works great. End of that story.

Chrome is powerful, but quirky. I end up debugging what is going on with the Chrome debugger quite a bit. Add to that the inscrutable Vue internals, which are always popping up, adding another level that has to be plowed through (or ignored). But the biggest issue I have is that I cannot inspect instance variables in component scripts, only variables that are local to the function that the breakpoint is in. This reduces my process to doing a lot of one-time console.log() statements, where one is in search of just a quick inspect of a 'this.[anything]' instance variable.

I've been just putting up with this for months, but lately doing some refactoring it's slowed my progress to a crawl, so I'm looking to see if there is a way I can overcome this obstacle and speed up my debugging process.

Anyone have a suggestion? Is there a way to set Chrome to enable inspecting object variables? Is there a more efficient debugging method or tool for Vue front end dev?

Other than this, the combining of front end and back end code into one project has been great. VSCode rocks.

Improve this question
3
  • I can recommend chrome.google.com/webstore/detail/vuejs-devtools/…. It is not an all-in-one solution, but it can speed up some debugging tasks, Commented Sep 22, 2020 at 16:47
  • I use vuejs devtools, it's helpful sometimes. I feel that I'm missing something not being able to inspect variables in object instances that are being used in a function that I'm debugging. Console.log works, but is an inefficient, primitive way to do that. Commented Sep 26, 2020 at 23:00
  • I have found that sometimes using a Watch variable has more chance of showing a variable's value than hovering over it in code. Commented Oct 27, 2020 at 21:38

1 Answer 1

Reset to default
0

I have found a workaround for Vue, which is to place a breakpoint in the Watch section, using a button in the UI. In this breakpoint, a Watch in Chrome debugger has access to 'this' variables. Fellow dev's have told me that this is a common issue they deal with all the time. When I get more understanding on the conditions that affect this scope access problem, I'll add it.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.