I started working with the DevTools and I find it really hard to use as a learning tool.
So I know DevTools is supposed to help me understand how a website is built, but experientially it only confuses me.
Some of the difficulties I have are
- The structure of the page is very often not clear(to me as a beginner) - very often it is div inside div inside div etc
1.1 when you hover above parts of the page sometimes there are transparent blue patches with no apparent function. Or dashed lines around small icons which also seem to serve no purpose.
- It looks like there is hardly any html on a webpage and mostly other things
- very often class names are something like
class="e151iuzl0 gamut-9k1sba-VariableProvider-GlobalPageWrapper-AppWrapper e1skjn880"which means very little
Also when looking at the css of the page - its not any simple to learn what css rules belong to the element I inspect
So there is no real question here - just asking for people’s insight and experience.
The discrepancy between the simplicity of my code (I am a beginner) and the complexity of the code I see on the web makes me wonder how will I ever manage to get to such complexities??