![[CompleteGuide] To Make the Best Use of Chrome Developer Tools for Your Blog Improvement](https://media.mytechyard.com/2012/04/wplogo.jpg)
Most of the browsers which does support tabbed browsing, also come with interesting and useful tools for Web Developers. Of course, you can see the source code of any webpage and copy it, modify it and save as HTML page.
We were using Firefox tools to inspect element, and to analyse the HTML + CSS part of any
website that had decent readability. When We came across Chrome Developer tools, We did find
many differences compared to Flexibility and the features.
To explain the use of developer tools , We will explain a scenario. Your Blog or website has a
heading text. The font size, color etc are loaded from the CSS. You do not know which part of the
CSS it is loaded from. You you right click on the text and select “Inspect Element”
and you analyse the information that is displayed.
How Chrome Developer Tools are different?
Google Chrome provides the ultimate feature by displaying information
what exactly web developers need. Any developer / blogger can easily see this information,
and modify the values such as attributes of CSS , See the changes right there !
Finally once you are done and finalized with the changes you can easily make the same changes in the server control panel.
How to Start?
You can start exploring Chrome Developer Tools by right clicking on the segments (such as Text, Images, Video)
on any web page, and click on “Inspect Element”. You can also access it by Settings->Tools->Developer Tools.
Sections of Chrome Developer tools explained
Once you open the CDT(Chrome Developer Tools) , You will see the following tabs.
Elements : Gives the overview of the various objects , and elements of a webpage opened.
Displays a hierarchy tree, with various Divisions, tags of the web page. click on the tiny arrows
that are displayed to expand the node, and to view the sub elements. On the right hand side section,
You can see the Style data corresponding to the element selected.
Resources : Resources displays the images, cookies, databases and frame data related to the web page.
It is not of much use, as you cannot modify anything here.
Network : Gives the complete information on the request / response cycle of a web page.
It gives a bird eye view of the complete set of files and the data transferred from browser,
and the response from the server. Particularly helpful in analyzing the 404 errors from the server.
Scripts : Gives the overview of scripts related to the web page opened.
Timeline : Very useful tool tool to understand why a particular webpage is loading slow.
This displays gantt chart of the connecting, sending , waiting, and receiving times over the timeline.
If you hover over any bar, the complete information will be displayed in the popup.
This can be used to analyse the factors like
– Is the webpage is loading slow because of any image?
– How speed is each sections of a webpage is loading?
– How many files are loaded and which file is loading slow ?
Console : Console tells you about the errors related to a webpage. This is similar to any
console available in all most all the browsers.
We skip the other tabs as they are not of much importance in the developer point of view.
How to change the attributes of any webpage ?
You can trial-run your webpage by modifying the attributes of the webpage by adding
attributes to the CSS, Modifying the colors, Change the size of the image etc.
Once you are done and finalized with the changes, you can make the changes in the server files.
As an example we will change the background image of MyTechYard.
Refer to the image that is posted under “Elements”, As explained,
right hand side section displays the CSS data. In the color attribute, just double click.
A small color picker opens up, and you can choose and color of your choice.
We selected dark blue. The moment you pick the color, the web page looks something like this.
Also, we used it to change the font size of the heading text displayed.
Just to clarify, observe the image below , which is the magnified image of right hand side section of “Elements” .
All values are displayed along with the line numbers. Once you choose the value ,
this section automatically updates the hash code (for color) and font size values,
which you can directly put into the server files referring to the line number.
If you need any clarification, kindly post your comments below. We will be glad to update this post.
![[Workaround] To Change Your Gmail Username](https://media.mytechyard.com/2012/04/gmail_logo.png){kind=logo}
![[HowTo] Send Email Attachments directly to DropBox](https://media.mytechyard.com/2013/08/DropboxLogo.jpg)
Elaborate and Educative post 🙂 Thanks
Thanks!