How to use Chrome developer tools

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)


chrome developer tools


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

This the best place for me, because i can test my developed CSS code without bothering to apply it on the web page and then test. Actually the resource tab is for seeing the files externally with the website, such as JavaScript, CSS, Fonts and images files which you can call resource for the website.

chrome developer tools resource

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.  

Network

As the name suggest, it's related to network. It shows you how your browser loaded the content and is the condition ok. I don't use it much but it's help for people who really need help with their network monitoring.

More other tabs

There are more other useful tabs in the chrome developer tool, which is very useful when you want it. You can discover more with the developer tool and even if you aren't a tech savvy person you can learn the basics of web development yourself and then basic is all you need to get to the next level.

Your feedback ?

This post was written to help people inspect their websites for better and fast development. Your feedback is important for us to improve our content and know more about how are we doing. You may drop your previous advice and thought in the comments.