Chrome DevTools Overview

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization.

Accessing the DevTools

To access the DevTools, open a web page or web app in Google Chrome. Either: 1. Select the Chrome menu Chrome Menu at the top-right of your browser window, then select Tools > Developer Tools. 2. Right-click on any page element and select Inspect Element. 3. Press F12 from your keyboard.

The DevTools window will open at the bottom of your Chrome browser. Some recent version of Chrome open the window to the right. This come in handy particularly when you want to test your sites responsivenes at different breaking points when using CSS media queries.

The DevTools window

The DevTools window contains different functions as a developer you will need. They include: 1. Elements 2. Resources 3. Network 4. Sources 5. Timeline 6. Profiles 7. Audits 8. Console

You can use the Ctrl+[ and Ctrl+] shortcuts to move between panels.

DevTools enable you to:

1. The Elements panel lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements.
2. The JavaScript Console provides two primary functions for developers testing web pages and applications. It is a place to:
   • Log diagnostic information in the development process.
   • A shell prompt which can be used to interact with the document and DevTools.
3. As the complexity of JavaScript applications increase, developers need powerful debugging tools to help quickly discover the cause of an issue and fix it efficiently.
4. The Network panel provides insights into resources that are requested and downloaded over the network in real time.
5. The Audit panel can analyze a page as it loads. Then provides suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness.
6. The Timeline panel gives you a complete overview of where time is spent when loading and using your web app or page.
7. The Profiles panel lets you profile the execution time and memory usage of a web app or page.
8. The Resources panel lets you inspect resources that are loaded in the inspected page. It lets you interact with HTML5 Database, Local Storage, Cookies, AppCache, etc.