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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
---
title: Débogueur de module complémentaire
slug: Mozilla/Add-ons/Add-on_Debugger
tags:
- Développement
- Extensions
- Firefox
- Guide
- JavaScript
- Modules complémentaires
- debogueur
translation_of: 'https://extensionworkshop.com/documentation/develop/debugging/'
---
<div>{{AddonSidebar}}</div>
<p>Le débogueur de module complémentaire <em>(Add-on)</em> <span id="result_box" lang="fr"><span>vous permet d'exécuter un ensemble d'outils de développement de Firefox dans le contexte de votre module</span></span> :</p>
<ul>
<li><a href="https://developer.mozilla.org/fr/docs/Outils/D%C3%A9bogueur">Débogueur</a>, <span id="result_box" lang="fr"><span>pour définir des points d'arrêt et examiner l'état interne de votre code</span></span>.</li>
<li><a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web">Console web</a>, <span id="result_box" lang="fr"><span>pour voir les messages enregistrés et évaluer le JavaScript dans le contexte du module complémentaire</span></span>.</li>
<li><a href="https://developer.mozilla.org/fr/docs/Outils/Ardoise">Ardoise JavaScript</a>, <span id="result_box" lang="fr"><span>pour évaluer commodément le JavaScript multiligne du module complémentaire et l'enregistrer dans un fichier.</span></span></li>
</ul>
<p><span id="result_box" lang="fr"><span>Le débogueur de module complémentaire n'est pas disponible pour les modules de superposition XUL requis pour le redémarrage.</span> <span>Pour déboguer des modules comme ceux-ci, utilisez la</span></span> <a href="https://developer.mozilla.org/fr/docs/Outils/Bo%C3%AEte_%C3%A0_outils_du_navigateur">boîte à outils du navigateur</a>.</p>
<p>Pour une rapide introduction sur le débogueur, regardez la rapide démonstration ici (en) :</p>
<p>{{EmbedYouTube("KU3Xsck7qy0")}}</p>
<h2 id="Ouverture_du_débogueur_de_module_complémentaire">Ouverture du débogueur de module complémentaire</h2>
<div class="note">
<p><span id="result_box" lang="fr"><span>Ceci décrit comment ouvrir le débogueur à partir de Firefox 45.</span> <span>Pour les versions antérieures de Firefox, vous devez :</span></span></p>
<ul>
<li>
<p><span id="result_box" lang="fr"><span>activer le débogage d'extension en cochant les <a href="https://developer.mozilla.org/fr/docs/Outils/Settings">options</a> «Activer les scripts chrome et boîte à outils de débogage des extensions» <em>(</em></span></span><em>Enable browser chrome and add-on debugging toolboxes)</em> <span lang="fr"><span>et «Activer le débogage distant» <em>(</em></span></span><em>Enable remote debugging)</em> <span lang="fr"><span>dans les outils de développement</span></span></p>
</li>
<li>
<p><span id="result_box" lang="fr"><span>trouver l'extension dans about:addons (pas </span></span> about:debugging<span lang="fr"><span>), et cliquer sur le bouton "Debogage" sur cette page.</span></span></p>
</li>
</ul>
<ul>
</ul>
</div>
<p><span id="result_box" lang="fr"><span>Pour connecter le débogueur d'extensions à un module complémentaire, ouvrez la page <a href="https://developer.mozilla.org/fr/docs/Outils/about:debugging">modules</a> dans Firefox, assurez-vous que la case "</span></span>Activer le débogage des modules<span lang="fr"><span>" est cochée et cliquez sur le bouton "Déboguer" à proximité de votre add-on</span> <span>dans la page.</span></span></p>
<p><span id="result_box" lang="fr"><span>Ensuite, vous verrez une boîte de dialogue vous demandant d'accepter une connexion entrante.</span> <span>Cliquez sur "OK", et le débogueur va commencer dans une fenêtre séparée.</span> <span>Notez que parfois la fenêtre du débogueur est masquée par la fenêtre principale de Firefox.</span></span></p>
<p>{{EmbedYouTube("tGGcA3bT3VA")}}</p>
<h2 id="Utilisation_du_débogueur_de_module_complémentaire">Utilisation du débogueur de module complémentaire</h2>
<p><span id="result_box" lang="fr"><span>Le débogueur de module complémentaire a une apparence et un comportement proches de ceux de la <a href="https://developer.mozilla.org/fr/docs/Outils/Bo%C3%AEte_%C3%A0_outils_du_navigateur">Boîte à outils du navigateur</a>, à ceci près que, que la portée de la boîte à outils est l'intégralité du navigateur, alors que celle du débogueur de module est sur le seul module pour lequel il a été lancé.</span> <span>À l'instar de la boîte à outils du navigateur, une barre d'outils en haut vous permet de basculer entre plusieurs outils différents.</span> <span>Dans Firefox 31, il n'y a qu'un seul outil, le débogueur JavaScript, mais à partir de Firefox 32, vous obtenez également la console et l'ardoise.</span></span></p>
<h3 id="Le_débogueur_JavaScript">Le débogueur JavaScript</h3>
<p><span id="result_box" lang="fr"><span>Il se comporte comme le <a href="https://developer.mozilla.org/fr/docs/Outils/D%C3%A9bogueur">débogueur JavaScript</a> normal, à l'exception de sa portée qui est le module complémentaire et non une page Web.</span> <span>Sur la gauche, il répertorie les sources JavaScript:</span></span></p>
<ul>
<li><span id="result_box" lang="fr"><span>en haut <code>bootstrap.js</code> : celui que vous avez écrit si votre extension est un <a href="https://developer.mozilla.org/fr/Add-ons/Bootstrapped_extensions">module complémentaire "bootstrapé"</a> <em>(avec des commandes de démarrage écrites manuellement)</em> , ou celui inclus dans le SDK si votre extension est un module complémentaire SDK.</span></span></li>
<li><span id="result_box" lang="fr"><span>ensuite, si votre extension est un module complémentaire SDK, vous trouverez le fichier <code>main.js</code> de votre module, tous les <a href="https://developer.mozilla.org/fr/Add-ons/SDK/Guides/Module_structure_of_the_SDK#Modules_locaux">modules locaux</a> livrés avec et les scripts de contenu actuellement chargés</span></span></li>
<li>puis, <span id="result_box" lang="fr"><span>tous les modules SDK utilisés directement ou indirectement par votre extension.</span></span></li>
</ul>
<h4 id="Scripts_de_contenu">Scripts de contenu</h4>
<p><span id="result_box" lang="fr"><span>Les scripts de contenu ne sont listés que s'ils sont chargés.</span> <span>Par conséquent, si votre module complémentaire <a href="/fr/docs/">charge un script de contenu</a> avec <code>contentScriptFile</code>, le fichier n'apparaîtra pas dans les sources du débogueur tant que vous n'allez pas sur une page qui le charge.</span></span></p>
<p><span id="result_box" lang="fr"><span>Si vous définissez un point d'arrêt dans un script de contenu, il ne sera pas actif pour les instances du script de contenu chargées après la définition du point d'arrêt.</span></span></p>
<p><span id="result_box" lang="fr"><span>Par exemple, supposons que vous ayez un module complémentaire qui attache un script de contenu à chaque onglet chargé par l'utilisateur.</span> <span>Le script de contenu ajoute un gestionnaire de clics à la page.</span> <span>Dès que vous ouvrez un onglet, ce script de contenu sera répertorié dans le débogueur.</span> <span>Si vous définissez ensuite un point d'arrêt dans le gestionnaire de clics du script de contenu, l'exécution s'arrêtera lorsque vous cliquerez sur la page.</span> <span>Mais si vous ouvrez un nouvel onglet, il y a maintenant deux instances du script de contenu, et le point d'arrêt ne sera pas activé pour la deuxième instance. Vous devez définir un nouveau point d'arrêt si vous voulez qu'il fonctionne pour la seconde.</span></span></p>
<p><span class="short_text" id="result_box" lang="fr"><span>Nous étudions des améliorations à ce</span></span> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1016046">bug 1016046</a>.</p>
<h3 id="La_console">La console</h3>
<p>La console se comporte comme la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web">console web</a>, mais sa portée est le module complémentaire et non une page web.</p>
<p><span id="result_box" lang="fr"><span>Notez toutefois qu'elle s'exécute réellement dans le contexte du <code>bootstrap.js</code> du module complémentaire, ce qui n'est peut-être pas ce à quoi vous vous attendez si votre module utilise le SDK : vous ne verrez aucun objet défini dans le <code>main.js</code></span><span>de votre extension, et vous ne verrez pas <code>require()</code> non plus.</span> <span>Ce problème fait l'objet d'un suivi</span></span> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1005193">bug 1005193</a>.</p>
<p>Vous pouvez exécuter des instructions de la console dans le contexte de <code>main.js</code> <span id="result_box" lang="fr"><span>tandis que l'exécution est interrompue dans</span></span> <code>main.js</code>.</p>
<h3 id="L'ardoise_JavaScript">L'ardoise JavaScript</h3>
<p>L'ardoise se comporte comme l'<a href="https://developer.mozilla.org/fr/docs/Outils/Ardoise">ardoise JavaScript</a> normale, <span id="result_box" lang="fr"><span>mais sa portée est l'extension et non la page web.</span></span></p>
<p><span id="result_box" lang="fr"><span>Comme pour la console, le module complémentaire s'exécute dans le contexte du <code>bootstrap.js</code> du module complémentaire, même s'il utilise le SDK et, comme avec la console, vous pouvez exécuter le code de l'ardoise dans le contexte de <code>main.js</code> pendant que l'exécution</span> <span>est suspendue dans main.js.</span></span></p>
<h2 id="Débogage_des_pages_chrome_et_about">Débogage des pages chrome: et about:</h2>
<p><span id="result_box" lang="fr"><span>À partir de Firefox 37, vous pouvez déboguer les pages chrome: et about: en utilisant le débogueur normal, comme s'il s'agissait de pages de contenu ordinaires.</span></span></p>
|
