 So, we have been using JavaScript since many years and we all know that there have been lot of editors, ids help with JavaScript, but in this video, we'll be saying like how we can use the Chrome browsers developer tools feature to try out few JavaScript snippets and to see like how how can we use a Chrome browser to execute JavaScript. So, in short, in a nutshell, the outcome of this video will be to make sure that at the end of this video, student will be able to use Chrome's developer tools. We also call it as Chrome DevTools for executing JavaScript code snippets. So, let us move to that. And it are in this all entire content in this video will be primarily in a live hands on where I'll be using a Chrome browser. And I'll try to execute free few of JavaScript code and we'll also decide a use case where we can try out that in the Chrome browser. So, what is a Chrome developer tools or Chrome DevTools? So, Chrome developer tools are special tools offered by Chrome browser, which would assist any web developers in executing or in trying out JavaScript code snippets or to inspect few of the HTML elements, the styling elements, it's like a good hand tool for any web developer. So, as per the definition goes, what it lets developers do is it's nothing but it's a set of developer tools, especially for web developers, which are directly embedded in the Chrome browser. And also let's web developers edit the web pages on the fly and helps in diagnosing the bugs, which is very important and very sort of the features by web developers. So, we'll try to see at this in this video, we'll restrict ourselves in just using the Chrome developer tools to execute few JavaScript code. And then on in subsequent videos, we'll try to say like how we can debug a JavaScript code through a Chrome developer tools as well. So, to continue further, we'll have a small hands on session here, wherein we'll try to execute the JavaScript code snippet. And as a prerequisite, we expect that the audience who's watching the video is well aware with the fundamentals of JavaScript and its syntax, and has a latest the stable Chrome browser installed on his machine. So, I have a Chrome browser installed, and we'll try to write a small JavaScript code, which would calculate a square of a number. So, let us do it in a Chrome browser. So, we need a Chrome browser, and I kept my Chrome browser open for here. So, this Chrome browser. And in order to make sure that my code or my JavaScript variables, which I'm going to use here, not to conflict with existing Chrome workspace and code snippets, which I have, I'll open the Chrome in incognito mode. So, the shortcut it controls shift n, which opens your Chrome in a cognitive window. So, this is your Chrome browser. And now I want to open a Chrome developer tools, which would let me type a JavaScript code into that. In order to get that, the shortcut is f 12. Or you can go to the settings, where you will find where you click on it. So, you can follow my mouse where I'm right now my holding my mouse. You can see here, it has a menu called as more tools. And under that, you can see it also has a further menu structure, wherein I have a menu saying developer tools. Click on it. The window opens. There is a shortcut to open this. What I'll do is I'll just close this. And the shortcut is f 12. So, if I press f 12, the same window also opens here. Now you can see that it has a lot of menu elements. For example, this is an element. So, what it lets you do is as we already seen Chrome developer, let's developers edit web pages on the fly. So, right now what is the web content which I have loaded here, which where on which I'm holding my mouse. This can be even edited on fly. So, here I so the natural HTML content responsible for showing this is this. So, I can always open this one. So, this is your high you have gone incognito. If I want to change this, I can change this here. I'll say hello. So, you can see that it has dynamically related to the web page here. So, now here the current web page which is loaded is a default web page load background. In real world use case, it could have been a real web page of some website or it could be any other your local host web page or it could be any web embedded framework iframe as well. So, if you want, this is how you explore, but if you want to open a specific part of an browser space so that you can edit that in a console, what you need to do is you need to select the content right click onto that and click on inspect. What inspect does is it directly takes you to the developer tools where you have the highlighted contents equivalent HTML content directly highlighted for you. So, now here without expanding all the deals, I'm able to directly come to this. So, here I can say change. So, I'll call changed the contents. So, this directly affects that you can see here the content has changed. So, this is a very useful menu for developers and we call it is inspect tools. Now, the video for what we are here is for the menu called as console and here in this console, this lets you write and execute JavaScript code in browser. So, you can type your JavaScript code, you can execute and you can even trace that. Remember, you can also save the code snippets here and you can load it as well. So, that we usually do it through sources. So, right now we don't want to go to that aspect, we'll be exploring sometime in other video, but right now we are interested to see whether this console can execute a JavaScript code and as we have decided that we want to write a JavaScript function which would calculate a square of a number. So, let us do try to write a code here and so what for example, first I'll try to declare a small variable. Let's call the variable as x and I'll assign a variable x with a value 0. So, yes, it has a value 0. And if I want to do an addition of these two values, for example, if I say y is equal to x plus x, yes, x value is 0. Now, I'll change the value of x. So, I'll say x is equal to 10. Let me increase. If you want to increase a font, just place your cursor and control scroll up that would increase the font. I think this is fine. This should be fine for this our code here. So, now if I call y is equal to x plus x, it should give me y is equal to 20. So, what I am doing when I say x is equal to 10, I am writing a JavaScript code. So, if you want to clear this, for example, I want to clear this so that I can type some other code, you can click on this clear console or you can directly place the shortcut equivalent, which is control L. It has cleared that. So, if you execute it once again, the still the variables are retained. Remember, so when I am clearing, I am not clearing those the context, the memory, the variables associated with that. So, now I have a x variable and I also have a y variable here. So, now what I am interested here is to write a function here. So, let me clear the console. Yes. So, now I will write a function. So, let us write a JavaScript function. The syntax goes this way like function. Let us call, let us name the function is a square, which would take a variable number JavaScript number. And we need to return a square value of the number. So, what we will use is we will type a written keyword. And what it would return is number into number. You can also use an auto completion here. I am putting a semicolon and I will close the bracket. So, now the function is done. So, now I want to call these functions. So, let us say I already have a variable x whose value is 10. So, now if I pass x to the square function, it should give me a value 100. If it gives me a value 100, it means yes, I was successful in defining the square function and it is executing as it is expected to do. So, to debug that, we will say it in some other video. Right now, I want to make we need to make sure that I can call a square method. So, I have a square and now let me pass x to this. Yes, is it working? Yes, it is working. It is calculating the value y. You can also pass some other variable instead of x. For example, if I pass 4, if I pass 2, it calculates the value of 2. You can even do like for example, z is equal to square of 3. So, 9. So, this is what I wanted to convey you in this video that a chrome can also act as a good ID and it can also let you execute JavaScript function. It also lets you debug JavaScript functions. It is like a good in-browser based ID for a web developers. So, hope that now you are sure like how to open the console and how to use the developer tools in Chrome browser and let us see like what all we have further in this presentation. So, these are the prerequisites and what have we seen in a natural is yes, we have seen we have explored the Chrome's DevTools which is a very quick in-browser like ID for web developers which lets them edit web pages on the fly which lets them write JavaScript code or which lets them debug that a lot which helps a developers develop a beautiful websites. So, as a quick reflection for this video, I would like to put a question that what does InSpec Minute do when you right click on a web page. We have seen this in video. You can just recall or you can pause the video and think of what exactly the InSpec Minute does. So, what InSpec Minute does is it highlights the HTML content responsible for that part of that web page in your console window. So, for example, right now we explored a very small web page. Some web pages are highly structured and the DOM structure and the root nesting of that, the tree structure of that goes to very, very, very depth. So, at that time exploring everything one by one might not be a feasible approach. What a developer does is he directly selects the content on the web page and he right clicks on InSpec and the Chrome DevTool window opens the element pane of it directly highlighting the HTML content which was responsible for showing that highlighted part of web page content on that browser. So, this for further reading, I would suggest you all to explore Chrome DevTools tutorials and Google Chrome browser has an excellent documentation which also outlines various step-by-step process to use all these tools. So, follow this as a quick further reading and as a bibliography I have used the same link, I have used the Chrome developer tool documentation for you. So, hope this video helps you in understanding Chrome DevTools feature in more depth. So, this is it for this video and thank you.