Moving @pankajparashar's comments on #105 to a new issue as I prepare to close that PR. I want to keep these comments as they make sense to review while continuing to work on guides:
I liked the idea of using skeleton illustrations to explain the increasingly complex UI of DevTools. Perhaps this could be a theme throughout the guide, where we explain features through visual representation. Of course it will take a lot of work to produce such a guide. I always dreamed of an "interactive" guide but not sure if that is even possible.
We definitely need some standard nomenclatures to refer to different parts of the DevTools UI. Most of which you have already covered here. It's easy for people to get confused between panel vs pane, tab vs drawer etc., I know that Edge docs tends to refer "Network", "Console" as tools whereas other browser docs refer them as tabs (or panels).
I particularly admire your writing style which is very personal, as if you are speaking directly with the reader and is a great way to connect with the reader. I'm interested in seeing how the guide will handle cross-browser differences in the DevTools UI. Similar features are named differently or represented differently across different browsers.
Would be good to understand how to strike a balance between a general guide vs a detailed documentation of a feature? At what point the beginner stops reading the guide and becomes comfortable enough to read the official docs? I imagine the end goal is not to replace the docs but to provide an entry point to the amateur web developers to become comfortable enough with the DevTools UI.
Moving @pankajparashar's comments on #105 to a new issue as I prepare to close that PR. I want to keep these comments as they make sense to review while continuing to work on guides:
I liked the idea of using skeleton illustrations to explain the increasingly complex UI of DevTools. Perhaps this could be a theme throughout the guide, where we explain features through visual representation. Of course it will take a lot of work to produce such a guide. I always dreamed of an "interactive" guide but not sure if that is even possible.
We definitely need some standard nomenclatures to refer to different parts of the DevTools UI. Most of which you have already covered here. It's easy for people to get confused between panel vs pane, tab vs drawer etc., I know that Edge docs tends to refer "Network", "Console" as tools whereas other browser docs refer them as tabs (or panels).
I particularly admire your writing style which is very personal, as if you are speaking directly with the reader and is a great way to connect with the reader. I'm interested in seeing how the guide will handle cross-browser differences in the DevTools UI. Similar features are named differently or represented differently across different browsers.
Would be good to understand how to strike a balance between a general guide vs a detailed documentation of a feature? At what point the beginner stops reading the guide and becomes comfortable enough to read the official docs? I imagine the end goal is not to replace the docs but to provide an entry point to the amateur web developers to become comfortable enough with the DevTools UI.