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