Chrome is the best browser for any web developer like me, it's just all i want to discover new things online such as new designs and techniques to make the web better. So, today i will give some basic tips on using Chrome developer tools to understand your own website/blog structure better.
In most of the tutorial for blogger, it's straight that the selectors will be the same in all classic blogger templates and that CSS or JQuery can be used globally on any blogger blog and that might work well.
But when you are using a custom template for your blog or website then you don't know what selector to put the CSS or JQuery and that's frustrating, but ever wondered how we know what selector you must use on your blog for a particular CSS or JQuery ? Now it's clear that you know, it's Chrome developer Tools.
Chrome developer tool is one in all complete tool to understand the structure of a page and see the complete HTML. You also get to see what files are loaded with the site load and also you can monitor the network condition and how files are loaded. That's why i love using the Developer tools. Here is how it looks (opened for blog page)
Whenever you open it you will see some beautiful codes and i just love it !
In most of the tutorial for blogger, it's straight that the selectors will be the same in all classic blogger templates and that CSS or JQuery can be used globally on any blogger blog and that might work well.
But when you are using a custom template for your blog or website then you don't know what selector to put the CSS or JQuery and that's frustrating, but ever wondered how we know what selector you must use on your blog for a particular CSS or JQuery ? Now it's clear that you know, it's Chrome developer Tools.
Chrome developer tool is one in all complete tool to understand the structure of a page and see the complete HTML. You also get to see what files are loaded with the site load and also you can monitor the network condition and how files are loaded. That's why i love using the Developer tools. Here is how it looks (opened for blog page)
Whenever you open it you will see some beautiful codes and i just love it !
How to open it ?
When you want to experience better web developing with Developer tools then always use Chrome, browsers like Firefox also have their own developer tools inbuilt but not too effective.To access the developer tools in chrome, find a blank space or an element in the webpage and right click on it, you will see 'Inspect Element' in the menu (usually at bottom), click on it and you will get your developer tool opened. Now you will get the first feeling of a web developer.
Using it
You can't make use of the developer tools if you don't have any plan regarding it. But yet you can look at the structure of a website to know more about it. It's more than just source code of the website, you can edit the website by changing the HTML markup on the elements page and the changes are made in real time but the changes are only for you, editing the HTML markup doesn't mean that the changes will be made for everyone viewing the website. Not only HTML, but you can also apply CSS and JavaScript on site, it's useful for testing a code before you apply it on your web page.Elements
Elements tab shows you the elements of the webpage your inspecting in HTML and on right sidebar you will see the matched CSS rules on the element you are inspecting. You can edit the HTML by right clicking on the HTML markup and edit HTML or double any HTML line to change it.Resources
You can see that i am editing a CSS file in my website and that's how i test new CSS. If the website you are inspecting have a stylesheet file then you can edit it freely or add new CSS to it to test a CSS before you apply it.
Similar to the CSS file you can see JS, Fonts and images files too.
