Browser DevTools
Use Chrome's DevTools on your own site: inspect and test styles in the Elements panel, read the Console, check every file the page loads in the Network panel, and test on phone sizes in device mode.
Why this matters
Some bugs shout. They turn the page red and tell you the file and line. Lesson 5.1 handled those.
Other bugs whisper. A button has the wrong colour. An image doesn't load. A section is fine on your laptop but spills off the side of a phone. A form button does nothing when you tap it. No red screen, no message in the editor. Only something not quite right.
For whispering bugs, you need to look inside the page as the browser sees it. Chrome has a full set of tools for this, built in and free: DevTools. You used one small part of it in Lesson 0.1, when you changed a heading on example.com. Now you'll learn the four panels professionals use every day. They'll be essential in Stage 2, when you need to see whether an order really left the browser.
In the full lesson
- The idea in plain English
- Do it
- Check it worked
- Quick check
- What you can do now
The step-by-step, the prompt to copy, the video and the check-it-worked list, for every lesson in all 15 modules. GHS 399 ($40), paid once by mobile money or card, yours to keep.