Google Chrome Developer tools

The Chrome Developer Tools is a debugging tool built into Google Chrome Browser. The DevTools provide the user deep access into the internals of the browser and their web application.

Accessing the DevTools:

To access the DevTools, open a web page or web app in Google Chrome. Either:

Select the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools. Right-click any page element and select Inspect Element.

The DevTools window will open at the bottom of your Chrome browser.

Inspecting the DOM:

The Elemets panel lets you see everything in one DOM tree, and allows inspection of DOM elements. You will often visit the Elements tabs when you need to identify the HTML snippet for some aspect of the page.

 

DOM:

The DOM tree view displays the DOM structure of the current web page. The DOM tree is a tree of DOM nodes that represent individual HTML elements, such as <body> and <p>. For ease of reading, the DOM tree view displays the HTML element tags instead of the DOM node types: for example, <p> instead ofHTMLParagraphElement.

Inspecting elements:
There are several ways to inspect an element:
• Right-click any element on the page the page and select Inspect Element.
• Click the Inspect Element button at the top of the DevTools window to go into Inspect Element Mode, then click an element.

Working with the Console:
The JavaScript Console provides two primary functions for the user 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()

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.