Chrome dev tools.js

// Why chrome dev tools are used?
// 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.

// They are different dev tools:
// 1.Elements
// 2.sources
// 3.console
// 4.Network
// 5.Timeline
// 6.profiles
// 7.Audits
// 8.Resources.


// Elements:
// The Elements panel lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements.
//  You will often visit the Elements tabs when you need to identify the HTML snippet for some aspect of the page.
//  For example, you may be curious if an image has an HTML id attribute and what the value is.

// console:
// 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.
// You may log diagnostic information using methods provided by the Console API. 
// Such as console.log() or console.profile().

// You can evaluate expressions directly in the console and use the methods provided by the Command Line API. 
// These include $() command for selecting elements or profile() to start the CPU profiler.

// Network:
// The Network panel provides insights into resources that are requested and downloaded over the network in real time.
//  Identifying and addressing those requests taking longer than expected is an essential step in optimizing your page.

//  Audits:
//  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. 

// Timeline:
// The Timeline panel gives you a complete overview of where time is spent when loading and using your web app or page.
//  All events, from loading resources to parsing JavaScript, calculating styles, and repainting are plotted on a timeline.

// Profile:
// The Profiles panel lets you profile the execution time and memory usage of a web app or page.
//  These help you to understand where resources are being spent, and so help you to optimize your code. 
//  The provided profilers are:

// The CPU profiler shows where execution time is spent in your page's JavaScript functions.
// The Heap profiler shows memory distribution by your page's JavaScript objects and related DOM nodes.
// The JavaScript profile shows where execution time is spent in your scripts.

// Resources:
// 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.