One need to mention that Chrome offers many more diagnostic tools than what is available inside VSC! The Chrome debugger allows you to navigate through the source files, to black box any library that gets in the way and much more. That being said; the best debugging experience is offered in Firefox Developer Edition (78.0b9 (64-bit)) . It features a great implementation of the debugger (with detailed overlays), a Performance tracker, Network evaluation tool, Storage and Memory trackers and last but not least an innovative Style Editor and Inspector (and I almost left out the old console tab) ...well worth checking out.
I am facing unbound breakpoint issue, the breakpoints are getting unbound as soon as I start debug session, I have tried every launch.json configuration available on the internet, not still working. Edit: I am running react inside a docker container
Thank you James. You've got straight to the point. I always had problems running debugging with Chrome's developer tool. This is a really good solution. Why others could not address such a simple problem that every beginner has?
Great video. At 13.15mins, you give a relative path to a folder where both html, css & js files are the direct children of that folder. What if our html css & js files are spread out in different folders? What're the rules here with that `webRoot` property?
I can't start the debug with vscode, i'm getting this error "Error processing "launch": Error: Can't find Chrome - install it or set the "runtimeExecutable" field in the launch config."
I figured it out and fixed it. The problem was that it wasn't able to detect chrome beta, that is the version i use. So i had to add this line in the 'launch.json' file "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome Beta\\Application\\chrome.exe" So pretty much if someone is having the same problem you just have to add the path where you have installed google chrome beta, the one above is the path where i have it. If you have a different path insert that one. Hope it helps
I've just html, css and js files, I use "Live Server" extension to view the webpage. Can you let me know what configuration I should do in "launch.json" to debug from VS Code ?
Is it possible to debug JavaScript code that is not part of the Web UI code, looking at this for debugging JavaScript/jQery that is utilized for testing. Currently I can open the site url in Chrome and execute the code in the Debug Console, but cannot figure out a way to execute/debug code in a file.
Launch with chrome opens a new chrome instance without any data. Can I launch it as I normally use (with all extensions, history, web logins)? I'd appreciate any help.
Pass a profile-directory as runtime argument "runtimeArgs": [ "--remote-debugging-port=9222", "--profile-directory=Default" ], Default can be replaced by other profiles.
And is it possible to debug a javascript file that is not connected to html. For example if my workspace folder has only and index.js file and i want to debug the code
This is cool but better documentation in the README.md would be helpful as far as how to actually run the app you suggest using would be helpful. Spent a good chunk of time figuring that out.
One problem : If i have just a small *index.html* which is calling script functions from a **script.js** , the debugger is not working ... i made the **Launch.json** .. It's just starting and shows on the Chrome **localhost:8080/** This site can’t be reached . Why that happens ? Can't i debug simple **script.js** file with a small **index.html** ?
Thanks for this video! There is a similar VS Code debug extension for Firefox, and I was able to figure out how to use it by watching this video. Thanks again!
Great video, thx! Big thumbs up. That said, I laughed after slowing down to 0.25x at 12:30 so as to watch carefully and understand what special devilry you were doing. Turned out you just added a configuration (an identical one, I might add) to the one that was already there by default. At that point I returned to normal speed just in time to hear you say, "Looks like it created two of them for us..."
Hi I'm trying to learn JavaScript myself but.... I have a problem because when I write Console.log I can't run it That's why I installed nodejs but it doesn't work on my computer because my Windows is 7 Not 10 or 8 I really don't know what to do I hope this video can help me Thank you so much
Thank you for this great video. But I have a question. Is this only for project that are using JS at backend? I wonder how can I attach/launch Debugging JavaScript in Google Chrome while running a Flask app? Thank you
I'm not that well versed with Flask. But if you have a "public" directory of some sort where your html, css, and js lives, you can point to that as your source. You can use a similar debug configuration above but update the port to where your front end app is running and the source to point to your public directory
Nice, wasn't even aware that Chrome had a debugger. Visual Studio (not Code) has certainly adapted me to thinking the IDE was the only way to launch a debugger, even if it's a server!
Are you trying to debug a Node ja file? If so, debugging configuration is a bit different but can be done by itself. Otherwise, I would assume you have html of some sort. JavaScript Functions will typically get triggered by some interaction from a webpage. Otherwise you’re probably talking about a Node file
Thanks James, this absolutely helpful but i found few features aren't included in the extension. for example, on chrome dev tools when you highlights or hovering a function that returning value it did not shows the value instead it show the object details below the cursor. E.g isGirlfriendExist(name) this example expected to return a boolean. On chrome when we highlight that invoked function it will return value instead it return the object that currently lying beneath the cursor, if the cursor on the top of the function name, it will return the function object details and so on, that's one issue. Another issue i found is almost similiar with the first one but in watch panel if we adjust the panel smaller and the variable overflow the panel it automatically hidden on the chrome dev when it's happen, we'll get value when hovering a watch expression it didn't with the extension. Thanks for excellent video.
yo quiero hacer mi propia pagina web, me ayudarías! una plataforma donde se registren muchas personas y muestren todo lo que venden, y de paso se registren con su login
My programming proccess in 3 stages: 1) idea: I have an awesome idea, it looks absolutely epic, Imma code the best website in the world! 2) coding: I code the thing, I realize it's not as cool and it took some time but it is still good and working. 3) debugging: Oh oh! There is a bug. Usually something small an element might not be aligned properly or my database isn't working properly. I now spent 4+ times the amount of hours it took to code the thing just in debugging, resulting in me either: a. Realizing there was some retarted bug that was right in front of me (like a wrong symbol) b. Finding a solution except it is overly complicated and weird c. Discovering there is no way to do the thing I wanted and I have to go back to another solution which is somewhat worse but very easy and I could've done it instead of wasting hours of my life So basically I love coding but I hate debugging and it always ends badly
Fantastic. Nicely explained and to the point. I wonder how well it works with frameworks like vue. I haven't been able to make this work well with vue + webpack.
Hi James, thank you so much for the tutorial. It's really helpful. For debugging in VSCode, I followed your steps: install Debugger for Chrome, add settings in launch.json. But I got the error: This site can’t be reached localhost refused to connect. ERR_CONNECTION_REFUSED How do I make it works?
Hi James, ty for the reply. I am Debugging PHP with Javascript codes, include WordPress development. I have XAMPP installed (Apache, PHP, MySQL). I have another extension "PHP Server" installed for PHP quick-launch. Which is running on localhost:3000 (a free port). But when I set up Debugger for Chrome to localhost:3000 or other free port, I got an error: ERR_CONNECTION_REFUSED.
hmmm unfortunately I have never debugged PHP. I've posted the question on Twitter to see if anyone has any tips. If I find something I'll let you know!
This extension is specific to Chrome, yes. However, I did find a "Debugger for Firefox" extension that appears to do the same for firefox, linked below. I will say that all of the tutorials and documentation that I've seen has been using the Chrome extension. I have not seen the firefox one used. marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug
HELLO JAMES Q QUICK . . CAN u please tell me how to extract the video link of a player playing in the VITMOVIN PLAYER . . if it is possible for you to help me . . tell a process or send me a video link where i can found the process to understand that .. .actually i want to download the video which is being played in BITMOVIN PLAYER. . . .thanks in advance.
I get the following error when I debug with chrome. Port 8080 & 3000 did not work. This site can’t be reached localhost refused to connect. Try: Checking the connection Checking the proxy and the firewall ERR_CONNECTION_REFUSED I just figured out the fix. (1) Overview of solution - stackoverflow.com/a/52684298/6648326 (2) Detailed solution - ua-cam.com/video/WzE0yqwbdgU/v-deo.html
@@JamesQQuick NOOB issue: tried it in the app.js (node) server side code. It works perfectly on client side. Now I am watching again and drinking from a firehose! thanks!
Download the FREE VS Code Cheat Sheet! bit.ly/vscodecs
I really needed this video today. Thanks for being so clear and straightforward in your explanations instead of just whizzing through stuff.
You’re very welcome!
I agree with you. Great video.
One need to mention that Chrome offers many more diagnostic tools than what is available inside VSC!
The Chrome debugger allows you to navigate through the source files, to black box any library that gets in the way and much more. That being said; the best debugging experience is offered in Firefox Developer Edition (78.0b9 (64-bit)) .
It features a great implementation of the debugger (with detailed overlays), a Performance tracker, Network evaluation tool, Storage and Memory trackers and last but not least an innovative Style Editor and Inspector (and I almost left out the old console tab) ...well worth checking out.
I am facing unbound breakpoint issue, the breakpoints are getting unbound as soon as I start debug session, I have tried every launch.json configuration available on the internet, not still working.
Edit: I am running react inside a docker container
Thank you James. You've got straight to the point. I always had problems running debugging with Chrome's developer tool. This is a really good solution. Why others could not address such a simple problem that every beginner has?
Thanks - just found this; first time I've found a clear way to set up Chrome debugging in VSCode. Got it working on my Mac!
Nice man I've been trying to stop console logging , and I finally will , Thank You.
Whilelab perfect. I’m still making myself debug more instead of just logging lol
Please tell me how to test/debug all kind of.javascripts in vs
I agree with you. Great video.
Yeah we both know you won't
@@Nexus-rt1bm little did I know 🤭
Can you tell me which theme are you using in your vs code? By the way, Very nicely demonstrated.
Shubham Prakash thanks for watching! I’m using Cobalt 2 from Wes Bod.
11:45 the actual video sauce
my hero my king
Awesome job James on this video! Much appreciated.
Thanks Russ!
That is a brilliant video! Thanks for taking the time to do this.
Absolutely!
Great video. At 13.15mins, you give a relative path to a folder where both html, css & js files are the direct children of that folder. What if our html css & js files are spread out in different folders? What're the rules here with that `webRoot` property?
Great introduction to debugging in JS/Chrome. Thanks
{2021-08-04}
To the point, yet very thorough. Best video I have watched today! 🙌
Awesooooommmmeee!!! :h
Thank you James! Wonder lesson, very useful for newbie like me, keep up the good work!
Can you please explain how to debug plain HTML, CSS and JS project ? I couldn't get it working as per steps mentioned in this tutorial
How does this work if you have multiple .js files? Or are even using a bundler like webpack?
could the same debug feature work with visual studio 2019?
yes
I can't start the debug with vscode, i'm getting this error
"Error processing "launch": Error: Can't find Chrome - install it or set the "runtimeExecutable" field in the launch config."
You’ll have to install chrome :)
I figured it out and fixed it. The problem was that it wasn't able to detect chrome beta, that is the version i use. So i had to add this line in the 'launch.json' file
"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome Beta\\Application\\chrome.exe"
So pretty much if someone is having the same problem you just have to add the path where you have installed google chrome beta, the one above is the path where i have it.
If you have a different path insert that one. Hope it helps
@@Deliverant Ok awesome!!
do you have this source code in a github repo. I want to understand web sockets a little better and have been meaning to create a web app like this.
So incredibly useful,valuable and time saving
:)
vscode portion starts at 11:30
Simply superb!!! loved the way you explained stuff @James
what extension for vscode are you using for this demo?
Debugger first chrome
Thats awsome much better than chrome debugger . I can edit code as well as debug it now :)
I've just html, css and js files, I use "Live Server" extension to view the webpage. Can you let me know what configuration I should do in "launch.json" to debug from VS Code ?
Does not work as described, placing debugger in my code does not open the chrome inspector.
Excellent content and presentation. Thank you James!
Thanks :)
Very useful James, thanks! Say, if I have a php/python & javascript app, can I use both debuggers to walk through both languages in Visual Studio?
I’m not sure about python unfortunately :(
Is it possible to debug JavaScript code that is not part of the Web UI code, looking at this for debugging JavaScript/jQery that is utilized for testing. Currently I can open the site url in Chrome and execute the code in the Debug Console, but cannot figure out a way to execute/debug code in a file.
Hmmm can you send me an example of a file you’re talking about?
Launch with chrome opens a new chrome instance without any data. Can I launch it as I normally use (with all extensions, history, web logins)?
I'd appreciate any help.
Pass a profile-directory as runtime argument
"runtimeArgs": [
"--remote-debugging-port=9222",
"--profile-directory=Default"
],
Default can be replaced by other profiles.
Oh interesting that’s cool!
And is it possible to debug a javascript file that is not connected to html. For example if my workspace folder has only and index.js file and i want to debug the code
You could run it in node and debug that way. I’ve got a video on debugging node as wel
@@JamesQQuick I have just seen the video. Thanks
This is cool but better documentation in the README.md would be helpful as far as how to actually run the app you suggest using would be helpful. Spent a good chunk of time figuring that out.
Great feedback. Thanks for sharing!
Great video! 2 quick questions: can I debugg a JS script inside a PHP file? I've got a "this site can't be reached"
Unfortunately I haven’t worked with php. I’m not sure :(
One problem :
If i have just a small *index.html* which is calling script functions from a **script.js** , the debugger is not working ... i made the **Launch.json** ..
It's just starting and shows on the Chrome **localhost:8080/** This site can’t be reached .
Why that happens ? Can't i debug simple **script.js** file with a small **index.html** ?
Definitely should work. Hard to figure out over text. If you have a video clip of what you’re doing that would help
Thanks for this video! There is a similar VS Code debug extension for Firefox, and I was able to figure out how to use it by watching this video. Thanks again!
Glad it helped!
Great video, thx! Big thumbs up. That said, I laughed after slowing down to 0.25x at 12:30 so as to watch carefully and understand what special devilry you were doing. Turned out you just added a configuration (an identical one, I might add) to the one that was already there by default. At that point I returned to normal speed just in time to hear you say, "Looks like it created two of them for us..."
Hahaha thanks for taking the time to figure that out
till 11:30 debugging through chrome console and later through VS Code
Дякую за гарне пояснення!
Wish I understood the comment :(
@@JamesQQuick it's ukrainian
@@Denis-fp9iz What does it say? :)
All I can say is.. better late than never, thank you so much!!!
Haha awesome!
Hi
I'm trying to learn JavaScript myself but.... I have a problem because when I write Console.log I can't run it
That's why I installed nodejs but it doesn't work on my computer because my Windows is 7
Not 10 or 8
I really don't know what to do
I hope this video can help me
Thank you so much
Awesome video! Subscribed and thumbed up :)
Yayyyyyy
How to attach to current Chrome i can't find out :( , it gives error
👍🏼Would love to see some examples of debugging of React apps in VS Code too.
Great idea! I'm pretty new to React but that would make a great video. Stay subscribed and out I'll put this in the backlog for the near future!!
skube got the video recorded and will post in a couple days. Keep an eye out!
Here it is ua-cam.com/video/OlwIDANNpOc/v-deo.html
@@JamesQQuick thanks for putting that together man
It is stupid how there is no textual documentation on how to setup debugger in VS Code for Chrome. Tnx for the video.
Thank you for this great video. But I have a question. Is this only for project that are using JS at backend? I wonder how can I attach/launch Debugging JavaScript in Google Chrome while running a Flask app? Thank you
Hey there! So you're trying to debug your front end app that is being served by Flask?
Yes, I'm :)
I'm not that well versed with Flask. But if you have a "public" directory of some sort where your html, css, and js lives, you can point to that as your source. You can use a similar debug configuration above but update the port to where your front end app is running and the source to point to your public directory
Well Thank you. I'll try to make it work
Nice, wasn't even aware that Chrome had a debugger. Visual Studio (not Code) has certainly adapted me to thinking the IDE was the only way to launch a debugger, even if it's a server!
Vs code can do it all ;)
I only want to debug a javascript, do I have to put in a html file?
Are you trying to debug a Node ja file? If so, debugging configuration is a bit different but can be done by itself. Otherwise, I would assume you have html of some sort. JavaScript Functions will typically get triggered by some interaction from a webpage. Otherwise you’re probably talking about a Node file
The tutorial starts at 12:00
Great Video, exactly what I was looking for.
Thank you!!!
Thanks a lot. You explained it in the best way possible.
Awesome to hear! Thanks for watching!
Thanks James, this absolutely helpful but i found few features aren't included in the extension. for example, on chrome dev tools when you highlights or hovering a function that returning value it did not shows the value instead it show the object details below the cursor.
E.g isGirlfriendExist(name) this example expected to return a boolean.
On chrome when we highlight that invoked function it will return value instead it return the object that currently lying beneath the cursor, if the cursor on the top of the function name, it will return the function object details and so on, that's one issue. Another issue i found is almost similiar with the first one but in watch panel if we adjust the panel smaller and the variable overflow the panel it automatically hidden on the chrome dev when it's happen, we'll get value when hovering a watch expression it didn't with the extension.
Thanks for excellent video.
Thanks for the feedback and for watching!
Awesome video, straight to the point, thanks!
Thanks!!
Thank you James, you saved my day!
11:59 on this day, total reviews stands ~ 6.1 million; I wonder if MS is showing wrong data 2 years back or at present ?
Reviews or Installs? Based on the 4-star rating, some section of people might have uninstalled.
Would such flow work with Live Server instead of Node.js app?
yo quiero hacer mi propia pagina web, me ayudarías!
una plataforma donde se registren muchas personas y muestren todo lo que venden, y de paso se registren con su login
Eso no es fácil. Necesitarás experiencia en varías lugares para crearla. Tal ves puedes considerar algo como wordpress
I try to run the debugger like this and it doesn't work, but it works when i run the node.js debug. does anyone know how to fix?
What kind of project are you running? Node?
Fantastic video. Really helped me out.
Thank you!!
Good job JAMES.
Thanks!!
why do you have to move your mouse so fast ? i am not going to pause and backup 900 times just because you are running a race.
Hmm interesting feedback. I’ll keep that in mind for future videos. Thanks!
This is brilliant James. Thank you so much for sharing; life saver 🙌
Great ! I like the detailed and clear explanations! Thank you James 😎
Thank you :)
%10 CODING
%90 DEBUGGING
THAT IS WHAT HAPPENS TO ME, LIKE EVERY 2 LINES OF CODE, THERE IS A MISTAKE. I HATE MY LIFE
Haha ya I try to write small pieces of code, test/debug them to make sure they work, then move on.
My programming proccess in 3 stages:
1) idea: I have an awesome idea, it looks absolutely epic, Imma code the best website in the world!
2) coding: I code the thing, I realize it's not as cool and it took some time but it is still good and working.
3) debugging: Oh oh! There is a bug. Usually something small an element might not be aligned properly or my database isn't working properly. I now spent 4+ times the amount of hours it took to code the thing just in debugging, resulting in me either:
a. Realizing there was some retarted bug that was right in front of me (like a wrong symbol)
b. Finding a solution except it is overly complicated and weird
c. Discovering there is no way to do the thing I wanted and I have to go back to another solution which is somewhat worse but very easy and I could've done it instead of wasting hours of my life
So basically I love coding but I hate debugging and it always ends badly
@@ixalaz4536 nice. Well, I was a script kiddie when I wrote that comment.
I've been missing out
Haha not anymore!
Thank you so much. It helped a lot.
Really awesome video. Love it. Thanks man.
James Lemayian awesome!!! Thanks for watching :)
Fantastic. Nicely explained and to the point.
I wonder how well it works with frameworks like vue. I haven't been able to make this work well with vue + webpack.
A M I’m going to be working on that for my upcoming “Learn Vs Code” course ;)
www.learnvscode.com you can sign up to get updates when the course is ready!
That sounds good. (btw, there's a typo under the title - an extra "to")
Nice explaining Sir. That clarified a lot!👍🏻
Thank you!!
this has never worked for me, getting "this site can't be reached"
Want to send me a video clip of what’s going on? James@learnbuildteach.com
@@JamesQQuick sorry I didn't realise the I had to do npm run start first and then debug, that's all
@@randompointlessness2766 Yep, you'll need to have the app running. Glad it worked out!
@@JamesQQuick can u explain that a bit more for newbies what means the app running and how to get that running?
@@ArnoldRoxx I use an extension in VS Code called Live Server. You can right click in your html file and "start" your app with a live reloading server
Good tutorial. Keep it up.
Thank you!
12:07 "So you open up that d-bag" 😂😂
Hahahahahaha I never caught that. I’m cracking up!
Hi James, thank you so much for the tutorial. It's really helpful.
For debugging in VSCode, I followed your steps: install Debugger for Chrome, add settings in launch.json. But I got the error:
This site can’t be reached
localhost refused to connect.
ERR_CONNECTION_REFUSED
How do I make it works?
Darren Li what kind of app are you debugging? And what configuration are you using?
Hi James, ty for the reply.
I am Debugging PHP with Javascript codes, include WordPress development. I have XAMPP installed (Apache, PHP, MySQL). I have another extension "PHP Server" installed for PHP quick-launch. Which is running on localhost:3000 (a free port). But when I set up Debugger for Chrome to localhost:3000 or other free port, I got an error: ERR_CONNECTION_REFUSED.
hmmm unfortunately I have never debugged PHP. I've posted the question on Twitter to see if anyone has any tips. If I find something I'll let you know!
Hi James, thank you! Hopefully, there is someone got the same issue and already have a solution.
did you find a solution i got the same problem ?
Wow, that was helpful! Thank you very much.
Glad it helped!!
super resource!!! top!
Ah, nailed it, this is so helpful thank you!
You’re very welcome!!
bless u! just one word, FANTASTIC !!!
Thanks for watching!!
is this debugger only for chrome? Can we debug firefox/ie with the same set up?
This extension is specific to Chrome, yes. However, I did find a "Debugger for Firefox" extension that appears to do the same for firefox, linked below. I will say that all of the tutorials and documentation that I've seen has been using the Chrome extension. I have not seen the firefox one used. marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug
Great job sir, Thank you
HELLO JAMES Q QUICK . . CAN u please tell me how to extract the video link of a player playing in the VITMOVIN PLAYER . . if it is possible for you to help me . . tell a process or send me a video link where i can found the process to understand that .. .actually i want to download the video which is being played in BITMOVIN PLAYER. . . .thanks in advance.
Actually pretty helpfull, thanks!
it was amazing, thank you
I get the following error when I debug with chrome. Port 8080 & 3000 did not work.
This site can’t be reached localhost refused to connect.
Try:
Checking the connection
Checking the proxy and the firewall
ERR_CONNECTION_REFUSED
I just figured out the fix.
(1) Overview of solution - stackoverflow.com/a/52684298/6648326
(2) Detailed solution - ua-cam.com/video/WzE0yqwbdgU/v-deo.html
I tried debugger, nothing happens
Are you talking about the debugger statement? Are you sure that line of code got executed?
@@JamesQQuick NOOB issue: tried it in the app.js (node) server side code. It works perfectly on client side. Now I am watching again and drinking from a firehose! thanks!
Lol no worries. Glad it worked out!
You are amazing. Thank you
:)
Great video, thanks a lot.
You’re very welcome!!
learnt new things! thanks
You’re welcome!
I agree with you. Great video.
Thanks, very helpful!!!!
Really helpful. :)
Awesome!!
thanks a lot that was amazing
Thankyou
Awesome, thanks a lot
good job
Thanks for that tutorial :)
Thanks very helpful
Glad to hear it!!
nice and thankyou
Step Over, Step In, Step Out are there But Where Is Step (F9)???
Thanks man !!
Glad you liked it!
AMAZING VIDEO! +1 SUB
Awesome. Thanks :)
I agree with you. Great video.
@@TravelsCode Thanks! :)
Awesome thanks
Thanks for watching :)