The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

A modern web browser owned and maintained by Google.

chrome

In this course we’ll take a deep look at the Elements panel in the chrome devtools. We’ll step through each button and tab on this panel and discuss how to use them to interact with your web application as it runs.

Learn how to use the Inspect Elements panel in Chrome DevTools and how it differs from viewing the source of the HTML you're looking at. 

Chrome Devtools: Elements - Inspect Elements vs View Source

Learn how to use the Elements panel in chrome devtools to make structural changes to the DOM as it runs - you can explore what your site would look like with different elements and attribute values, all without polluting your source code.

Chrome Devtools: Elements - Make Changes in Your Browser

Learn to use the Style panel within the Element Inspector to examine and tweak the CSS rules applied to your application as it runs. 

Chrome Devtools: Elements - Debug with Style!

The Element Inspector in Chrome DevTools offers powerful integration with the console - learn how to programmatically navigate your selected element, how to search through the history and use CSS selectors to control what you're looking at and how to quickly and easily listen for events as you debug your application.

Chrome Devtools: Elements - Console Integration

Use the Event Listeners tab within the Elements panel to list all DOM Event listeners. This is useful to understand how and why your site is reacting to various forms of input.

Understand the Event Listeners Panel

The Elements panel includes a tool to show you how your site will look across a variety of devices. This can be tremendously helpful when troubleshooting layout issues on specific hardware that you don’t have access to, as well as general-purpose response design. You can mock different screen resolutions and behaviors to help put you into your users’ shoes.

Use the Device Toolbar to Emulate Different Screens

There are a variety of ways to trigger the javascript debugger. Use the elements panel to set breakpoints on DOM elements so that you can hit the debugger whenever an element’s children or attributes change, or when it’s removed.

Debug the DOM in Chrome with the Devtools Elements Panel

mykola bilokonsky

Course Content