🛠️ Exercise 1: Workspaces
Let's become a DevTools wizard with Workspaces! 🧙♂️
- Open Chrome DevTools (F12) ✨
- Navigate to Sources panel 🎩
- Download these 3 magical files and store them in your secret folder 📂 (right-click on the file and save as...)
- Right-click the sidebar "workspace" 🗄️
- Choose "Add folder to workspace" and selete your secret folder 📂
- When Browser asks for permission, say "Yes!" (Don't worry, it won't steal your cookies! 🍪)
- Edit the files through DevTools and watch it save automagically! ✨
- Important: To see the edited HTML file, open the file in a new tab (you can right click on it and copy the file link 🔗
- Remove this workspace ⛔
🎯 Exercise 2: Local Overrides via Overrides tab
Time for some override shenanigans! 🎨
- Find the "Overrides" tab (it's hiding in Sources)
- Select folder for overrides
- Edit this css style via the Element Style tab and see the css file updated
- Go back to the "Overrides" tab and see your changes
- Refresh the page (F5) 🔄, see that you changes are still there
- Open the "Changes" tool, see your changes also there
- Edit the index.js file, update the collors there and save it. (Give this page a funky background color... go wild! 🌈)
- Refresh the page (F5) 🔄
- Refresh again - your masterpiece lives on! 🎉
- Try to edit the index.html file in the source page tab and save it
- Refresh the page (F5) 🔄
- Refresh again - and again and again... your masterpiece lives on! 🎉
- Delete the override folder ⛔
Practice Area: Try modifying this box's styles!
🌍 Exercise 3: Local Overrides via right-click on a file
Time for some override shenanigans! 🎨
- Pick a file to override in the page tab (choose wisely! 🧠) - (right-click on the file and override...)
- Edit and save it
- Refresh the page (F5 for the win! 🔄)
- Refresh again - your masterpiece lives on! 🎉
- Don't forget, you can open the "Changes" tool and see all your changes
- Delete the override folder ⛔
Practice Area: Try modifying this box's styles!