3 Ways To Debug Your Vuejs Apps With VS Code And Chrome

[@ProgramWithErik]

How do you guys debug?

[@cesarp6761]

lots and lots and lots of console logs hahaha

[@im.empimp]

I actually have the vs debugger for chrome & firefox set up in my projects, but I just use it to ensure I use specific chrome/firefox instances (i.e. development-specific chrome/firefox instances, with Vue tools and a few accessibility dev tools added, but otherwise they're just default browser instances, so that none of my personal extensions or settings can cause side-effects)

[@dongjunlee7246]

Just use devtools amd console basic

[@sossogamer2014]

@@cesarp6761 Me too :|

[@mehdihassan551]

aap ka shukria

[@hughmungus1767]

Erik, I'm wondering if you would consider doing an updated version of this for later versions of the software? Pretty much everything you've shown has newer versions now and I'm not finding the instructions you gave to be accurate any more. For example, I can't get Debugger for Chrome to connect from VS Code. In fact, this is the kind of video you might want to redo every year or two....

[@santhoshraghavpidathala3701]

Can you please do a small example or project using all life cycle hooks? (When to use, which one for efficient programming)

[@ProgramWithErik]

Sure! I'll put it on my list

[@santhoshraghavpidathala3701]

@@ProgramWithErik thanks alot for replying

[@thinksabbir]

@@ProgramWithErik Also if you could, please include the the information which ones not to use when one are developing SSR !

[@kyletozer]

This works in .vue files but doesnt' stop at breakpoints set in the index.js where the app is mounted or any other non-vue .js file in my app. Anyone know why this is?

[@lucapassani1129]

The VS code extension mentioned in the video is deprecated apparently. Would you consider a revision of the video? Thanks

[@derekkroeker4582]

On yours it says 20 million downloads, on mine it says 8 million downloads? 3:28 so 1+ years later, the amount of downloads decreased? Did they make fake downloads, so that they had to delete more than half, or did they count people uninstalling it?

[@johnm8358]

Great tips, one thing I've always struggled with is debugging from jest tests into vue files, when I step into the Vue file it doesn't step in correctly..any vscode config for this?

[@dgloria]

Hi, this doesn't work. The first one. I have no idea what happens, but I can't see any variables.

[@BansuriVoyage]

want to debug a nuxt application in vs code. Trying to figure out the configs for that.

[@cesarp6761]

Thanks as always Erik.. I have a question.. I can run 'anything' in the devtools.. but I was wondering is.. when I'm calling for example and axios call from my page.. I can also type and run the same command in dev tools to query my database (and it thinks is also coming from own page).. how can I prevent any user from typing and running.. for example, using the same axios calls from the devtools (typing the command in the console) and stopping from querying my db?

[@ProgramWithErik]

Well, in production, they can't use devtools, since the debug will be turned off in production. The wouldn't be able to do anything like that.

[@cesarp6761]

@@ProgramWithErik I don't quite get it.. I can open any page and run commands in the console like when locally.. Am I missing something? a flag or code?

[@oghenerukevwekofi7976]

@@cesarp6761 You technically can't stop them from doing that. What you can do is make sure that your backend has really tight access-controls to make sure that the requests it gets are from legitimate and authorized users. If an authorized user wants to make calls to your backend with devtools, there's not much you can do about it. The key is making sure that your backend checks for that authorization and it's not really a big deal, so long as the user is authorized to do whatever it is they are doing...whether they're doing it through devtools or not doesn't matter.

[@DK-kz5cs]

could you provide what extensions/color theme/icon theme/font you used for this demo?

[@ProgramWithErik]

Synthwave 84

[@DK-kz5cs]

Program With Erik thank you

[@SovietFrontier]

Chrome Debugger is now deprecated. vscode-js-debug has taken it's place.

[@milbonazwagerman5282]

How to console log vue.js

[@ProgramWithErik]

Ha!

[@CG_GEOS]

clean and genius, thanks man!

[@jonathanbakebwa2292]

Super helpful! Thanks for this.

[@ProgramWithErik]

You are welcome!

[@clasesutnfrc8699]

03:08 Debugging in VSCode

[@alexandershmidt6926]

thank you very much, my dear man, you helped me so much with your review!

[@code-to-design]

Vuex time travel debugging would help alot

[@AndrewOnTestingCars]

Thanks very much Greate video!

[@bulp9893]

I working in vue but i have a same doubt so i like it before watch a video

[@ProgramWithErik]

Hope this video helped!

[@risncch6595]

You're gonna lose viewers if you use Comic Sans