In this Chrome Developer Tools tutorial, I’ll show you the basic features, where everything is located, and the most important tools you should know about. See exactly how I use DevTools for CSS tweaks, troubleshooting, and development.
I constantly use DevtTools in my workflow, and it has so many different use cases:
• Reverse-engineer a design from another website
• Troubleshoot a CSS problem on my own sites
• Temporarily disable CSS styles
• Plan a new CSS design in real-time
Here’s what we’ll cover in this video:
0:00 – Intro
0:25 – How to Open Chrome DevTools Panel
0:56 – Repositioning the Panel
1:32 – Changing text size of DevTools
1:43 – Basic Overview (where everything is located)
2:56 – Writing new CSS Rules
4:48 – Toggling CSS styles
5:23- The Computed Tab (important features)
6:32 – Targeting Mode
7:41 – Editing HTML source code
8:42 – Toggling Element State (:Hover)
10:00 – Responsive Mode (screen size preview)
10:43 – Outro and next steps
#css #devtools #chrome
source