1 00:00:02,700 --> 00:00:07,700 Now the Chrome developer tools are pretty amazing and as you saw, you can do a lot there 2 00:00:07,760 --> 00:00:11,960 and I personally prefer working with those 3 00:00:11,960 --> 00:00:17,540 but you can actually also use your IDE to set breakpoint and so on. 4 00:00:17,540 --> 00:00:22,460 Now for that here in Visual Studio Code, you just need to make sure that you got a special extension installed 5 00:00:22,700 --> 00:00:28,250 and for that you can search for Chrome debug and you should find the debugger for a Chrome extension 6 00:00:28,250 --> 00:00:29,680 which I have installed, 7 00:00:29,690 --> 00:00:34,560 if you haven't, make sure you do install it because this will allow you to connect your Visual Studio Code 8 00:00:34,560 --> 00:00:37,010 editor to the Chrome debugging tools. 9 00:00:38,120 --> 00:00:40,760 So with that installed, let me go back to the explorer view here and 10 00:00:41,150 --> 00:00:47,910 let's say we have the same problem we had before, so we want to debug this here and now we want to be 11 00:00:47,910 --> 00:00:53,040 able to run this code with the help of the Chrome debugger but also connect it to our editor 12 00:00:53,040 --> 00:00:58,260 here, so that we can set breakpoints here and we can indeed set breakpoints here. 13 00:00:58,260 --> 00:01:04,920 Let's say we have the suspicion that something goes wrong when we click the add button and this function executes. 14 00:01:04,920 --> 00:01:09,780 Now you can set a breakpoint here by clicking on the left of the line number and now we got the red 15 00:01:09,840 --> 00:01:12,390 dot here which means this is a breakpoint. 16 00:01:12,390 --> 00:01:15,590 Now we just need to run this application, 17 00:01:15,590 --> 00:01:19,040 this website here with the help of our editor. 18 00:01:19,080 --> 00:01:24,130 So instead of manually opening the browser and opening our index.html file in there, 19 00:01:24,270 --> 00:01:29,140 now we need to go to debug here and then start debugging. 20 00:01:29,170 --> 00:01:35,420 Now the first time you click this, you might be asked in which environment to run, though this probably 21 00:01:35,420 --> 00:01:39,800 is only the case if you've got other environments installed, so it might also just automatically pick 22 00:01:39,800 --> 00:01:45,260 Chrome if you don't have other environments otherwise choose Chrome here and now it adds such 23 00:01:45,260 --> 00:01:45,890 a launch.json 24 00:01:45,890 --> 00:01:47,740 file in vscode. 25 00:01:47,810 --> 00:01:53,960 This configures how it launches your application in the browser because it will open up a new browser 26 00:01:53,960 --> 00:01:55,060 window. 27 00:01:55,190 --> 00:02:00,740 Now here, this is generally OK but this URL is wrong. 28 00:02:00,740 --> 00:02:06,920 This would be right if you had a local development server which we don't have here so that will not 29 00:02:06,920 --> 00:02:08,450 work for us here, 30 00:02:08,510 --> 00:02:11,460 I'll dive into local development servers later, 31 00:02:11,660 --> 00:02:17,840 for now we should just copy and paste this URL which we opened in the browser and basically paste 32 00:02:17,880 --> 00:02:25,100 this in here, using the file protocol and then the path to your index.html file ultimately. With that 33 00:02:25,100 --> 00:02:31,190 if you save that, the rest can stay as it is, you can now press debug, start debugging again and what this 34 00:02:31,190 --> 00:02:36,800 will do is it will now launch the app here, enter this debugging view here which you can always switch 35 00:02:36,800 --> 00:02:43,600 with view, go back to the explorer or go back to the debugging view which we have here and we can also 36 00:02:43,610 --> 00:02:49,550 back to our code now, have the breakpoint set here and go to that window which it opened which in 37 00:02:49,550 --> 00:02:51,650 my case is this browser window. 38 00:02:51,650 --> 00:02:56,990 Now if I now enter something here and I click plus, you see it goes back to the editor and pauses the 39 00:02:56,990 --> 00:02:58,710 code execution here. 40 00:02:58,760 --> 00:03:04,310 Now just as in the Chrome development tools, here we also see which variables are available in this execution 41 00:03:04,310 --> 00:03:10,500 context, local and global variables, we can add watch expressions here just as I showed it to you in 42 00:03:10,500 --> 00:03:16,550 the Chrome developer tools. We see the call stack and we see it's getting paused here, we can hover over 43 00:03:16,550 --> 00:03:23,840 things to see their result and we also get controls to step into a function for example and see the 44 00:03:23,900 --> 00:03:31,070 updated call stack, see values if we hover over them and of course step out of them, resume execution, 45 00:03:31,280 --> 00:03:36,910 stop debugging and close the debugger with this red square and so on. 46 00:03:37,040 --> 00:03:42,620 So you can essentially do the same as in the Chrome debugger but now directly in your IDE, which you 47 00:03:42,620 --> 00:03:45,670 might or might not find more convenient. 48 00:03:45,770 --> 00:03:50,750 Now I, as I said, personally like the Chrome debugging tools, also because some of the extra features we 49 00:03:50,750 --> 00:03:55,790 have here, that we can change the code without really changing the code but that's up to you, if you like 50 00:03:55,790 --> 00:03:57,580 to use your local editor, 51 00:03:57,620 --> 00:04:03,840 this is how easy you can get started with Visual Studio Code. Now you can always clear breakpoints here by 52 00:04:03,840 --> 00:04:05,920 just clicking on them again. 53 00:04:06,000 --> 00:04:09,840 So this is how you can leverage the IDE for that in case you prefer that 54 00:04:09,900 --> 00:04:16,290 and once you stop debugging by the way, which you do by pressing the red square here, this will automatically 55 00:04:16,290 --> 00:04:19,080 close the browser window which it opened for you. 56 00:04:19,350 --> 00:04:24,900 You can also start the app in non-debugging mode here if you prefer to do that but you can also just double 57 00:04:24,900 --> 00:04:31,620 click the index.html file in your explorer or finder as we did. One note about the console that opened 58 00:04:31,620 --> 00:04:32,480 down there, 59 00:04:32,550 --> 00:04:39,000 this debug console opened during debugging, it outputs log messages here and you can also evaluate expressions 60 00:04:39,000 --> 00:04:46,350 in here at runtime to run some quick calculations or get the value of a certain variable. 61 00:04:46,350 --> 00:04:48,720 So whilst the debugging process is running, 62 00:04:48,720 --> 00:04:52,860 you can use that console here to see what's going on in your code.