 Hi, welcome to this video session. So in this video, we'll be talking and we'll be seeing a hands-on demo wherein we'll be seeing like how we can use Chrome developer tools to debug the JavaScript code snippets. So let us see like what outcomes I have been planned for this video. So at the end of this session, the audience will be able to use debugger feature of Chrome developer tools for debugging JavaScript code snippets. So I'll be using my machine and we'll be we'll be using a Chrome developer browser wherein we'll be creating a small use case and we'll be debugging that by inserting few breakpoints and the objective of debugging the code. So for this hands-on, what we need is we need a good knowledge of fundamentals of JavaScript language and we need a stable Chrome browser. So let us do this hands-on session. So I'll be switching to Chrome browser and we will be writing some HTML code file and also JavaScript code. So let us switch to Chrome browser. So into incognito mode and now I'll open the developer tools. So you can follow the screen and my cursor over the screen. You can see that to go to the developer tools, go under the menu called as more tools and under that you have a further menu structure wherein you will click developer tools. Click on developer tools then this displays you the console wherein what we are more interested is we are interested in exploring this sources tab of this. So here I need to load a JavaScript file, the HTML content. So to load it, the best way is to make sure we already have HTML file and script file written and that script file will be opening here in the Chrome browser. So what I'll be doing is in some other directory I'll create a small folder and within which I'll write my HTML file in JavaScript. So we are within sample and I'll open a command window here. So the best way to create this files is to command prompt. So I'm on the command prompt and I need to go to D drive. Let me go to D drive here. So this is the directory where we have created a program and let us create a small index.html here. Yes, so let me type the code. So this would even act as a good revision of writing a basic HTML file. So I'm directly writing a body tag and then script will be loading it externally. Or even sometimes it's also possible that we can even have an inline script, even that that too is in a right way of working with JavaScript. But here we would prefer. So I'm taking a small paragraph with ID, say, so let us call, let's name ID as para. So now we have this para ID. I'll close this para tag and I'll have some text here, sample text. Here you can load the script. So I'm loading an external script file and I'll call this as output. .js, wherein it will output numbers from 1 to 10 on the panel. And I want this process to be initiated when I click input on a button. So I'll call type is equal to button and it's on click. On click of this I'll be triggering here. So I'm thinking like we'll write a method in output.js which will have a method called as print numbers. So this is a method which we'll be triggering on calling an input. Now we have this index file. Let's also create the script file here. Our file was output.js. Here I can write this function here where I'll directly write the function. The function which we thought was print numbers. So let me copy it just to avoid some name related errors here. Print numbers it would be void. And what it would do is it would get that element document.getElement by ID. So what ID we gave to paragraph tag para. We'll set it text inner, okay. So it's panel we'll use inner HTML. And we'll write a for loop here because I wanted to generate numbers from 1 to 10. So I'll call this is where I, or we can even prefer to have int i as then 10. And I'll call it i plus plus. And every time a loop executes in its execution, I'm gonna take a small variable called as text plus equal to, I'll convert the number. So that it will be i plus I'll append a brTank so that I can see the output one after line by line, okay. So let me indent it for you. So the code looks fine here. And then after this I'm setting that value here. So let us see and let us execute if it works fine, which we did was like now is not closed. So now you can see that we have a proper script tag. See sometimes it's helps me like when I was able to open the console and Chrome developer tools, I was able to explore this element tag structure where I was able to see that like the issue was that I had a script tag wasn't closed here. So entire all the HTML content was everything into a script tag. And so it was not able to appear on the browser output. So now what we have done is we need to name this number. We'll give a proper name, rather than name we'll give it to the value, which will be the text of that button, okay. So now you can see that if I do this here it is. Now I'll go to console. If there's any problem here, okay. I have a errors like print numbers is not defined. So we need to open like is print numbers defined? Yes, and see here is an actual error. What we are doing is we are using a Chrome developer tools to debug the JavaScript. So I have an error here. And if I want to explore what exactly is the error, where exactly is the error, go to the source tab, which automatically loads all the script files associated with this web page. So here when I click on output.js, it shows me error here. So you can see uncaught syntax that are identified expected. We did not give I anything. This fine type instant JavaScript is type insensitive. So let me reload this, okay. After reloading, now I have error uncaught, unspected. Maybe I might have not closed the brackets properly. Okay, so this is what we kept the output.js incomplete. So let us complete output.js. So once the loop executes, it's calculating a string and this string will be the text of that para. So I need to just assign the text to this here. Now you can see if I load this and I don't have any script errors at least. So syntactically, my code is fine. So now I can click on click. So if I click, now the print numbers is executed. So after clicking on this print numbers method has been called, but still we have a few errors here. So what do this exact errors define? So I'll go to source. What it says un-expected text is not defined, yes. So we are deliberately doing this because we expect the audience to actually learn like what all goes wrong when you start executing this code. So we'll just define where text is equal to some just a blank string. So save it and reload it once again. So if I click now, now you can see that it displays numbers from zero to nine. Now if I want to debug that, so we were more talking about like what exactly happens when we click on that break point. I need to see a break point was execution. So when I want to see a break point by execution, for example, at line number four, I want to see if the I value is being incremented or not. So now I want to insert a break points. So right now you can see here the watch window, the call stack, and it says that we do not have any break points. So for a proper and a very careful debugging, we need to insert a break point. So let us insert a break point at line number four. Okay, so if you want to insert a break point, just click on that, it just inserts a break point. The moment I have clicked on this, the point where I am hoaring my cursor, the moment I click on it, it's a break point has been inserted. If I click once again, the break point has been removed. So I want a break point at this. Once I have a break point, then I have this break point executed. So under watch, we do not have any watch variables, but here now I want to see what value, the variable I at line number four is assuming. So I add eight, and right now it is 10. Because my code is already executed, I'll add one more watch variable, and I want to see what value the text is having. So I'm entering text and hit enter. It just adds the text. Looks like it took the, this one, this is not. I don't want this one, but I want a built-in variable. So it's T-E-X-T. So if you don't want order completion, just hit one. So right now the text is not available. It will be only available upon execution this line number four. Now I want to repeat this once again. So what I'll do is just what, okay. So let's also run that. So now you can click on here and let me run this code. Evaluate in console. It's now executing that. And now you can step into this. For example, I will have it for, okay. So let me execute this by clicking on this button once again. So what I'm doing, I'm clicking on this once again. Script is execute. And my execution stopped at line number four because I haven't set up breakpoint at line number four. So now the line has paused there. And you can see if this line executes, I use value zero and text value is null, blank string. So now we have a few options like what all, my execution is paused at moment. Now what all steps I need to do further? The few steps I have sold, I have a stepover and I have step into and I have a step out of current function and step. Step is nothing but it moves to the next line so that the sequence moves on and executing. Now as we all know the standard definition of stepover is that, okay, I have step into and step out. I'll first let you know what is step into. So the line which right now the breakpoint is working on, had there been a function call at that line and if I click on step into the debugging control would actually start debugging the function code. And the moment I'm into that function code and the later you might feel that I don't want to debug the code and I want to come back and I want to execute my normal code which has called the function, then you will be clicking on step out. So step into step out or base they decide whether you want to debug the functions deep or you'll decide a stage where you want to come out. And if you click on the step over what it executes is if it's a single line it just executes it. And if there is a function call at the breakpoint and if you click on step over it just executes the function and it replaces what are the value function written value what's are the major signature is and it just moves to the next breakpoint. So right now we do not have any breakpoint see we do not have any function calls at the breakpoint. So I'll just simply go to step F nine. So if I click on F nine the execution moves to line by line execution. So now you can see the value of this is changed zero and BR I'll click once again. The I value is one because the loop is executing now. So the second one third you can see that values increment please observe this the one where I'm moving cursor the values are automatically changing here. So this is how like I wanted to show you that you can even use the Chrome browsers built-in developer tools to debug your JavaScript code. So you might have a question like why do you use why don't we use a track because see here when we start debugging a lot of web pages it's always better to debug the browser because end people will be at the end they will be watching you or they will be browsing your website in their Chrome browsers. Ideas always have a different turn on times. So it's as a good developer practice for a web developer it's quite crucial for him to debug his script issues directly in a browser. So we'll just complete it by clicking on till I come out of this loop. So it's seven, eight, nine. So this you can see that the text value is changing and it also displays what value the text the variable text is having right now. Okay, so I've done. So once I'm done, I'm back to this and you can see that debugger has completed execution. So you can see that you can click on this and you'll get the value here, zero, one, two, three, all nine. So this as a quick summary in a nutshell what have we seen? We have seen how do we write an HTML code and how do we attach a script? We have seen when script and HTML content doesn't work like how we can debug it with the help of using Chrome developer tools and the console output and the sources tab of Chrome developer tabs. And we also seen how we insert a breakpoints and how we can add watch variables and how we can meticulously watch how my code is executing with the help of carefully choosing breakpoints. So as a question for you, what do you think does watch window let's just change the value of a variable? So we didn't see like, well you can since this has been a hands on video if you have been following me, my actions in a video on your browser, you can quickly do the change and you can find out if I can change the value inside watch window or not. But see the most of debuggers what they do they always let's you change the values in the watch window. So this is it for this video and as a further reading I would suggest you refer the link which I'm right now it's been shown on your screen. This standard developer documentation where Google has listed of how we can debug JavaScript and additional features of Chrome developer tools. So this bibliography and I would advise if required you can directly start with the JavaScript samples on W3 schools instead of my way of approach where I prefer writing code and debugging everything in front of you. So this is it and thanks for watching.