Learning and studding web designing is very easy task in modern context, because thousands of tutorials are available in the World Wide Web and design of any web site is implicitly open source. It is not secret, when we found some beautiful web page, any web designer like to know how they manage HTML, CSS, JavaScript and other technologies to make such an amazing design. If it is the case simply we can right click on the browser and select view source in the menu to access the designing source of the web page, as I used to do. Although source is in front of us, it is not an easy task understand line by line how it works. If page has rich content and hundreds of lines JavaScript, the case will be worse.
However, favorite browser Google chrome has come up with inbuilt feature to address to above problem of developers. This new feature is called developer tool and it allows user to explore CSS design, JavaScript and other resources related to each element of the DOM separately. Only thing you have to do is right click on the element that you want to explore and select Inspect Element from menu. Then browser window will be divided in to two parts horizontally and top part will be allocated for displaying web page while bottom one displays chrome developers tool. Here now you can see HTML code of the above page with the highlighted tag. This highlighted one is tag of the element which you right click to select Inspect Element and you can see that element also has highlighted on the web page. Likewise you can explore any element of the page by using Inspect Element of right click menu.
After open developer tools, you can explore each tag of the HTML document by clicking on it. When you move mouse courser on each tag you can see corresponding element has highlighted on the web page. When you select tag, related CSS rules can be seen one right side pane of developer tools section. These CSS rules also have divided to several groups like Styles, Matched CSS rules and inherited CSS rules from parent tags. At bottom of the pane there is tab called metrics. If you expand this tab you can see CSS box model of the element with the measurements. Therefore, it is very easy to understand what is going on the design.
If you want to study script part of the page, simply click Script tab on the top of the developer tool and then you can see client side script of the page. Although usually at the beginning it is almost mess, you can format it by clicking { } icon on the bottom of the page. This feature is called pretty print and after formatting code by using this it’s very clear and easy to understand unless code is obfuscated.
These are only few features of the chrome developer tool offer to you and I think it is easily find others by yourself.
