Devtools - confusion when looking at code

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

  1. 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.
  2. It looks like there is hardly any html on a webpage and mostly other things
  3. 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??

One thing to bear in mind, particuarly when it comes to things like a confusing layout or strange classnames is that when it comes to lots of actual websites out there (let’s take Codecademy as an example) aren’t actually hand-written code, they may well use a framework or a tool to automate the generation of a page, sometimes leading to code that can be confusing as the actual built HTML/CSS may not be intended for actual veiwing/intetrpreting.

2 Likes

What Dev tools are used for depends on each person. Some people use it to look at the code of websites and see how the devs made it. Other people use it for making small quick edits to see how something will look before they put it in their IDE and if they are using Git before they commit the file. Also at least in Chrome dev tools, they take away white spaces. On Chrome, you can do ctrl + u to open a new tab with the source code of the site with whitespace. One downside is that you cant edit that code.

  1. <div> elements inside other divs are useful for a few things. 1. thing is that helps keep things organized. Such as possible on the CC home page. It has a div for your recent courses than another div for each course. Also, divs within other divs are used for CSS. You need that to use CSS grids and to target certain elements in 1 section but not others

1.1 I’m not sure what you are talking about can you share a picture?

  1. Depending on the site it might be only HTML and CSS but others use a lot of JS such as this forum.

  2. For class names I’m not sure why devs would make the names that. But that’s not the dev tools making those class names.

  3. For not knowing what CSS formats what HTML I semi agree with you. I normally use ctrl + f to find the element the CSS formats

Over time you will gain more knowledge and experience coding and reading code. So over time, you will understand everything and all the complex parts.

ok that is very interesting and illuminating.
Cheers

1 Like

Thank you very much for the detailed explanation.
I suppose I’ll just have to be patient…
Cheers

1 Like