Are you debugging JavaScript in VSCode? | YOU SHOULD!

[@workingTchr]

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.

[@RobertMcGovernTarasis]

Bloody useful, thank you for putting this out so quickly 🙏🏻

[@hero3616]

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.

[@AZisk]

Tell your friends :)

[@happycolours8551]

Thanks you so much for this i have been searching everywhere couldnt find a good tutorial for how to debug js in vscode!!

[@CGMossa]

I don't know anything about web. This was a no-nonsense video. Lovely!

[@rajendra_K_]

@Alex thank you very much for explaining debugging in VS code in a such a easy way :)

[@AZisk]

Glad it was helpful!

[@42HUE]

Alex! What do you know, search for debugging info and find a friend talking about it. Great video!

[@AZisk]

Oh hi Mark!

[@Lascarnn]

Webstorm also had this feature btw. Nice video!

[@aileenchan3741]

Finally, a good and concise video for debugger in vs code!!! 🙏💗 thank u!!!

[@babykosh5415]

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.

[@sachindraragul1094]

Man. Thanks for getting to the point and it's super useful.

[@juanguirao]

That was good. Very useful. Liking. Subscribing.

[@yavuzselimdogan9852]

This can not be more wonderful expalanation! Thanks.

[@cetinbasoz1030]

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.

[@garytimeless7251]

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 💪

[@AZisk]

Glad it helps

[@just_anonym883]

This is very useful, awesome video, thank you!

[@unsolvedmystery7408]

We need more videos like this

[@durgaraoganta2767]

I'm the first commenter for this video 🤣😍

[@AZisk]

Yes you are!

[@michpo1445]

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" } ]

[@shephardmubanga3351]

Great presentation

[@EduardoAndersonRivasSalas]

Thank you very much, it helped me a lot

[@VandamBerbecu]

I use a lot VS Code Debugger with node! Especially its feature "Attach to running node"

[@timoteisatmarean7391]

So now I can debug js in vs code like I was debugging C in codeblocks years ago. Yay!

[@garynagle3093]

Very useful. Thanks

[@velociraptor5962]

Cool. Do you think it'll do angular js android apps running in an emulator?

[@korigamik]

I’m interested as well.

[@roshenjayakody4638]

Thank you,, it was very helpfull

[@StephenBeale]

localhost refused to connect - have tried changing ports, will have a look around

[@hitechinformation]

Very fast .but very clarity. Thanks bro👍💪

[@alextiley5749]

Super useful video, thanks for sharing Alex! 👍live-server is also an amazing little tool, so useful - life without hot reloading is hard 😆

[@AZisk]

Glad it was helpful!

[@LePhenixGD]

As of 2024 you do not need to install the extension to debug on VSCode, it's now integrated in the IDE

[@mehmetakif5842]

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

[@lucycanly4170]

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.

[@md.mohiuddin]

Excellent. Thanks.

[@parasjoshi5509]

It is keep opening new chrome instead of opening the existing one. is there any solution of it ?

[@siddharthkrishnan3107]

This is useful thanks

[@zZMazeZz]

When i start the debugger it opens the directories of my project instead of the chrome debugger.

[@JimKernix]

What do I need to do to get debugging to work with the Brave browser?

[@creativeartdesign4820]

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?

[@VP-qd2ed]

thank u amazing work

[@MStoica]

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.

[@MStoica]

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 😐

[@AZisk]

I love it when I learn new things from a KZbin 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 :)

[@MStoica]

@@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 😁

[@philip9677]

can we run this without a debugger statement in vanilla js

[@hiroyukinumaguchi1984]

Great! Thanks!

[@SomewhatLazy]

No love for firefox?

[@dartmaster3006]

Good one.

[@yash1152]

0:20 link to the article?

[@alexsnowblind]

chrome doesn't appear in the list. Some one else with the same issue?

[@ShamirDasgupta]

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.

[@AZisk]

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

[@RoboCrax]

Where's the link to the Microsoft article?

[@kingzombie951]

How did you get plain js. Im new yo programming

[@EduardoBarros13]

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?

[@nicolasm.bronner2747]

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 🙄

[@AZisk]

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

[@vikk4898]

@@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!

[@chillappreciator885]

OMG Js coders now can even debug their code?

[@flagshipbuilds]

How do I turn off console.trace in VS code?

[@vitock1]

Any idea why it does not go into .vue files?

[@victorlongon]

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?

[@rejuvinatez347]

How do you exit debugger?

[@ozankurucu6261]

Thanks!

[@sainbolitas1]

thanks man

[@andysierra5141]

so, i MUST!!! use a HTML file if i want to debug JS

[@nyambe]

no Vue?

[@vigotski]

Does this work with react native?

[@AZisk]

This is for browsers

[@boldureans]

Jesus. So many stuff to do just for debugging in the browser vs webstorm where you have to press just one button :|

[@allenwayne6823]

Nice