Teach me one browser developer tools workflow
Teaches one practical browser developer tools workflow for a problem you name, in short steps with a way to check you did it right.
Task:
Teach me one workflow in my browser's developer tools for finding out [the problem I want to solve].
Context:
I use [browser] on [operating system] and I am [a designer, a beginner developer or a tester]. The page I practice on is [my own page or a practice page].
Rules:
- Walk through at most 7 numbered steps, each one an action and what I should see afterwards.
- Name the panel or tab in each step by its common name, and say that menu names can differ between browser versions.
- Add one common mistake for this workflow and how to notice it.
- Tell me to practice on my own pages or a practice page and not to change settings on sites I do not own.
- End with a small exercise I can finish in 10 minutes.
Result:
The numbered steps, one line on the common mistake, and the exercise in at most 3 sentences.