The Inspect Element feature of the Google Chrome browser is a powerful yet easy-to-use tool.
It’s an important part of Chrome Developer Tools that you can use to check the source code of any website.
If you’re a beginner in web development, the Inspect tool is a useful feature you can take advantage of to learn about how websites are built, the fonts, icons, and plugins used, and even who made the website.
The good news is that you don’t need to be the developer of the website to use this powerful tool as it is available to users as well. You don’t even need to be a developer at all to use it.
In this article, you will learn how to open the Chrome Developer Tools so you can get access to the Inspect feature, and how to inspect specific elements on a website. I will also show you how you can manipulate the elements of a website by changing the texts and styles.
I'll be using freeCodeCamp.org to show you how things work with the Inspect tool.
How to Open the Chrome Developer Tools
To open the Chrome Developer Tools, click the vertical dots at the top-right corner of your browser:
Then hover over “More tools” and select “Developer tools”:
You can drag these tabs around and place them wherever you want:
How Do I Open Inspect Element in Chrome with the Keyboard?
You can open the Inspect element tool on Linux by pressing
F12 on Windows.
If you are on Mac, press
How to Inspect Specific Elements on a Website
To inspect any element you see on a website, whether it's text, a button, a video, or an image, right-click on the element and click “Inspect”.
In this case, I will right-click on the “Learn to code – for free” text on the freeCodeCamp.org landing page.
The source code will open and the element will be highlighted for you, like this:
You can see the text is an
How to Manipulate the Elements of a Website with the Inspect Tool
You can change the text contents of a website with the Inspect tool.
As an example, I’m going to change the “Build projects” text on the freeCodeCamp.org landing page to “Build real-world projects”.
To do this, right-click on the element you would like to change and click “Inspect”. In this case, it's the “Build projects” text:
Double-click on the “Build projects” text:
Type in “Build real-world projects” and hit
You can see the text has been changed to “Build real-world projects”.
How to Change Styles with the Inspect Tool
Let’s change the background of the “Get started (it’s free)” button to my favorite color – #2ecc71.
Right-click on the button and select “Inspect”:
Double-click on the value of the “background-image” property on the right, that is
Change the colors to
#2ecc71,#2ecc72 and hit
You can see the background of the button has changed.
We have now made 2 changes on the freeCodeCamp.org landing page – we changed the “Build projects” text to “Build real-world projects” and we changed the background of the “Get Started (it’s free)” button:
Are the changes you make with the Inspect tool permanent?
No. Any change you make with the Inspect tool is not permanent. Once you reload the page, the changes are gone.
This is because the website has been deployed to a server. So when you make another request to that server by reloading the page, the content from the server is loaded by your browser.
So don't worry - you playing around in this way with the Inspect tool won't change a website permanently. It just helps you learn more about it and practice your coding :)
This article showed you how to get access to the Developer tools of Google Chrome, how to use its Inspect feature to view the source code of a website, and how to change the elements and styles of a website with it.
Thank you for reading.