Are you debugging JavaScript in VSCode? | YOU SHOULD!
How do you debug your JavaScript web app right in VSCode? You can debug React, Angular, Vue, TypeScript, really any JavaScript app that can run in a browser in Visual Studio Code by attaching to a running process in your browser - I'll show you how.
#vscode #javascript #debugging
Related videos:
▶️ M1 MacBook Air and Intel i9 MacBook Pro REAL JavaScript Project Build Speed Shootout - • M1 MacBook Air and Int...
▶️ M1 MacBook vs Intel i9 and i7 Running JavaScript CPU MAXING Benchmark Test - • M1 MacBook vs Intel i9...
▶️ M1 Macs and VSCode Universal - • M1 Macs and VSCode Uni...
Support the channel and get a nice shirt:
👕👚iScriptNative Gear - nuvio.us/isn
- - - - - - - - -
❤️ SUBSCRIBE TO MY KZhead CHANNEL 📺
Click here to subscribe: / alexanderziskind
- - - - - - - - -
🏫 FREE COURSES
NativeScript Core Getting Started Guide (Free Course) - nativescripting.com/course/na...
NativeScript with Angular Getting Started Guide (Free Course) - nativescripting.com/course/na...
Upgrading Cordova Applications to NativeScript (Free Course) - nativescripting.com/course/up...
- - - - - - - - -
📱LET'S CONNECT ON SOCIAL MEDIA
ALEX ON TWITTER: / digitalix
NATIVESCRIPTING ON TWITTER: / nativescripting
Bloody useful, thank you for putting this out so quickly 🙏🏻
Thanks you so much for this i have been searching everywhere couldnt find a good tutorial for how to debug js in vscode!!
Man. Thanks for getting to the point and it's super useful.
This can not be more wonderful expalanation! Thanks.
Finally, a good and concise video for debugger in vs code!!! 🙏💗 thank u!!!
Webstorm also had this feature btw. Nice video!
I don't know anything about web. This was a no-nonsense video. Lovely!
This channel should have at least 300K subscribers. You should also mention attaching vs code debugger to existing running instances of applications which is a life saver for big enterprise Angular apps.
Tell your friends :)
This is very useful, awesome video, thank you!
@Alex thank you very much for explaining debugging in VS code in a such a easy way :)
Glad it was helpful!
Excellent. Thanks.
That was good. Very useful. Liking. Subscribing.
As a traditional javascript developer, what I would like to be able to do is have the debugger listen for javascript code being executed in an html or rendered PHP page. This seems to require that a .js file will be the entry point.
Super useful video, thanks for sharing Alex! 👍live-server is also an amazing little tool, so useful - life without hot reloading is hard 😆
Glad it was helpful!
This is cool. However, after getting poisoned by jetbrains (webstorm, idea, rider, android studio, goland ...) I feel neither VS code nor VS itself is good in debugging (but you still have to use VS for things - ie: SSRS rdl building. I have multiple rider and vs open always:). Well done video, as always.
We need more videos like this
Thank you,, it was very helpfull
I use a lot VS Code Debugger with node! Especially its feature "Attach to running node"
Very useful. Thanks
So now I can debug js in vs code like I was debugging C in codeblocks years ago. Yay!
Very fast .but very clarity. Thanks bro👍💪
OMG this is huge.....I've avoided the VSCode cult for so long primarily because one of the key tools it did not have was a native debugger a la Jetbrains. Jetbrains is in trouble now.
Alex! What do you know, search for debugging info and find a friend talking about it. Great video!
Oh hi Mark!
Awesome, i am a business informatics student, and in the next module we will learn about ts, angular etc… this will help em a lot 💪
Glad it helps
This is useful thanks
Great! Thanks!
How did you get plain js. Im new yo programming
Can I debug my react app on my server or must it be on the localhost? If so what do I do, the server is in my local network. Tried to put the server address. I can mount the folder on my computer? or do I need to install the react server on my local server? Is there any way to do it without having it running on my local server?
How can I debug javascript while getting an html output from a php server? Thx I needed the liveserver! Was really struggling to make it
What do I need to do to get debugging to work with the Brave browser?
thanks man
Thanks!
can we run this without a debugger statement in vanilla js
Awesome!!! but I have an issue. Please direct me if anybody has answered this already: How do you avoid the debugger from going thru all the system/source files??!! I have been manually adding them to "ignore list". I have selected "pause on caught exceptions". Still does it.
Good one.
I got unbound breakpoints when I try using the debug. A see the chrome opens. A tab connected to the debugger in vs code but the breakpoints are not bound. If I write the debugger statement than it seems to activate the breakpoints but the UI gets a bit whack, any ideas?
localhost refused to connect - have tried changing ports, will have a look around
Cool. Do you think it'll do angular js android apps running in an emulator?
I’m interested as well.
It is keep opening new chrome instead of opening the existing one. is there any solution of it ?
This would be very nice (and usable) if it would have opened the app as a tab in the same browser profile you were when you opened the app after running npm start. But it opened a "no profile" chrome window. And more often than not, when working on an app, it's for a specific client/company. For each client I've worked, I have a separate chrome profile with specific chrome theme colors, self hosted jira/bitbucket and other saved passwords, specific bookmarks & history, multiple specific localhost saved login details for login forms, sometimes even specific extensions installed and/or different settings for the same extension from one client to another etc. - things you want/need to keep separate and not interfere with each other, from one project/client to another (I don't want localhost autocomplete login from app X/client A to be suggested if I work on app Y/client B, nor do I want to type those in every time if I choose that chrome doesn't store them, in case of a shared profile or a guest window). And so on and so on... These need to be separated per profile and remembered/autocompleted. As far as I've read, I think it is possible to attach to an existing/opened chrome profile window, but as far as I remember I couldn't manage to do it, no matter what I've found on Google and tried, and I gave up trying at some point. So, unfortunately, this debugging feature inside of the IDE is pretty unusable because of this 🙁 otherwise, it would have been a great feature. Edit: or, I think the only way I could achieve this - partly, anyway (open a chrome window with the last active profile) was to have any chrome instance closed, and the last one closed to be the one with the profile I needed, and adding a special flag in the launch configuration would open a chrome with that last active profile. But this is also unusable, because you would be forced to close all chrome instances before starting the debugger. But I couldn't figure out the other option I've read about, which was to attach to an existing opened profile/window.
This is not a critique to the video, by the way (already "thumbed it up"), but a critique to how impossibly hard they've made debugging... All the things I've mentioned are pretty common, it's not a rare scenario, I find it hard to believe they couldn't have seen this through 😐
I love it when I learn new things from a KZhead comment. THANK YOU. I had no idea i could do profiles in Chrome - what a useful feature! The way i demonstrated this feature in vscode was for simple use cases and there may be more settings that need to be explored to take advantage of chrome profiles. And if there aren’t Microsoft better get on that :)
@@AZisk yeah, definitely. This is one of those things I don't know how I could live without before 😁 Of course, the initial reason I had for this was to also connect/sync with a Google account, so if I get a new machine I would just login to my Google account and all bookmarks, saved passwords, history, extensions would be automatically set up. The caveat would be: a different Google account for each chrome profile I want to have synced between different devices. But, other than the personal one, all other Google accounts I have are only meant for Chrome sync for different profiles 😁 Of course, I don't choose to remember banking/PayPal or other such passwords, not on my personal profile or on any profile :)) Edit: în the end, I guess that the only passwords that aren't sensitive are the ones used on localhost or staging/testing servers. So, jira/bitbucket/figma etc. are somewhat sensitive, even if they're not banking passwords (stuff for which we almost always have MFA enabled anyway, some even enforce it). But figma, bitbucket and such, I guess I'm taking the risk 😁
When I clicked "run and debug" at 3:00 it did not create a launch.json file at all. I tried the option below "Create a launch.json file" chose "Web App (edge)" but the contents were not the same. Here is what I got instead : "version": "0.2.0", "configurations": [ { "type": "msedge", "request": "launch", "name": "Open index.html", "file": "c:\\xampp\\htdocs\\index.html" } ]
When i start the debugger it opens the directories of my project instead of the chrome debugger.
Thanks for the tutorial! I don't get the same as you though, when i launch the debugger, i have a web page opening with all the folders of my projects, not the actual page i'm working on... It's weard because i did everything like you did 🙄
the video is more than a year old. the idea might still work, but literally following what i’m doing in the video might not. hopefully this gives you an idea, but to get the most up to date steps, please check the docs
@@AZisk Does this work for chrome extensions? I'm an iOS dev trying web-dev, and it scares the shit outta me that debugging an extension within the editor is such a nightmare. Any inputs into this are *really* appreciated! Thank you, Alex!
Thanks for all your videos. Have you tried a Microsoft Surface Pro X for dev performance? Just curious if WOA will ever become a viable dev OS.
I haven’t, but also very curious about this device. So far WOA Windows on Arm has been lacking for me, but mostly because of Visual Studio because that’s the tool i would use when using Windows
Any idea why it does not go into .vue files?
Where's the link to the Microsoft article?
0:20 link to the article?
As of 2024 you do not need to install the extension to debug on VSCode, it's now integrated in the IDE
Nice
How do I turn off console.trace in VS code?
OMG Js coders now can even debug their code?
How do you exit debugger?
I'm the first commenter for this video 🤣😍
Yes you are!
I'm on Fedora and changed it to Edge and now I don't see an option to change it back to Chrome. Can anyone help?
No love for firefox?
no Vue?
Does this work with react native?
This is for browsers
Jesus. So many stuff to do just for debugging in the browser vs webstorm where you have to press just one button :|