• 8 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 17/12/2018

Elements

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Let's move past devices and simulations, and dive into the nine tabs seen in this menu. We'll first tackle the first tab of the Google Chrome developer tools, and my personal favorite: Elements

Elements in the toolbar
Elements in the toolbar

Learning how to inspect elements and having it become a mindless part of your workflow will change your life as a developer. Inspecting an element within the developer tools is like having an intricate map just of your webpage. You'll better understand your page layouts, elements themselves, and what your browser is interpreting when it receives HTML and CSS.

The magic workflow is this:

  1. Right-click the element you want to know more about.

  2. Click "Inspect."

Do this with a variety of elements on the test page! You can even try it on some live websites. Do it once, twice, 10 times. You should practice doing this until it becomes second nature.

As we have already seen, by inspecting the item, we arrive on the Elements screen with a focus on the element that we wanted to inspect: the title.

Inspect element

Let's see what we can do with this "inspected" title!

HTML

Title highlighted in the HTML
Title highlighted in the HTML

You have many options for interacting with the HTML in your page. Take the highlighted h1, for example. If you double click on either the tags or the contents ("Title"), you'll have the ability to modify them!

For even more options, right click the element to access this menu of options.

Right-clicked HTML options
Right-clicked HTML options

 I personally use "Edit as HTML" all the time. This lets you modify your element's HTML however you like! You simply have a text box with the current contents inside, and it's up to you to do whatever you want next with it.

Modify an element's HTML
Modify an element's HTML

Try performing some intuitive operations on the elements. You can select an element and:

  • hit the delete key

  • drag it around in the markup

  • fold up its contents 

CSS

One half of inspecting elements is getting access to cool HTML stuff. On the other side, you'll see the CSS view! I've expanded it in the image below.

CSS view of Elements tab
CSS view of Elements tab

You can see all the style rules associated with the selected element and where they're inherited from. You can even add style rules manually! Try to add a color: green; to the selected title, and see what happens. 

This pane also allows you check and uncheck current style rules. This is very helpful if you're not sure where a particular rule is coming from.

You'll also notice that, upon hovering, the title has orange, green, and blue colors that appear around it.

Element, padding, and margin colors
Element, padding, and margin colors

Colorful! These three colors represent spacing properties of the element. Scroll to the bottom right of the CSS tools section, and you'll see a more detailed diagram with precise pixel measurements.

Element, padding, border, and margin diagram
Element, padding, border, and margin diagram

DOM

Lastly, you should click on the Properties tab, over where you saw the style rules. You can see all the DOM (Document Object Model) related information about an element. This is helpful if you're a JavaScript developer in particular!

For example, I always have trouble calculating element relationships (children elements, etc). Luckily, in this Properties view, you can find out everything about elements' relationships to one another within the DOM tree.

Properties tab
Properties tab

There's plenty more to see in the Elements tab, but I recommend you take it for a spin yourself now!

Exemple de certificat de réussite
Exemple de certificat de réussite