Challenge: This website has 8 hidden bugs! Use Chrome DevTools (right-click → Inspect Element, or press F12) to find and identify all the issues. Look for hidden elements, CSS problems, and layout bugs. Using Ctrl+Shift+C allows you to select a specific on screen element while using the inspector tool.
Bug #1: The Hidden Button
There should be a green "Click Me!" button below this text, but it's not appearing...
Bug #2: The Invisible Message
A secret message is hidden below. It's there, you just can't see it:
SECRET: The password is "INSPECT123"
Bug #3: The Off-Screen Element
There's an important warning that should be visible here, but it's nowhere to be found!
⚠IMPORTANT WARNING: Always validate user input!
Bug #4: The Transparent Box
A blue info box should appear below, but it's completely invisible:
ℹThis is important information that users need to see!
Bug #5: The Z-Index Nightmare
Two boxes below are overlapping incorrectly. The green box should be on top, but the red one is blocking it:
I'm the RED box and I should be BEHIND the green one
I'm the GREEN box and I should be ON TOP
Bug #6: The Microscopic Text
There's some text below that contains a clue, but you'll never read it without help:
CLUE: The answer to everything is 42. Also, use DevTools to inspect CSS properties!
Bug #7: The Runaway Element
A purple box with important content should be here, but it ran away:
I'm way off to the right! Bring me back!
Bug #8: The Collapsed Container
An orange announcement box should be visible below:
CONGRATULATIONS! You've found all the bugs if you can read this!