Developer Tools in Google Chrome

Google has introduce a developer tools in Chrome Browser.It makes the web developer to trace the website behavior from each and every corner of web pages.As a web developer should know how to make use developer tools in chrome browser.It is easy to use and very powerful too.

HOW TO GO DEVELOPER TOOL

Now Click on the top right side of Spanner Symbol ->Tool ->Developer Tools

(OR)

Shortcut Key Ctrl + Shift + I

Every tabs as different functionality. We can see one by one

DEVELOPER TOOLS TAB FUNCTION

Elements 

This Tab used to see the HTML and CSS part of web pages.If you place over the cursor in particular tag it will show highlight the element in the HTML page.Here we can identify the tag and for style-sheets.

Resources

This Tab is used to what are all the documents get downloaded for webpage request. Eg: images,css,html,js and so on.Another advantage of the Resources tabs is it will show the cache and cookies stored in client side

Network 

Timeline can be shown in this Tab.How much time to get the document from server and what is the response time.Important part of the Network tab is we can trace the AJAX function .you can see the lower bottom tab contains XHR.Click on that and you will get the ajax response if your web page contain ajax function.

For eg:

                Goto www.google.com and type something and hit search button..You will see a page getting downloaded from the server in developer tools.Now click on the left side of the particular page.you will see a header,response tabs in right side of the box.

Audit
Audit tab is used to review the page download. It has two option

• Audit Present State
• Reload Page and Audit on Load

Audit Present State - It will not load the present page and will check the errors.
Reload Page and Audit on Load - Page will get refresh and review the errors.

Those all the basic things where developer should know .