files/fr/outils/dom_property_viewer/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

---
title: Visionneur de propriétés DOM
slug: Outils/DOM_Property_Viewer
tags:
  - DOM
  - Tools
  - Web Development
translation_of: Tools/DOM_Property_Viewer
---
<div>{{ToolsSidebar}}</div>

<div class="geckoVersionNote">Le visionneur de propriétés DOM est une des nouveautés de Firefox 48. Cet outil est désactivé par défaut. Pour l'utiliser, il faut l'activer dans les <a href="/fr/docs/Tools_Toolbox#Settings">options des outils de développement</a>.</div>

<p>Le visionneur de propriétés DOM permet d'inspecter les propriétés {{Glossary("DOM")}} en tant qu'arbre extensible. Cet arbre commence à partir de l'objet {{domxref("window")}} de la page actuelle ou de <a href="/fr/docs/tools/Working_with_iframes">l'iframe sélectionné</a>.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13098/DOM%20Inspector.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 843px;"></p>

<h2 id="Activer_le_visionneur_de_propriétés_DOM">Activer le visionneur de propriétés DOM</h2>

<p>Cet outil n'est pas activé par défaut. Pour l'activer, il faut ouvrir les <a href="/fr/docs/Tools/Tools_Toolbox#Settings">options des outils de développement</a> et cocher la case "DOM" dans la catégorie "Outils de développement par défaut".</p>

<h2 id="Ouvrir_le_visionneur_de_propriétés_DOM">Ouvrir le visionneur de propriétés DOM</h2>

<p>Une fois l'outil activé, il est possible de l'ouvrir en sélectionnant l'onglet "DOM" depuis le menu développement du menu de Firefox (ou du menu Outils sous macOS).  Il est également possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>W</kbd>.</p>

<p>La <a href="/fr/docs/Tools/DevTools_Window">Boite à outils</a> apparaitra en bas du navigateur avec le visionneur de propriétés DOM activé. L'onglet s'appelle juste "DOM".</p>

<h2 id="L'interface_du_visionneur_de_propriétés_DOM">L'interface du visionneur de propriétés DOM</h2>

<h3 id="Arbre_DOM">Arbre DOM</h3>

<p>Les différentes propriétés du DOM sont affichées sous la forme d'un arbre extensible. La partie gauche affiche le nom des propriétés, tandis que la partie droite leur valeur. La valeur n'affiche au maximum que trois propriétés d'un objet ou trois propriétés d'un tableau. Si une propriété a plus de trois éléments, une annotation "...more" est ajoutée à la fin. Si une propriété n'est pas éditable, une icône de cadenas est ajoutée.</p>

<h3 id="Actualiser_l'affichage">Actualiser l'affichage</h3>

<p>Si le DOM change, il est possible d'appuyer sur le bouton "Actualiser" actualisera l'affichage :</p>

<p><img alt="Button to update the DOM Inspector display" src="https://mdn.mozillademos.org/files/13102/DOM%20Inspector%20Refresh%20button.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 852px;"></p>

<h3 id="Filtrage">Filtrage</h3>

<p>Il y a un barre de recherche dans la barre d'outils :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13100/DOM%20Inspector%20search%20box.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 851px;"></p>

<p>Cela filtre l'arbre pour n'afficher que les éléments qui correspondent à la recherche. Les éléments qui correspondent sont les éléments dont le nom est contenu dans la recherche. La correspondance est sensible à la case.</p>