Browser Developer Tools
Web developers frequently need to see what's happening 'under the hood' on a website. The Browser Developer Tools (also called the “DevTools”, the “Inspector”, or the “Console”) give you that power.
The DevTools are awesome for seeing how a webpage is working, and testing out code. 👍🏿
The Devtools are safe It’s impossible to do any permanent damage to a website from the DevTools.
None of the changes you make in the DevTools are permanent. It’s a safe space to experiment. If something goes wrong, you can refresh 🔁 the page and get back to the original.
You can read more on MDN about:
- What the DevTools are
- How to use them to View and change the HTML Elements
- and CSS Properties and Values.
Try it: Devtools Scavenger hunt
In this Scavenger Hunt, you’ll use the DevTools to view and edit properties of a webpage. You’ll get to explore for yourself what a webpage is made of, and practice using the tools that real web developers use to debug websites.
- On your laptop, go to https://devtools.programming.africa/
- Use the DevTools to find the secret messages on the page
⚠️ If you get stuck on this assignment, watch the video below to see how to solve each clue.