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
47
48
49
50
51
52
53
54
55
56
57
58
59
|
---
title: FAQ de l'Inspecteur DOM
slug: Inspecteur_DOM/DOM_Inspector_FAQ
tags:
- DOM_Inspector
translation_of: Tools/Add-ons/DOM_Inspector/DOM_Inspector_FAQ
---
<div>{{ToolsSidebar}}</div><div class="note">
<p>Cet outil est un module complémentaire pour les applications basées sur XUL comme Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documentation pour <a href="/fr/docs/Tools/Page_Inspector">L'Inspecteur</a>.</p>
</div>
<h2 id="Comment_faire_pour_inspecter_une_pagefenêtre_web">Comment faire pour inspecter une page/fenêtre web ?</h2>
<p>Le menu "File" permet différentes manières d'inspecter un document :</p>
<dl>
<dt>Inspect Content Document</dt>
<dd>Inspecte un contenu non privilégié présent dans l'onglet choisi.</dd>
<dt>Inspect Chrome Document</dt>
<dd>Inspecte une application chrome. Cela inclut les fenêtres XUL ouvertes.</dd>
<dt>Inspect a URL</dt>
<dd>Cela sélectionne simplement la barre d'adresse de l'Inspecteur DOM. Cette barre d'adresse permet d'inspecter les documents qui peuvent être accédés via une URL. Inspecter une URL a pour effet de charger le document de correspondant à cette URL dans le panneau "Browser". Cela peut inclure des documents chrome. Il n'est cependant pas recommandé d'inspecter des documents XUL directement via URL, car certains comportements du document peuvent dépendre du fait que le document doit être contenu dans un autre document XUL. À la place, il est recommandé de charger le document XUL normalement (en utilisant des commandes ou en ouvrant des fenêtres dans l'application utilisée), puis de trouver et de l'inspecter grâce au menu "<strong>Inspect Chrome Document"</strong>.</dd>
</dl>
<h2 id="Pourquoi_certains_nœuds_dans_le_panneau_DOM_nodes_apparaissent_en_rouge">Pourquoi certains nœuds dans le panneau "DOM nodes" apparaissent en rouge ?</h2>
<p>Ces nœuds sont des <a href="/fr/XBL/XBL_1.0_Reference#Anonymous_Content" title="en/XBL/XBL_1.0_Reference#Anonymous_Content">nœuds à contenu anonyme</a>. Cela veut dire qu'ils ne sont pas dans le DOM généré par le document d’origine.</p>
<h2 id="Comment_faire_pour_cacher_ces_nœuds_anonymes">Comment faire pour cacher ces nœuds anonymes ?</h2>
<p>Il est possible de cacher les nœuds anonymes dans l'inspecteur en décochant l'option <strong>"Show Anonymous Content"</strong> dans le menu menu <strong>"View"</strong>.</p>
<h2 id="Il_y_beaucoup_de_nœuds_text_vides_que_je_ne_vois_pas_dans_le_document_d'origine._Que_sont-ils_pourquoi_sont_ils_là_et_comment_s'en_débarrasser">Il y beaucoup de nœuds #text vides que je ne vois pas dans le document d'origine. Que sont-ils, pourquoi sont ils là et comment s'en débarrasser ?</h2>
<p>Ces nœuds sont actuellement les sauts de ligne et l'espacement entre les éléments. Une longue discussion sur pourquoi ces nœuds sont présent est disponible dans le {{ Bug(26179) }}.</p>
<p>En revanche, il est possible de cacher ces <a href="/fr/Whitespace_in_the_DOM" title="en/Whitespace_in_the_DOM">nœuds d'espaces</a> dans l'inspecteur en décochant l'option<strong> "Show Whitespace Nodes</strong>" dans le menu <strong>"View"</strong>. Il est à noter que certains nœuds de texte vide ne seront pas cachés. Ces nœuds ont en effet une propriété CSS <code><a class="external" href="http://www.w3.org/TR/CSS21/text.html#propdef-white-space">white-space</a></code> qui empêche l'agent utilisateur de réduire les séquences d'espaces, et ne sont donc pas cachés.</p>
<h2 id="Il_est_parfois_difficile_de_trouver_un_nœud_en_particulier_dans_l'arbre_DOM._Existe-t-il_une_manière_plus_rapide_pour_le_trouver_et_naviguer_dans_l'arbre">Il est parfois difficile de trouver un nœud en particulier dans l'arbre DOM. Existe-t-il une manière plus rapide pour le trouver et naviguer dans l'arbre ?</h2>
<p>Bien sûr. Il est possible d'effectuer une recherche basée sur le nom du nœud, sur son id, ou même sur un attribut/paire de valeur. Pour effectuer une recherche il faut cliquer sur<strong> "Find Nodes..." </strong>dans le menu <strong>"Edit"</strong> (ou utiliser le raccourci Ctrl+f). Une fenêtre dans laquelle il est possible de rentrer les critères de la recherche apparaitra alors. La recherche de l'Inspecteur DOM utilise les<a href="/fr/JavaScript/Reference/Global_Objects/RegExp" title="en/Core_JavaScript_1.5 Reference/Global_Objects/RegExp"> RegExps JavaScript</a> pour trouver les nœuds et fera de la correspondance partielle automatiquement. Ainsi, faire une recherche avec l'expression "tab" retournera des résultats pour <a href="/fr/XUL/tabpanel" title="en/XUL/tabpanel">tabpanel</a> et <a href="/fr/XUL/tabbox" title="en/XUL/tabbox">tabbox</a> en plus de <a href="/fr/XUL/tab" title="en/XUL/tab">tab</a>. pour limiter la recherche, il est possible d'utiliser les marqueurs de début (^) et de fin ($) de chaîne de caractère. Ainsi, rechercher "^tab$" retournera uniquement les nœuds dont les noms sont <em>exactement</em> "tab".</p>
<p>Il est également possible dans le cas d'un manque total d'information sur le noeud, d'essayer de le sélectionner en cliquant dessus. Pour cela, il faut trouver le nœud dans la page puis le sélectionner grâce au bouton "inspect by clickling" de la barre d'outils. Le menu <strong>"Edit"</strong> inclut également une option <strong>"Select Element by Click"</strong>.</p>
<h2 id="Comment_inspecter_les_pseudo-classes_et_les_pseudo-éléments_dans_la_vue_des_règles_CSS">Comment inspecter les pseudo-classes et les pseudo-éléments dans la vue des règles CSS ?</h2>
<p>L'Inspecteur DOM permet de forcer les pseudo-classes <a href="/fr/CSS/:hover" title="CSS/:hover">:hover</a>, <a href="/fr/CSS/:active" title="en/CSS/:active">:active</a>, et <a href="/fr/CSS/:focus" title="en/CSS/:focus">:focus</a> à s'appliquer sur un nœud donné. Pour ce faire, il faut depuis le panneau des nœuds DOM, sélectionner le nœud et faire apparaître le menu contextuel (clic droit sur le nœud). Dans ce menu, il faut cliquer sur l'option <strong>Set Pseudo-classes</strong> qui permet d'appliquer les pseudo-classes mentionnées ci-dessus.</p>
<p>Il n'y a actuellement aucun moyen d'inspecter les règles appliquées dynamiquement pour d'autres pseudo-classes ou pseudo-éléments en utilisant l'interface de l'Inspecteur DOM. Il est en revanche possible de trouver n'importe quelle règle (afin de la modifier) dans sa feuille de style parente en utilisant le <strong>"Style Sheets viewer"</strong> dans le panneau document, puis de la localiser dans le <strong>"CSS Rules viewer"</strong> du panneau <strong>"object".</strong></p>
<div class="originaldocinfo">
<h2 id="Informations_sur_le_document_d'origine">Informations sur le document d'origine</h2>
<ul>
<li>Autheur(s) : Christopher Aillon</li>
<li>Dernière mise à jour: November 11, 2003</li>
<li>Informations de copyright : Des portions de contenu sont © 1998–2007 par des contributeurs mozilla.org individuels. Le contenu est disponible sous licence Creative Commons | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Détails</a>.</li>
</ul>
</div>
|
