The Internet, the Web, and How They Work
1.4 Exploring the Web with Developer Tools
Every modern browser has built-in Developer Tools that let you see exactly how any website is built. This is one of the most important tools a web developer uses.
How to open Developer Tools:
• Windows/Linux: Press F12 OR right-click anywhere → 'Inspect'
• Mac: Cmd + Option + I
The Most Important Panels:
|
Panel |
What It Shows |
Practical Use |
|
Elements |
The HTML structure of the page in real time |
See how any website is built; edit live |
|
Console |
JavaScript errors and log messages |
Debug your JavaScript code |
|
Network |
Every file the browser downloads to show the page |
See HTTP requests, response codes, load times |
|
Sources |
All JavaScript and CSS files loaded by the page |
Read any website's frontend code |
|
Application |
Cookies, Local Storage, Session Storage |
See how sites remember you |