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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
title: Boîte à outils du navigateur
slug: Tools/Browser_Toolbox
tags:
- Debug
- Firefox
- JavaScript
translation_of: Tools/Browser_Toolbox
original_slug: Outils/Boîte_à_outils_du_navigateur
---
<div>{{ToolsSidebar}}</div>
<p>La boite à outils du navigateur, permet de déboguer des modules complémentaires ainsi que le code JavaScript du navigateur lui-même, contrairement à la <a href="/fr/docs/Outils/Outils_boite_à_outils">boite à outils normale</a> qui ne fonctionne que pour les pages ordinaires. Ainsi, le contexte de la boite à outils du navigateur est le navigateur entier au lieu d'une simple page d'un seul onglet.</p>
<div class="note">
<p><em>Note: Pour déboguer un module qui ne nécessite pas de redémarrage ou qui se base sur un SDK, il vaut mieux utiliser le <a href="/fr/Add-ons/Add-on_Debugger">Débogeur de modules</a>. Pour les modules qui n'ont pas ces deux caractéristiques, la boite à outils du navigateur est suffisante.</em></p>
</div>
<h2 id="Activer_la_boite_à_outils_du_navigateur">Activer la boite à outils du navigateur</h2>
<div>
<p>La boite à outils du navigateur n'est pas activée par défaut. Pour l'activer, il est nécessaire de cocher les options: "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant".</p>
<p>Ces options se trouvent dans les <a href="/fr/docs/Tools/Settings">options</a> des outils de développement, dans la section "<a href="/fr/docs/Tools/Settings#Advanced_settings">Paramètres avancés</a>" :</p>
<p><img alt="Developer Tools Settings" src="https://mdn.mozillademos.org/files/16236/settings_for_browser_debugger.png" style="border: 1px solid black; display: block; height: 744px; margin: 0 auto; width: 900px;"></p>
</div>
<h2 id="Ouvrir_la_boite_à_outils_du_navigateur">Ouvrir la boite à outils du navigateur</h2>
<p>Il est possible d'ouvrir la boite, en ouvrant le menu (bouton <img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title=""> ) puis en ouvrant le menu "Développement", puis en choisissant "Boite à outils du contenu du navigateur".</p>
<p>Depuis Firefox 39, il est également possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Maj</kbd> + <kbd>I</kbd> ( <kbd>Cmd</kbd> + <kbd>Opt</kbd> +<kbd>Maj</kbd> + <kbd>I</kbd> sur un Mac).</p>
<p>Une pop-up s'ouvrira alors (ce comportement peut être désactivé en passant la propriété <code>devtools.debugger.prompt-connection</code> à false dans about:config) :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11119/browser-toolbox-warning.png" style="display: block; height: 326px; margin-left: auto; margin-right: auto; width: 600px;">Cliquer sur OK, ouvrira la boite à outils du navigateur dans sa propre fenêtre :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11121/browser-toolbox.png">Il est alors possible d'inspecter le chrome du navigateur ainsi que de voir et déboguer tous les fichiers chargés par le navigateur lui-même et par tous les modules qui sont fonctionnels. Les outils disponibles sont les suivants :</p>
<ul>
<li><a href="/fr/docs/Tools/Debugger">Débogueur</a> (<em>Pour déboguer un module qui ne nécessite pas de redémarrage ou qui se base sur un SDK, il vaut mieux utiliser le <a href="/fr/Add-ons/Add-on_Debugger">Débogueur de modules</a>.)</em></li>
<li><a href="/fr/docs/Tools/Browser_Console">Console</a></li>
<li><a href="/fr/docs/Tools/Style_Editor">Éditeur de style</a></li>
<li><a href="/fr/docs/Tools/Profiler">Performance</a></li>
<li><a href="/fr/docs/Tools/Network_Monitor">Moniteur réseau</a></li>
<li><a href="/fr/docs/Tools/Scratchpad">Ardoise JavaScript</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector">Inspecteur</a></li>
<li><a href="/fr/docs/Outils/Inspecteur_accessibilite">Inspecteur de l'accessibilité</a></li>
</ul>
<p>Il est possible de déboguer les pages chrome: et about: en utilisant le <a href="/fr/docs/Tools/Debugger">Débogueur</a> normal, comme si il s'agissait de pages de contenu ordinaires.</p>
<h2 id="Cibler_un_document">Cibler un document</h2>
<p>dans la boite à outils normaux, il y a un <a href="/fr/docs/Tools/Working_with_iframes">bouton dans la barre d'outils qui permet de cibler des iframes spécifiques dans le document</a>. Le même bouton apparaît dans la boîte à outils du navigateur où il liste toutes les fenêtres de chrome et de contenu de niveau supérieur ainsi que les iframes qu'elles contiennent. Cela vous permet d'inspecter les documents dans des fenêtres chromées et des fenêtres contextuelles individuelles, ainsi que dans des onglets de contenu.</p>
<p>Voici par exemple ce que le bouton liste lorsqu'il y a deux fenêtres ouvertes, l'une avec un seul onglet, l'autre avec deux :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11117/browser-toolbox-iframes.png"></p>
<h2 id="Déboguer_des_popups">Déboguer des popups</h2>
<p>Il est difficile de déboguer les popups, car le navigateur les cache dès que vous cliquez en dehors d'eux. Il existe un moyen de désactiver ce comportement. Cliquez sur le menu de la boîte à outils et sélectionnez <strong>Désactiver le masquage automatique des popups</strong>.</p>
<p> </p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16234/popup_auto-hide.png" style="display: block; height: 249px; margin: 0px auto; width: 350px;"></p>
<p>Maintenant, lorsque vous ouvrez une fenêtre pop-up, elle reste ouverte jusqu'à ce que vous appuyiez sur la touche <kbd>Echap</kbd> . Vous pouvez utiliser le sélecteur de nœuds de l'Inspecteur pour sélectionner ce panneau, puis examiner et modifier son contenu :</p>
<p>{{EmbedYouTube("6edXcunw4jM")}}</p>
<p>Il est possible d'utiliser la même technique pour déboguer les <a href="/fr/Add-ons/WebExtensions/Debugging#Debugging_popups">pop-up crées par les modules</a>.</p>
<div class="note">
<p><strong>Note</strong>: Ce changement n'est pas persistant au redémarrage du navigateur. Lorsque vous fermez la boîte à outils du navigateur, le réglage est effacé.</p>
</div>
|
