Example 1 - Page Inspector

We can do a lot with the inspector! Try to check with the inspector this element for example.

Try editing some of your DOM now. Double-click an element, or right-click it and choose Edit as HTML from the context menu. You can make any changes you'd like, but you cannot save your changes.

We have some CSS inline applied here! Can you use CSS editor to change it?

By default, the CSS editor (in the right corner of the devtools) displays the CSS rules applied to the currently selected element.

And what about this element? We are using CSS classes here, try to change something and see what happens to all the elements with the class.

You can learn more about the Page Inspector in this MDN article.