Quickly Manipulate DOM Using Google Chrome
Find out how you can quickly modify any web page using Google Chrome Developer Tools. Using the inspect tool help you save a lot of time in develop, deploy and test cycle.
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