blob: c9661034fb2ac2e4d45cb293f9af4a6dd6313cfc (
plain)
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
60
61
62
|
---
title: Inspecteur
slug: Tools/Page_Inspector
tags:
- CSS
- DOM
- Développement Web
- HTML
- Outils
- Styles
translation_of: Tools/Page_Inspector
original_slug: Outils/Inspecteur
---
<div>{{ToolsSidebar}}</div>
<p>L'inspecteur sert à examiner et modifier l'HTML et le CSS d'une page web.</p>
<p>Il est possible d'examiner des pages ouvertes dans un navigateur Firefox local, ou bien dans des cibles distantes, par exemple un navigateur Firefox pour Android. Voir la page <a href="/fr/docs/Tools/Remote_Debugging">débogage distant </a>pour apprendre comment connecter les outils de développement à une cible distante.</p>
<hr>
<h2 id="Visite_guidée_de_linterface_utilisateur">Visite guidée de l'interface utilisateur</h2>
<p>Pour vous repérer dans l’inspecteur, voici une courte <a href="/fr/docs/Tools/Page_Inspector/UI_Tour">visite guidée de l'interface utilisateur</a>.</p>
<p>Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du <a href="/fr/docs/Tools/Page_Inspector/3-pane_mode">mode à trois panneaux.</a></p>
<hr>
<h2 id="Comment">Comment ?</h2>
<p>Pour savoir ce qu'il est possible de faire avec l'inspecteur, regardez les guides pratiques suivants :</p>
<div class="twocolumns">
<ul>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Ouvrir l'Inspecteur</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examiner et éditer l'HTML</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examiner et éditer le modèle de boites</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspecter et sélectionner des couleurs</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_fonts">Éditer les polices d'écriture</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualiser les transformations</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Utiliser l'API de l'inspecteur</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Select_an_element">Sélectionner un élément</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examiner et éditer le CSS</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examiner les écouteurs d'évènements</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations">Travailler avec des animations</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Éditer les filtres CSS</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Éditer les formes CSS</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/View_background_images">Voir les images de fond</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Utiliser l'inspecteur depuis la console web</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examiner les grilles CSS</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Examiner les layout CSS flexbox</a></li>
</ul>
</div>
<hr>
<h2 id="Référence">Référence</h2>
<div class="twocolumns">
<ul>
<li><a href="/fr/docs/Tools/Page_Inspector/Keyboard_shortcuts">Raccourcis clavier</a></li>
<li><a href="/fr/docs/Tools/Tools_Toolbox#Inspector">Paramètres</a></li>
</ul>
</div>
|
