To gain a comprehensive working knowledge of the Devtools, one should start by reading the documents provided by Google. Hopefully, minimally, you already knew this. The Chrome developer tools provide a rich set of tools for doing web development.
Now click the Magnifying Glass icon in the lower left corner of Chrome. Open this demo page inside Google Chrome on desktop and then press Ctrl + Shift + I on the keyboard (or Cmd + Shift + I on the Mac) to open Chrome Dev Tools.
You’ll learn how to dive into recommendations from PageSpeed Insights and the Timeline view of Google Chrome’s Developer Tools to find the data you need to achieve. The Chrome version was released in late June 2015 and is growing quickly. Press CTRL+SHIFT+C (for Windows) and CMD+SHIFT+C (for iOS) on your keyboard. Chrome Developer Tools, or Chrome DevTools for short, allow users to fix issues in their code without leaving the active tab.