00:00 So as developers when writing web applications we typically have a process. This process includes writing the code in your favorite IDE., then using the command line terminal to install the dependencies and start the app and finally test your changes in the browser to make sure your code is correct. But there are certain times when we are working purely on the UI changes and we want to see how our changes look and you want to make the changes and test them quickly. The cycle to develop, deploy and test sometimes seems like an overkill and you wished it was a faster way to make the changes right where you see it before you decide to make the changes in the code base. So what could you do? Let's find out. I'm currently in Google Chrome and I've opened up the google.com homepage. Let's say we want to change the button labels.

00:48 We want to change them here first in the browser and see if they look okay before we make changes in the IDE. For that, we first open up the Chrome dev tools. Then, on the top of the frame, the first icon is known as inspect . We click on that. Once we hover the webpage, we will see the different parts of the DOM highlighted on the webpage. Once clicked, we can quickly jump to the parts of the DOM tree that we are interested in. This presents us with the code and the styles applied to this HTML node. If you want to make the change just to a double click on the value like here and make the change and as you hit enter, you can immediately see the change on the webpage. If you want to make the changes to the other parts of the DOM tree, follow the similar process and only when you are satisfied you copy the changes back to the code base and test it

01:36 finally before you commit the change. Keep in mind though that when you're working on the browser making the changes, these changes are persisted in-memory, so you need to copy these changes back into your code base. Otherwise, if you hit the refresh on the page, you would see that all your in-memory changes were lost. And that's it. If you work with JavaScript or any other framework such as the jQuery, Angular, or React, you have executed JavaScript on the browser. So the new course that we have launched is relevant for you. It's called Browser JavaScript and Event Loop. This course educates on how JavaScript is executed behind the scenes, and will cover various topics such as ExecutionContext and event loop. You will have the opportunity to visually see every step of JavaScript code execution. Check out the course link in the description below to learn more about the course and let us know if you have any questions. Keep learning and see you next time.