Manipulate Websites with DevTools

Learn how to preview styling options and manipulate websites with the chrome developer tools in 5 minutes

Read the article or watch the video!

Let’s talk about the developer tools in Google Chrome. Google Chrome is a web browser as we all know and it has some hidden developer tools that we can use to manipulate webpages. To check them out, we’ll open up this live bootstrap website and see what we can do. Keep in mind you can do this with any site.

To access the DevTools or Inspector in Google Chrome, we just Left Click and select Inspect.

On the right hand side, a side-window will pop up that gives us some options.

On the top half, we have HTML and on the bottom half, we have CSS. If we hover over some of the HTML elements, the respective parts are highlighted in the actual webpage. Now, we can actually change some stuff on the webpage with this code over here. Right now, when we click the arrow button on the website, we are redirected to the about section.

We could change it so that when we click it, we are redirected to the contact section instead. To do this, we’ll change #about to #contact.

And now, when the button is clicked, we go to the contact section. We just changed the HTML, but we can change the CSS as well — scrolling down, let’s say we want the github button to be red instead of green.

We can just go down to this element’s style and set the color property equal to red.

Now, this only changes this specific github button, but if we want the Twitter and Google+ buttons to be red as well, we need to go down to .btn-default and set its color property to red. This will cause all of the elements that are a part of the .btn-default class to have red text.

So we’ve made some changes to the code… but these changes will not be saved. If we refresh the page, we’ll see that our modifications disappear — and this is good because otherwise, everyone would have access to how every website looks.

There are a couple of other tabs here as well. The Elements tab opens when you open the Inspector and it is the one you’ll probably use the most, but the Console and Source panels are also really helpful.

The Console will tell you if you have any errors in your code. This is more helpful if you have JavaScript or Angular in your program, but it will help you find any syntax errors and let you know if you are trying to access something that doesn’t exist.

The Source panel offers another way to edit the website’s code. We could click on the grayscale.min.css or index.html file, change something, and it would have the same effect as if we did it in the Elements tab. Again, remember — none of our changes will be saved no matter where we make them.

Now, why does this help us? Why do we care that we can do this? Well, I have some of the HTML and CSS code that we created in the previous Bootstrap tutorial and we can open up this HTML webpage…

And let’s just say I wanted to see what this header text would look like if it was red. We could open up the side-window with Left Click/Inspect and style the element to red.

This red might be a little bright for my taste so we could make it a little darker by selecting the icon next to red. By clicking different areas on the preview color window, we can see what different shades of red might look like.

We can also sample colors on the website — say take the brown color from this photo.

That looks good to me! However, since none of this is saved, we’ll have to copy and paste this hex code and styling into our actual CSS file and save it up. To do this, we’ll put our header in a div, give it an ID, and then select that ID in the CSS.

Refreshing the page, we now have the styling we want.

That’s the power of the developer tools in Google Chrome. Next week will be all about JavaScript, which will actually help make our websites interactive. See you then.

Things to Remember:

<!-- The Inspector -->
<!-- Only avaliable in Google Chrome -->
<!-- Manipulate content on different webpages -->
<!-- Changes never saved -->
<!-- Access -->
<!-- Left Mouse Click -->
<!-- Select Inspect -->
<!-- Tabs to Remember -->
<!-- Elements -->
<!-- Console -->
<!-- Source -->

Plus a Little Extra:

<!-- 1. You can use the DevTools to -->
<!-- find out the performance of your website. -->
<!-- 2. You can toggle Device Mode by pressing the -->
<!-- button at the top next to the elements tab. -->
<!-- 3. Going to the Security panel, you can -->
<!-- figure out how secure your website is. -->
<!-- 4. You can also access the DevTools by -->
<!-- going to the Chrome menu in the top right hand
<!-- corner, selecting Tools, and then selecting
<!-- Developer Tools. -->

Code from this blog post