The Chrome Developer Tools are nothing but a set of web authoring and debugging tools that have been put together into the Google Chrome browser. These tools are important as they offer web developers in depth access to see the inside of the browsers and their web application as well as they offer greater insights for code optimization.

Let us quickly have a look at 9 most important Chrome Developer Tools that each and every developer must be aware of and make good use of these tools for code optimization and performance.

1. JavaScript Console: The JavaScript Console has two basic functions of logging diagnostic information such as JS error messages in the development process and secondly provision of a Shell prompt that can interact with the document and Developer Tools which includes evaluating expressions and invoking the debugger. It is most useful when testing an API that is being developed.

You can log diagnostic information with methods provided by the JS Console API. i.e. console.log() or console.profile().

To invoke the JS Console from the Developer Tools navigation bar just click Console, or use the Shortcut Ctrl+Shift+J.
2. Pagespeed insights: Initially a standalone product but now it is a part of Google Chrome Developer Tools. With PageSpeed Insights you can discover new and innovative ways to make your website quicker than before and more device-friendly. It is a bit redundant and has similar features to other tools such as Audits.

PageSpeed Insights first analyzes the content of a web page, and then generates suggestions to make that page faster. It considers only the network-independent aspects of page performance: Implementing the suggestions can improve the relative performance of the page.

You can click on rule names, and drill down to additional information and implement changes.
3. Audit: Audit is one of the most useful tools for finding unused CSS styles. It is free and is part of Google Chrome. It is one great tool if you are looking for suggestions to improve the performance of a Web page in Chrome. The Audit panel can analyze the content on a web page as it loads. It then provides suggestions and optimizations for decreasing page load time and increase responsiveness.
4. Network: The Network panel provides insights into resources which are requested and downloaded over the network. It records information about each network operation in web applications, including detailed timing data, HTTP request and response headers, cookies, WebSocket data, etc. Identifying and addressing these requests taking longer than expected is an essential step in optimizing a web page. The page continues to update on its own while you see it. You’ll see fewer requests if you enable the cache option. There are many options to filter what you see. This helps in drilling down on specific items that may be causing major delays.

The Network panel automatically records all network activity while Developer Tools is open. Load the page to start recording, or simply wait for network activity to occur in your application.

You can save the data from a network recording as a HAR (HTTP Archive) file, or copy the records as a HAR data structure to your clipboard
5. Yslow: YSlow tool is a very useful Chrome extension that analyzes web pages and the reason why they are slow based on based on Yahoo!’s rules for high performance web sites. The analysis is based on 23 testable rules, out of the 34 total rules, for Web page performance by Yahoo.

YSlow tool is much similar to PageSpeed Insights. It provides grades for each test ranging from A to F. It provides suggestions but not all are to be considered as is, you have the option to choose according to suggestions that are relevant. YSlow summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis.

YSlow is available for many other environments other than Chrome, and its source code can be cloned or forked from GitHub.
6. Profiles: The Profiles panel allows you to see the execution time and memory usage of a web application or a web page. These help you to understand where resources are being spent, and so help you to optimize your code. The provided profilers are:
- CPU profiler – shows where execution time is spent in your page’s JavaScript functions.
- Heap profiler – shows memory distribution by your page’s JavaScript objects and related DOM nodes.
- JavaScript profiler – shows where execution time is spent in scripts
7. Resources: The Resources panel allows you to inspect resources that are loaded in the inspected page. It lets you interact with HTML5 Database, Local Storage, Cookies, AppCache, etc.and allows to figure out how a page works and what it happening on it. You can also quickly inspect the application’s visual resources, including images, fonts, and stylesheets. The top level category of page resources are the document’s frames, which includes the main document, and its embedded frames.
8. Device Emulation: Just like Safari even Chrome can emulate mobile devices for testing responsive web page designs. It includes generating touch events from a mouse. The Device panel has several presets for mobile devices such as iPhones, iPads, Kindles, Nexus tablets, Samsung Galaxy phones, etc. Choosing one will define relevant defaults in the panels.

Device emulation comes in handy for quick mobile testing; Chrome’s Emulation mode is much easier than switching to a real smartphone or tablet and you’ll have access to all the developer tools which could in turn save hours of testing effort.

To enable mobile emulation, click the smartphone device icon in the Developer Tools navigation bar.
9. Firebug Lite: Firefox was widely used before Chrome came in. Developers preferred Firefox as it used the Firebug debugger. Today a subset of Firebug that is Firebug Lite can also be installed on Chrome. DOM explorer is a great feature that it has. Most of the other features have been duplicated by Developer Tools.

Conclusion:

Chrome Developer Tools are clean and very easy to use and navigate through. Rapid debugging is possible via the built in Console. For quick style changes, you don’t need an editor. You can inspect the element to find which styles are being applied and modify the required styles on the fly within the browser. You can also manipulate the DOM directly by adding/changing page elements.

browser tools

9 Chrome tools every developer needs