在 Chrome 调试器中访问 object 个变量（VueJS 调试）

Question

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.

Answer 1

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.