Are you debugging JavaScript in VSCode? | YOU SHOULD!
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2021
- 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 TH-cam 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 🙏🏻
Man. Thanks for getting to the point and it's super useful.
Thanks you so much for this i have been searching everywhere couldnt find a good tutorial for how to debug js in vscode!!
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 :)
Webstorm also had this feature btw. Nice video!
This can not be more wonderful expalanation! Thanks.
Finally, a good and concise video for debugger in vs code!!! 🙏💗 thank u!!!
That was good. Very useful. Liking. Subscribing.
This is very useful, awesome video, thank you!
We need more videos like this
I don't know anything about web. This was a no-nonsense video. Lovely!
Very useful. Thanks
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.
@Alex thank you very much for explaining debugging in VS code in a such a easy way :)
Glad it was helpful!
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.
Thank you,, it was very helpfull
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!
What do I need to do to get debugging to work with the Brave browser?
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
How did you get plain js. Im new yo programming
can we run this without a debugger statement in vanilla js
Excellent. Thanks.
This is useful thanks
Very fast .but very clarity. Thanks bro👍💪
Great! Thanks!
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?
localhost refused to connect - have tried changing ports, will have a look around
Any idea why it does not go into .vue files?
When i start the debugger it opens the directories of my project instead of the chrome debugger.
It is keep opening new chrome instead of opening the existing one. is there any solution of it ?
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.
I use a lot VS Code Debugger with node! Especially its feature "Attach to running node"
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?
Cool. Do you think it'll do angular js android apps running in an emulator?
I’m interested as well.
How do I turn off console.trace in VS code?
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"
}
]
Alex! What do you know, search for debugging info and find a friend talking about it. Great video!
Oh hi Mark!
Good one.
So now I can debug js in vs code like I was debugging C in codeblocks years ago. Yay!
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
Where's the link to the Microsoft article?
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
Thanks!
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.
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?
thanks man
How do you exit debugger?
chrome doesn't appear in the list. Some one else with the same issue?
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!
0:20 link to the article?
Nice
OMG Js coders now can even debug their code?
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 TH-cam 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 😁
I'm the first commenter for this video 🤣😍
Yes you are!
No love for firefox?
As of 2024 you do not need to install the extension to debug on VSCode, it's now integrated in the IDE
no Vue?
Does this work with react native?
This is for browsers
so, i MUST!!! use a HTML file if i want to debug JS
Jesus. So many stuff to do just for debugging in the browser vs webstorm where you have to press just one button :|