Quantcast

Google Chrome Developer Tools How to Use It?

Google Chrome Developers Tools How to Use It?

With a view to help developers, Google Chrome has provided different developer tools that will make them easy to pierce into the internal systems of the browser along with their application. It has many useful and most popular features. Through the developers’ tools window, you will find some developers’ tools at the top of the window organized in task-oriented groups that will let you to work in a specific page. Before utilizing the advantages of such Google Chrome developers’ tools, it is necessary to know about them.

Elements

At the top-first, you will be seeing a panel titles ‘Elements’ and the main function of this tool is to let you to read everything in one DOM tree. Here, you can inspect and edit the DOM elements. To identify HTML snippet, this tools will help you a lot. This is the tool useful to view source of a page too. You will be able to clearly read the HTML elements along with their ancestry and descendants.

Elements Panel in Google Chrome Developer Tools

Elements Panel in Google Chrome Developer Tools

Resources

As a developer, you will need to inspect resources loaded in an inspected page. The Resources tool will let you to interact with AppCache, Local Storage, HTML 5 Database, Cookies etc. You need to local data sources from your application and these data sources are Web SQL databases, IndexedDB, local and session storage, Application Cache and cookies. Through this, the application’s visual resources such as style sheet, images and fonts can be inspected.

Resources Panel in Google Chrome Developer Tools

Resources Panel in Google Chrome Developer Tools

Network

In real time, there are many downloaded and requested resources over the network and this panel ‘Network’ will allow the developer to have insights into such resources. The panel records every information of operation from each network in your application such as WebSocket data, HTTP request, response header, timing data etc and with this, you will be able to know about the resources having slowest time to first byte, resources who took longest time to load, something that initiated a network request and etc.

Network Panel in Google Chrome Developer Tools

Network Panel in Google Chrome Developer Tools

 

You Might be Also Interested In Reading : 7 Enhancing Google Chrome Extensions for your Daily Workflow

 

Sources (Scripts)

Developers are in need of powerful debugging tools that will help them in discovering reasons behind an issue and require prompt fixation and these issues increases with the complexity of JavaScript application increases. It also provides graphical interface to the V8 debugger.

Sources Panel in Google Chrome Developer Tools

Sources Panel in Google Chrome Developer Tools

Timeline

As a developer, you need to know the time taken by something when loading your web application or page. Timeline plots all events from calculating styles, repainting, loading resources to parsing JavaScript.

Timeline Panel in Google Chrome Developer Tools

Timeline Panel in Google Chrome Developer Tools

Profiles

Profiling the execution time and the memory usage of a web app or page is important and for this, ‘Panel’ tool does it all. It includes profilers such as JavaScript profiler, Heap profiler and CPU profiler and helps to understand the time where the resources are being spent. It also helps to optimize the code.

Profiles Panel in Google Chrome Developer Tools

Profiles Panel in Google Chrome Developer Tools

Audit

Audit is yet another useful Google Chrome Developers’ tool as it is used in analyzing a page for loading. When you load a page, this tool analyses it and suggests you for further recommendation like decreasing some time for loading page and is helpful  so as to increase real responsiveness.

Audit Panel in Google Chrome Developer Tools

Audit Panel in Google Chrome Developer Tools

Console

The console is an important developer tool as it has two primary functions for testing web pages and applications and i.e. it provides a place to log diagnostic information with the help of different methods provided by the Console API. Proiles Panel in Google Chrome Developer Tools.

Console Panel in Google Chrome Developer Tools

Console Panel in Google Chrome Developer Tools

 

Hope the information on Google Chrome Developers Tools helpful to you.

Saikrishna is a student of Computer Science & Engineering and he is also a part time blogger who also blog at TSKSOFT. Started blogging in 2010 for fun and later its became a profession, helping co-bloggers and sharing the knowledge to everyone from what he learned.
About Saikrishna Tipparapu

Saikrishna is a student of Computer Science & Engineering and he is also a part time blogger who also blog at TSKSOFT. Started blogging in 2010 for fun and later its became a profession, helping co-bloggers and sharing the knowledge to everyone from what he learned.

Comments

  1. Elements section is one thing I use very frequently. Although I’m not a web designer I try to tweak and test different parts of my website and this tool is the perfect way to find more details about any element in your page.

  2. Not really a fan on tools and stuff but that doesn’t mean I don’t want to learn a thing or two about it. The knowledge for using this tool may become handy in the future. Thanks for sharing this informative post about Google Chrome developer tools.

Leave a Reply to Nishadha@Creately Cancel reply

*

error: Content is protected !!
Read previous post:
Laptops of 2013
Top 13 Laptops to Buy in 2013

Technology is fast growing and the birth of newest technologies continuously hit the technological market every day. A newest device...

Close