3 Ways To Debug Your Vuejs Apps With VS Code And Chrome
Vložit
- čas přidán 27. 07. 2024
- There is a lot of neat ways to debug your Vue.js apps using VS Code. In this video I'll explore different ways to debug your Vue.js app using Chrome debugger and beyond! #Vuejs #VueDebug
Check out my last video on Functional Vue.js Apps
• Learn Vue.js Functiona...
Please take this quick 5 minute survey!
bit.ly/2X6sQFd
Sign up here to get the first chapter of my book (Vue.js in Action) and a cheatsheet - bit.ly/2GWWuEw
Make sure to follow me!
/ erikch
My Webiste
www.programwitherik.com
instructions Debug
vuejs.org/v2/cookbook/debuggi...
How do you guys debug?
lots and lots and lots of console logs hahaha
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)
Just use devtools amd console basic
@@cesarp6761 Me too :|
aap ka shukria
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....
clean and genius, thanks man!
thank you very much, my dear man, you helped me so much with your review!
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?
Can you please do a small example or project using all life cycle hooks? (When to use, which one for efficient programming)
Sure! I'll put it on my list
@@ProgramWithErik thanks alot for replying
@@ProgramWithErik Also if you could, please include the the information which ones not to use when one are developing SSR !
Super helpful! Thanks for this.
You are welcome!
want to debug a nuxt application in vs code. Trying to figure out the configs for that.
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?
The VS code extension mentioned in the video is deprecated apparently. Would you consider a revision of the video? Thanks
Thanks very much Greate video!
Hi, this doesn't work. The first one. I have no idea what happens, but I can't see any variables.
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?
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?
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.
@@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?
@@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.
could you provide what extensions/color theme/icon theme/font you used for this demo?
Synthwave 84
Program With Erik thank you
Chrome Debugger is now deprecated. vscode-js-debug has taken it's place.
Vuex time travel debugging would help alot
How to console log vue.js
Ha!
I working in vue but i have a same doubt so i like it before watch a video
Hope this video helped!
03:08 Debugging in VSCode
You're gonna lose viewers if you use Comic Sans