unslug fr: move

21 files changed, 668 insertions, 0 deletions

diff --git a/files/fr/tools/debugger/break_on_dom_mutation/index.html b/files/fr/tools/debugger/break_on_dom_mutation/index.html
new file mode 100644
index 0000000000..5ab981337b
--- /dev/null
+++ b/files/fr/tools/debugger/break_on_dom_mutation/index.html
@@ -0,0 +1,25 @@
+---
+title: S’arrêter sur un évènement DOM
+slug: Outils/Débogueur/Comment/S_arrêter_sur_un_évènement_DOM
+translation_of: Tools/Debugger/Break_on_DOM_mutation
+translation_of_original: Tools/Debugger/How_to/Break_on_a_DOM_event
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="note">
+<p>Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur.</p>
+
+<p>La documentation de l'ancienne version du Débogueur est disponible sur la page <a href="/fr/docs/Tools/Debugger_%28before_Firefox_52%29">Débogueur (avant Firefox 52)</a>.</p>
+</div>
+
+<p>Si vous écoutez un évènement DOM, Il est possible d'indiquer au débogueur de s'arrêter lorsque l'événement est lancé, sans avoir besoin de chercher l'écouteur et de mettre un point d'arrêt manuellement.</p>
+
+<p>Il faut d’abord cliquer sur le bouton "Développer les panneaux" de la <a href="/fr/docs/Tools/Debugger/UI_Tour#toolbar">barre d'outils</a> (juste à gauche des options). Cela ouvre le panneau partagé par les variables et les événements. Il faut ensuite cliquer sur l'onglet « Événements » cela affiche le <a href="/fr/docs/Tools/Debugger/UI_Tour#Events_pane">panneau des événements</a>. Ce panneau liste tout les évènements auxquels vous avez assigné un écouteur :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13210/debugger-events-pane-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<p>Il n'y a plus qu'a cocher à la case à coté de l'évènement ou vous désirez que votre code s’arrête.</p>
+
+<p>Quand l'évènement est lancé, le code s’arrêtera au début de l'écouteur.</p>
+
+<p>{{EmbedYouTube("f-tbR8kj0K0")}}</p>
diff --git a/files/fr/tools/debugger/how_to/access_debugging_in_add-ons/index.html b/files/fr/tools/debugger/how_to/access_debugging_in_add-ons/index.html
new file mode 100644
index 0000000000..5c14593f5f
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/access_debugging_in_add-ons/index.html
@@ -0,0 +1,26 @@
+---
+title: Accéder au débogage depuis un module complémentaire
+slug: Outils/Débogueur/Comment/Accéder_au_débogage_depuis_un_module_complàmentaire
+translation_of: Tools/Debugger/How_to/Access_debugging_in_add-ons
+---
+<div>{{ToolsSidebar}}</div><div class="warning">
+<p>Il est prévu de déprécier l'utilisation des techniques décrites dans ce document. Merci de ne pas développer de nouveaux modules complémentaires en utilisant ces techniques.</p>
+</div>
+
+<p>Les objets suivant sont accessibles dans le contexte de chrome://browser/content/debugger.xul (ou, en version beta 23,, chrome://browser/content/devtools/debugger.xul) :</p>
+
+<ul>
+ <li>window.addEventListener("Debugger:EditorLoaded") - Appelé quand le panneau des scripts accessible en lecture seule est chargé</li>
+ <li>window.addEventListener("Debugger:EditorUnloaded")</li>
+</ul>
+
+<p>Fichiers en relation :</p>
+
+<ul>
+ <li>chrome://browser/content/devtools/debugger-controller.js</li>
+ <li>chrome://browser/content/devtools/debugger-toolbar.js</li>
+ <li>chrome://browser/content/devtools/debugger-view.js</li>
+ <li>chrome://browser/content/devtools/debugger-panes.js</li>
+</ul>
+
+<p>Malheureusement, il n'y a pas encore d'API pour évaluer les expressions dans la portée du débogueur, ou pour mettre en surbrillance les éléments de la page qui sont référencés comme variables dans la portée déboguée. C'est actuellement un travail en cours, voir le bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=653545" title="bug #653545">653545</a>.</p>
diff --git a/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html b/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html
new file mode 100644
index 0000000000..b009f06df0
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html
@@ -0,0 +1,28 @@
+---
+title: S'arrêter sur les exceptions
+slug: Outils/Débogueur/Comment/Breaking_on_exceptions
+translation_of: Tools/Debugger/How_to/Breaking_on_exceptions
+---
+<div>{{ToolsSidebar}}</div>
+
+<h4 id="Firefox_version_64">Firefox version 64</h4>
+
+<div>Pour que le Débogueur s'arrête sur les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Error">exceptions</a>, il suffit de cliquer sur une de ces cases à cocher dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Breakpoints_list">Liste des points d'arrêt</a> :</div>
+
+<div> </div>
+
+<div><img alt="Screen shot from 64.0+build3-0ubuntu0.16.04.1" src="https://mdn.mozillademos.org/files/16397/version64UI.png" style="height: 167px; width: 506px;"></div>
+
+<h4 id="Versions_antérieures">Versions antérieures</h4>
+
+<p>Pour que le Débogueur s'arrête sur les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Error">exceptions</a>, Il faut cliquer sur ce bouton : <img alt="" src="https://mdn.mozillademos.org/files/14410/debugger-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Toolbar">barre d'outils.</a></p>
+
+<p>{{EmbedYouTube("UWIO_UM827k")}}</p>
+
+<p>Le bouton à trois états possibles, cliquer sur celui-ci passe d'un état au suivant.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14416/debugger-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : ne s'arrête sur aucune exception. C'est l'état par défaut.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14412/uncaught-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : ne s'arrête que les exceptions <a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch">qui ne sont pas attrapées</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14414/all-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : s'arrête sur toutes les exceptions.</p>
diff --git a/files/fr/tools/debugger/how_to/debug_eval_sources/index.html b/files/fr/tools/debugger/how_to/debug_eval_sources/index.html
new file mode 100644
index 0000000000..e0c305f21a
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/debug_eval_sources/index.html
@@ -0,0 +1,29 @@
+---
+title: Déboguer des sources évaluées
+slug: Outils/Débogueur/Comment/Déboguer_des_sources_évaluées
+translation_of: Tools/Debugger/How_to/Debug_eval_sources
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Il est possible de déboguer du code JavaScript qui à été évalué dynamiquement, soit en étant passé sous forme de chaine de caractère à la fonction <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a>, soit en étant passé sous forme de chaine caractère au constructeur d'une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>.</p>
+
+<p>Dans la vidéo ci-dessous, un page contenant le code source suivant est chargée :</p>
+
+<pre class="brush: js">var script = `function foo() {
+               console.log('called foo');
+             }
+             //# sourceURL=my-foo.js`;
+
+eval(script);
+
+var button = document.getElementById("foo");
+button.addEventListener("click", foo, false);
+</pre>
+
+<p>Cela nome le script "mon-foo.js"en utilisant l'instruction <code>//# sourceURL</code>. Cette source est alors listée dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane">panneau de la liste des sources</a>, et peut être ouverte comme n'importe quelle source.</p>
+
+<p>{{EmbedYouTube("nFm8F8Anmic")}}</p>
+
+<p>Le nom du script apparaitra également dans la pile d'exécution dans la <a href="/fr/docs/Tools/Web_Console#Error_messages">Console Web</a>.</p>
+
+<p>Le Débogueur s’arrêtera également aux expressions <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/debugger">debugger;</a></code> dans les sources évaluées anonymes</p>
diff --git a/files/fr/tools/debugger/how_to/disable_breakpoints/index.html b/files/fr/tools/debugger/how_to/disable_breakpoints/index.html
new file mode 100644
index 0000000000..5ca12ea619
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/disable_breakpoints/index.html
@@ -0,0 +1,16 @@
+---
+title: Désactiver des point d'arrêts
+slug: Outils/Débogueur/Comment/Désactiver_des_points_d_arrêts
+translation_of: Tools/Debugger/How_to/Disable_breakpoints
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Pour désactiver un point d'arrêt spécifique, il suffit de décocher la case à cocher à côté du point d'arrêt dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Breakpoints_list">liste des points d'arrêt</a>.</p>
+
+<p>Pour désactiver tous les points d'arrêts, il suffit cliquer sur cette icône : <img alt="" src="https://mdn.mozillademos.org/files/14402/toggle-all.png" style="height: 24px; margin-bottom: -5px; width: 30px;"> dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Toolbar">barre d'outils</a>.</p>
+
+<p>{{EmbedYouTube("ULoZ70XPd90")}}</p>
+
+<p>Après avoir désactivé un point d'arrêt, sa couleur sera plus claire avec une bordure foncée. Par exemple :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16919/disable_breakpoints.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
diff --git a/files/fr/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html b/files/fr/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html
new file mode 100644
index 0000000000..4c0299205c
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html
@@ -0,0 +1,16 @@
+---
+title: Afficher en surbrillance et inspecter les nœuds DOM
+slug: Outils/Débogueur/Comment/Afficher_en_surbrillance_et_inspecter_le_DOM
+translation_of: Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur. Si vous avez besoin de l'utiliser, il faut changer la préférence "devtools.debugger.new-debugger-frontend" dans about:config (page interne du navigateur)</p>
+
+<p>La documentation de l'ancienne version du Débogueur est disponible sur la page <a href="/fr/docs/Tools/Debugger_%28before_Firefox_52%29">Débogueur (avant Firefox 52)</a>.</p>
+</div>
+
+<p>Si vous survolez un nœud DOM dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane">panneau des variables</a>, il sera affiché en surbrillance dans la page :</p>
+
+<p>De plus, une icône en forme de cible apparaitra à côté de la variable. Cliquer sur cette icône, ouvrira <a href="/fr/docs/Tools/Page_Inspector">l'Inspecteur</a> avec l'élément DOM sélectionné.</p>
+
+<p>{{EmbedYouTube("0JWxXp2Qql8")}}</p>
diff --git a/files/fr/tools/debugger/how_to/ignore_a_source/index.html b/files/fr/tools/debugger/how_to/ignore_a_source/index.html
new file mode 100644
index 0000000000..2af7f19958
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/ignore_a_source/index.html
@@ -0,0 +1,24 @@
+---
+title: Mettre une source dans une boîte noire
+slug: Outils/Débogueur/Comment/Mettre_une_source_dans_une_boîte_noire
+translation_of: Tools/Debugger/How_to/Ignore_a_source
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Dans le développement web moderne, il est courant de s'appuyer sur des bibliothèques tels que <a href="http://jquery.com/">jQuery</a>, <a href="http://emberjs.com/">Ember</a>, ou <a href="http://angularjs.org/">Angular</a>, et 99% du temps on peut supposer qu'elles fonctionnent parfaitement. On ne se soucie alors pas de l'implémentation interne de ces librairies : on les considère comme des <a href="http://fr.wikipedia.org/wiki/Bo%C3%AEte_noire_%28syst%C3%A8me%29">boites noires</a>. Cependant l'abstraction des bibliothèques « cède » lors des sessions de débogage lorsqu'on est forcé de passer par des piles d'appels utilisant la bibliothèque pour accéder à son propre code. Avec le système de boite noire, il est possible d'indiquer au débogueur d'ignorer les détails des sources sélectionnées.</p>
+
+<p>Il est possible de mettre/enlever une source dans une boîte noire en sélectionnant la source dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane">panneau de la liste des sources </a>puis en cliquant sur l'icône en forme d'œil en bas à gauche :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13218/debugger-black-box.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 922px;"></p>
+
+<p>Il est possible de placer plusieurs fichiers sources dans des boîtes noires en ouvrant la <a href="/fr/docs/Tools/GCLI">Barre de développement</a>  et utilisant la commande   <code>dbg blackbox</code> :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5997/command.png" style="display: block; height: 48px; margin-left: auto; margin-right: auto; width: 537px;"></p>
+
+<p>Quand une source est mise dans une boîte noire :</p>
+
+<ul>
+ <li>Tous les points d'arrêt concernant ce(s) fichier(s) sont désactivés.</li>
+ <li>Lorsque l'option « <strong>Pause sur les exceptions</strong> » dans les <a href="/fr/docs/Tools/Debugger/Settings">options du Débogueur</a> est activée, le débogueur ne s'arrêtera pas lorsqu'une exception est levée par une source dans une boite noire. Dans ce cas, le débogueur attendra que la pile arrive à une frame dans une source qui n'est pas dans une boîte noire.</li>
+ <li>Lors d'un débogage pas à pas, le débogueur passera sans s'arrêter dans une source mis en boîte noire.</li>
+</ul>
diff --git a/files/fr/tools/debugger/how_to/index.html b/files/fr/tools/debugger/how_to/index.html
new file mode 100644
index 0000000000..4b9f36e8fe
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/index.html
@@ -0,0 +1,12 @@
+---
+title: Comment faire…
+slug: Outils/Débogueur/Comment
+tags:
+  - TopicStub
+translation_of: Tools/Debugger/How_to
+---
+<div>{{ToolsSidebar}}</div>
+
+<p><span class="seoSummary">Ces articles décrivent comment utiliser le débogueur.</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/fr/tools/debugger/how_to/open_the_debugger/index.html b/files/fr/tools/debugger/how_to/open_the_debugger/index.html
new file mode 100644
index 0000000000..e56cd0a53c
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/open_the_debugger/index.html
@@ -0,0 +1,20 @@
+---
+title: Ouvrir le Débogueur
+slug: Outils/Débogueur/Comment/Ouvrir_le_débogueur
+translation_of: Tools/Debugger/How_to/Open_the_debugger
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Il y a deux façons d'ouvrir le Débogueur :</p>
+
+<ul>
+ <li>Sélectionner "Débogueur" dans le menu Développement qui est un sous-menu du menu Firefox.</li>
+ <li>
+  <p>Utiliser le raccourci <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>S</kbd> sur Windows et Linux, et <kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>S</kbd> sur Mac</p>
+
+  <div class="blockIndicator note"><strong>Note:</strong> Ce raccourci clavier ne fonctionne plus dans Firefox 66 ou plus. Il est cependant possible d'utiliser <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>I</kbd> (Windows/Linux), et <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> (MacOS), ou <kbd>F12</kbd> pour ouvrir la boite à outils et sélectionner le Débogueur.</div>
+ </li>
+ <li>Utiliser le bouton menu ( <img alt="new fx menu" class="frameless wiki-image" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;" title=""> ), sélectionner "Développeur", puis "Débogueur".</li>
+</ul>
+
+<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p>
diff --git a/files/fr/tools/debugger/how_to/pretty-print_a_minified_file/index.html b/files/fr/tools/debugger/how_to/pretty-print_a_minified_file/index.html
new file mode 100644
index 0000000000..4ba2ddaf91
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/pretty-print_a_minified_file/index.html
@@ -0,0 +1,20 @@
+---
+title: Formater et indenter un fichier minifié
+slug: Outils/Débogueur/Comment/Formater_et_indenter_un_fichier_minifié
+translation_of: Tools/Debugger/How_to/Pretty-print_a_minified_file
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Pour formater et indenter un fichier qui a été minifié, il faut cliquer sur cette icône : <img alt="" src="https://mdn.mozillademos.org/files/16638/pretty_print_icon.png" style="border: 1px solid black; height: 19px; margin-bottom: -5px; width: 20px;"> dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">panneau des source</a>. Le Débogueur formatera la source et l'affichera dans un nouveau fichier avec un nom au format : "{ }[nom-original]".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16639/pretty_print_source.png" style="border: 1px solid black; display: block; height: 357px; margin: 0px auto; width: 914px;"></p>
+
+<p>Après un clic sur l'icone, le code source ressemble à ceci:</p>
+
+
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16640/pretty_print_after.png" style="border: 1px solid black; display: block; height: 315px; margin: 0px auto; width: 914px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: <span style="color: #000000;">Pour mettre en forme du code JavaScript inline, il suffit de double cliquer sur le code dans panneau de l'inspecteur.</span></p>
+</div>
diff --git a/files/fr/tools/debugger/how_to/search/index.html b/files/fr/tools/debugger/how_to/search/index.html
new file mode 100644
index 0000000000..3db07016dc
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/search/index.html
@@ -0,0 +1,30 @@
+---
+title: Rechercher
+slug: Outils/Débogueur/Comment/Search
+translation_of: Tools/Debugger/How_to/Search
+---
+<div>{{ToolsSidebar}}</div>
+
+<h2 id="Rechercher_des_fichiers">Rechercher des fichiers</h2>
+
+<p>Pour rechercher un fichier en particulier, il faut utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>P</kbd> (ou <kbd>Cmd</kbd> + <kbd>P</kbd> sur Mac) puis écrire les termes de recherche. Le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">panneau des sources </a> affichera une liste des fichiers. Il est possible d'utiliser les flèches haut et bas pour se déplacer dans la liste. La touche <kbd>Entrée</kbd> ouvre le fichier sélectionné :</p>
+
+<p>{{EmbedYouTube("xXsfYx0THWg")}}</p>
+
+<h2 id="Rechercher_dans_un_fichier">Rechercher dans un fichier</h2>
+
+<p>Pour chercher dans le fichier actuellement chargé dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">panneau des sources</a> il faut appuyer sur <kbd>Ctrl</kbd> + <kbd>F</kbd> (ou <kbd>Cmd</kbd> + <kbd>F</kbd> sur Mac) pendant que le panneau est sélectionné. Le Débogueur affichera alors le nombre de résultats et les surlignera dans le code :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14997/new-search.png" style="display: block; height: 524px; margin-left: auto; margin-right: auto; width: 595px;"></p>
+
+<h2 id="Rechercher_dans_tous_fichiers">Rechercher dans tous fichiers</h2>
+
+<p>Il est également possible de rechercher dans une chaine dans tous les fichiers du projet actuel. Il suffit pour cela de presser <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>F</kbd> (Windows et Linux) or <kbd>Cmd</kbd> + <kbd>Maj</kbd> + <kbd>F</kbd> (macOS) puis d'entrer la chaine de caractères recherchée.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16790/searchInAllFiles.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 800px;"></p>
+
+<p>Si la chaine existe dans un des fichiers du projet, la recherche retournera une liste triée par fichier de par ligne.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16789/ctrlShiftF.png" style="border: 1px solid black; display: block; height: 342px; margin: 0px auto; width: 800px;"></p>
+
+<p>Cliquer sur un élément dans la liste emmène directement dans le fichier à la ligne correspondante.</p>
diff --git a/files/fr/tools/debugger/how_to/set_a_breakpoint/index.html b/files/fr/tools/debugger/how_to/set_a_breakpoint/index.html
new file mode 100644
index 0000000000..5f0ac95129
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/set_a_breakpoint/index.html
@@ -0,0 +1,45 @@
+---
+title: Ajouter un point d'arrêt
+slug: Outils/Débogueur/Comment/Ajouter_un_point_d_arrêt
+tags:
+  - JavaScript
+  - Tools
+translation_of: Tools/Debugger/How_to/Set_a_breakpoint
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Il est possible de placer un point d'arrêt de trois façons différentes :</p>
+
+<ul>
+ <li>Dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">panneau des sources</a>, cliquer sur le numéro de la ligne où l'arrêt est désiré.</li>
+ <li>Dans <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">le panneau des sources</a>, faire un clic droit sur la ligne où l'arrêt est désiré pour ouvrir le menu contextuel puis cliquer sur "Ajouter un point d'arrêt"</li>
+ <li>Dans <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">le panneau des sources</a>, mettre la ligne ciblée en surbrillance et appuyer sur Ctrl+B (Windows/Linux) ou Command+B (Mac OS X)</li>
+</ul>
+
+<p>Lors de l'ouverture du menu contextuel, il est possible de placer soit un point d'arrêt normal qui arrêtera l’exécution, ou bien un point d'arrêt conditionnel qui lui n’arrêtera le code que si les conditions définies sont satisfaites.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16433/set_breakpoint.png" style="border: 1px solid black; display: block; height: 353px; margin: 0 auto; width: 593px;"></p>
+
+<p>Si le point d'arrêt choisi est conditionnel, il sera possible de spécifier sa condition :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16436/edit_conditional_breakpoint.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></p>
+
+<p>Chaque point d'arrêt est affiché à deux endroits dans le débogueur :</p>
+
+<ul>
+ <li>Dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Breakpoints_list">liste des points d'arrêts</a>, qui indique également le nom de fichier et le numéro de ligne du point d'arrêt.
+
+  <p><img alt="" src="https://mdn.mozillademos.org/files/16434/list_breakpoints.png" style="border: 1px solid black; display: block; height: 325px; margin: 0px auto; width: 313px;"></p>
+ </li>
+ <li>Sous forme de flèche bleue (ou orange si <a href="/fr/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">conditionnel</a>) sur la ligne affectée dans le <a href="#source-list-pane">panneau des sources</a>.<img alt="" src="https://mdn.mozillademos.org/files/16435/breakpoints_in_code.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></li>
+</ul>
+
+<p>À partir de Firefox 67, il est possible d'ajouter un point d'arrêt à plusieurs endroits d'une ligne complexe (ex: une ligne avec plusieurs appels de fonction). Par exemple, dans la ligne ci-dessous, il y aura trois endroits possibles pour le point d'arrêt: au point ou la variable est assignée, au point our l'appel à <code>parse</code> est fait, ou à l'appel de <code>getItem</code>.</p>
+
+<pre class="brush: js">tasks = JSON.parse(localStorage.getItem('todoList'));</pre>
+
+<p>Les points d'arrêt possible sont affichés par des indicateurs. L'image suivante montre une l'image suivante affiche la ligne précédente dans le Débogueur. Lors d'un clic sur la ligne, trois indicateurs apparaissent. Par défaut le point d'arrêt est mis sur la première colonne, dans l'image, la seconde colonne à été choisie, ce qui est confirmé par le panneau de droite, la section "Breakpoints" affichant que le point est sur <code>parse</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16576/column_breakpoint.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p>
+
+<p>Ces points d'arrêt permettent de s’arrêter à plusieurs endroits sur la même ligne, dans l'exemple précédent, il aurait été possible de s’arrêter sur un, deux, ou même chaque point.</p>
diff --git a/files/fr/tools/debugger/how_to/set_a_conditional_breakpoint/index.html b/files/fr/tools/debugger/how_to/set_a_conditional_breakpoint/index.html
new file mode 100644
index 0000000000..b78dfa5a8e
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/set_a_conditional_breakpoint/index.html
@@ -0,0 +1,16 @@
+---
+title: Ajouter un point d’arrêt conditionnel
+slug: Outils/Débogueur/Comment/Ajouter_un_point_d_arrêt_conditionnel
+translation_of: Tools/Debugger/How_to/Set_a_conditional_breakpoint
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Un point d'arrêt normal est juste associé à une ligne : lorsque le programme arrive à cette ligne, le Débogueur s'arrête. Un point d'arrêt conditionnel possède en plus une condition associée représentée par une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">expression</a>. Dans ce cas, lorsque le programme arrive à la ligne du point d'arrêt, le Débogueur ne s'arrêtera que si l'expression est évaluée à <code>true</code>.</p>
+
+<p>{{EmbedYouTube("pVPlMhfrMwM")}}</p>
+
+<p>Pour ajouter un point d'arrêt conditionnel, il faut activer le menu contextuel (clic droit) en étant sur la ligne voulue dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">panneau des sources</a> et sélectionner « Ajouter un point d'arrêt conditionnel ». Il faut alors entrer la condition dans la pop-up qui apparait puis appuyer sur <kbd>Entrée</kbd> pour terminer.</p>
+
+<p>les points d'arrêt conditionnels sont représentés par une flèche orange superposée au numéro de ligne.</p>
+
+<p>Le menu contextuel (clic droit) de n'importe quel point d'arrêt (conditionnel ou non) possède une option "Modifier le point d'arrêt". Il est possible d'utiliser cette option pour modifier ou ajouter une condition.</p>
diff --git a/files/fr/tools/debugger/how_to/set_watch_expressions/index.html b/files/fr/tools/debugger/how_to/set_watch_expressions/index.html
new file mode 100644
index 0000000000..0ee376dc77
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/set_watch_expressions/index.html
@@ -0,0 +1,18 @@
+---
+title: Ajouter une expression espionne
+slug: Outils/Débogueur/Comment/Set_Watch_Expressions
+translation_of: Tools/Debugger/How_to/Set_Watch_Expressions
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Lors d'une rude séance de débogage, il est parfois utile d'espionner des expressions lorsque le code est en pause. Le Débogueur possède un panneau pour créer des expressions espionnes. Lors du parcours du code, ces expressions seront alors surveillées de près. Et chaque changement sera affiché.</p>
+
+<p>Pour créer une expression espionne, il faut d'abord ouvrir le panneau correspondant dans la partie droite du Débogueur. Puis cliquer sur "Ajouter une expression espionne". Et enfin, entrer l'expression voulue dans le champ text sélectionné :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14999/add-watch-expression.png" style="display: block; height: 354px; margin-left: auto; margin-right: auto; width: 417px;"></p>
+
+<p>Le Débogueur sauvegardera l'expression et l'espionnera tout au long du parcours du code. Lorsque le Débogueur rencontre un point d'arrêt, il affichera automatiquement les valeurs des expressions espionnes :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15007/watched-expression.png" style="display: block; height: 490px; margin-left: auto; margin-right: auto; width: 966px;"></p>
+
+<p>Il est possible de parcourir le code et de voir les changements des expressions. À chaque changement, le panneau sera brièvement coloré en jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de "x" à côté de celle-ci. Et bien sûr, il est possible d'avoir plusieurs expressions à la fois.</p>
diff --git a/files/fr/tools/debugger/how_to/step_through_code/index.html b/files/fr/tools/debugger/how_to/step_through_code/index.html
new file mode 100644
index 0000000000..9e3d8a3ae7
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/step_through_code/index.html
@@ -0,0 +1,25 @@
+---
+title: Parcourir le code
+slug: Outils/Débogueur/Comment/Parcourir_le_code
+translation_of: Tools/Debugger/How_to/Step_through_code
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Quand le code s'arrête sur un point d'arrêt, il est possible de le parcourir pas à pas en utilisant les quatre boutons de la <a href="/fr/docs/Tools/Debugger/UI_Tour#toolbar">barre d'outils </a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16431/breakpoint_toolbar.png" style="display: block; height: 220px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<p>De gauche à droite :</p>
+
+<ul>
+ <li>Reprendre : exécute le code jusqu'au prochain point d'arrêt</li>
+ <li>Passer la fonction : avance jusqu'à ligne suivante dans la même fonction</li>
+ <li>Entrer dans la fonction : avance jusqu'à la ligne suivante, sauf s'il y a un appel de fonction dans ce cas, le débogueur entre dans la fonction appelée</li>
+ <li>Sortir de la fonction : avance jusqu’à la fin de la fonction actuelle. Dans ce cas, le Débogueur reviens à l’exécution de la fonction appelante.</li>
+</ul>
+
+<p>{{EmbedYouTube("RQBwEk0-xe0")}}</p>
+
+<p>Lors d'une pause, il est possible d'appuyer sur la touche <kbd>Échap</kbd> afind d'ouvrir la Console pour avoir plus d'informations sur les erreurs et les variables :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16432/split_console.png" style="border: 1px solid black; display: block; height: 283px; margin-left: auto; margin-right: auto; width: 800px;"></p>
diff --git a/files/fr/tools/debugger/how_to/use_a_source_map/index.html b/files/fr/tools/debugger/how_to/use_a_source_map/index.html
new file mode 100644
index 0000000000..fb9c4d3c8b
--- /dev/null
+++ b/files/fr/tools/debugger/how_to/use_a_source_map/index.html
@@ -0,0 +1,32 @@
+---
+title: Utiliser une cartographie de code source
+slug: Outils/Débogueur/Comment/Utiliser_une_source_map
+translation_of: Tools/Debugger/How_to/Use_a_source_map
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Les sources JavaScript exécutées par le navigateur sont souvent différentes des sources originales crées par un développeur. Par exemple :</p>
+
+<ul>
+ <li>Les sources sont souvent combinées et <a href="https://en.wikipedia.org/wiki/Minification_%28programming%29">minifiées</a> afin d'optimiser le temps que met le serveur à les fournir.</li>
+ <li>Le JavaScript d'une page est souvent généré automatiquement. Par exemple lorsqu'il est compilé depuis un langage comme <a href="http://coffeescript.org/">CoffeeScript</a> ou <a href="http://www.typescriptlang.org/">TypeScript</a>.</li>
+</ul>
+
+<p>Dans ces situations, il est bien plus facile de déboguer le code dans son état original plutôt que dans celui utilisé par le navigateur. Une <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">cartographie de code source</a> (source map) est un fichier grâce auquel le débogueur peut faire le lien entre le code étant exécuté et les fichiers sources originaux, permettant ainsi au navigateur de reconstruire la source originale et de l'afficher dans le Débogueur.</p>
+
+<p>Pour activer le débogueur, il est nécessaire de :</p>
+
+<ul>
+ <li>générer la source map</li>
+ <li>inclure une instruction en commentaire dans le fichier transformé, qui pointe vers la source map. La syntaxe du commentaire est la suivante :</li>
+</ul>
+
+<pre class="brush: js notranslate">//# sourceMappingURL=http://exemple.com/chemin/vers/votre/sourcemap.map</pre>
+
+<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p>
+
+<p>Dans la vidéo ci-dessus, la page <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a> est utilisée. Cette page charge une source nommée "main.js" qui a été écrite en CoffeeScript puis compilée vers JavaScript. La source compilée contient le commentaire suivant qui pointe vers la source map :</p>
+
+<pre class="brush: js notranslate">//# sourceMappingURL=main.js.map</pre>
+
+<p>Dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane">panneau des sources</a>, du Débogueur, la source CoffeeScript originale apparait en tant que "main.coffee". Il est alors possible de la déboguer comme n'importe quelle source.</p>
diff --git a/files/fr/tools/debugger/index.html b/files/fr/tools/debugger/index.html
new file mode 100644
index 0000000000..9ad5a4fead
--- /dev/null
+++ b/files/fr/tools/debugger/index.html
@@ -0,0 +1,57 @@
+---
+title: Débogueur
+slug: Outils/Débogueur
+tags:
+  - Debugger
+  - Debugging
+  - Dev Tools
+  - Firefox OS
+  - Tools
+translation_of: Tools/Debugger
+---
+<div>{{ToolsSidebar}}</div>
+
+<div>Le débogueur JavaScript permet d'avancer pas à pas dans du code JavaScript et de l’examiner ou de le modifier, afin de retouver et de corriger les bugs.</div>
+
+<div></div>
+
+<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p>
+
+<p>Le débogueur peut fonctionner directement dans Firefox ou être utilisé à distance, par exemple sur un appareil Android utilisant Firefox pour Android. Voir le <a href="/fr/docs/Tools/Remote_Debugging">guide du débogage à distance</a> pour apprendre à connecter le débogueur à une cible distante.</p>
+
+<p>Pour vous repérer dans le débogueur, voici une courte <a href="/fr/docs/Tools/Debugger/UI_Tour">visite guidée de l'interface utilisateur.</a></p>
+
+<hr>
+<h2 id="Comment">Comment ?</h2>
+
+<p>Pour savoir ce qu'il est possible de faire avec le débogueur, regardez les guides pratiques suivants :</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Open_the_debugger">Ouvrir le débogueur</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Set_a_breakpoint">Ajouter un point d’arrêt</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Ajouter un point d'arrêt conditionnel</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/Set_an_XHR_breakpoint">Ajouter un point d'arrêt XHR</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/Set_a_logpoint">Ajouter un point de log</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/Set_event_listener_breakpoints">Ajouter un point d'arrêt d'écouteur d'évènement</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Disable_breakpoints">Désactiver des points d’arrêt</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Step_through_code">Parcourir le code pas à pas</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Breaking_on_exceptions">S’arrêter sur les exceptions</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Set_Watch_Expressions">Ajouter des expressions espionnes</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Afficher joliment un fichier minifié</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Search_and_filter">Rechercher</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Debug_eval_sources">Déboguer des sources évaluées</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Use_a_source_map">Utiliser une source map</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/Break_on_DOM_mutation">S'arrêter sur une mutation DOM</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Référence">Référence</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/fr/docs/Tools/Debugger/Keyboard_shortcuts">Raccourcis clavier</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/Source_map_errors">Erreurs des sources maps</a></li>
+</ul>
+</div>
diff --git a/files/fr/tools/debugger/keyboard_shortcuts/index.html b/files/fr/tools/debugger/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..b3d4e9b803
--- /dev/null
+++ b/files/fr/tools/debugger/keyboard_shortcuts/index.html
@@ -0,0 +1,12 @@
+---
+title: Raccourcis clavier
+slug: Outils/Débogueur/Raccourcis_clavier
+translation_of: Tools/Debugger/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Ra{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "debugger") }}</p>
+
+<h2 id="Raccourcis_Généraux">Raccourcis Généraux</h2>
+
+<p>{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
diff --git a/files/fr/tools/debugger/set_an_xhr_breakpoint/index.html b/files/fr/tools/debugger/set_an_xhr_breakpoint/index.html
new file mode 100644
index 0000000000..30e6bfd813
--- /dev/null
+++ b/files/fr/tools/debugger/set_an_xhr_breakpoint/index.html
@@ -0,0 +1,31 @@
+---
+title: Set an XHR breakpoint
+slug: Outils/Débogueur/Set_an_XHR_breakpoint
+translation_of: Tools/Debugger/Set_an_XHR_breakpoint
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>Un point d'arrêt XHR (XMLHttpRequest) interrompt l'exécution du code lorsqu'une requête XHR est envoyée afin de pouvoir examiner l'état du programme.<br>
+ Pour activer ce point d'arrêt, il faut une fois le Débogueur ouvert :</p>
+
+<ol>
+ <li>Soit cliquer sur "Arrêt à chaque URL" ce qui interrompt l'exécution à chaque requête.</li>
+ <li>Soit cliquer sur l’icône en forme de "+" a droite du titre "Points d'arrêt XHR" et rentrer l'URL de la requête sur laquelle interruption est voulue, puis valider avec <kbd>Entrée</kbd>.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Si un mot clé est entré au lieu d'une URL, alors l'exécution s’arrêtera sur tout appel à une URL contenant ce mot clé.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16421/XHR_breakpoint.png" style="border: 1px solid black; display: block; height: 299px; margin: 0px auto; width: 302px;"></p>
+
+<p>Lorsque le code s’interrompt sur une requête XHR, le panneau droit aura deux sections additionnelles :</p>
+
+<dl>
+ <dt><strong>Pille d'appel</strong></dt>
+ <dd>Cette section liste les fonctions qui ont été exécutés avant d'arriver au code actuel. Cliquer sur un élément de cette liste sautera à la ligne associée dans la fenêtre du code.</dd>
+ <dt><strong>Portées</strong></dt>
+ <dd>Cette section liste les valeurs présentes dans la portée de la fonction, méthode, ou gestionnaire d'évènement, dans lequel le point d'arrêt s'est activé.</dd>
+</dl>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16422/XHR_break.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
diff --git a/files/fr/tools/debugger/source_map_errors/index.html b/files/fr/tools/debugger/source_map_errors/index.html
new file mode 100644
index 0000000000..dba0164fa6
--- /dev/null
+++ b/files/fr/tools/debugger/source_map_errors/index.html
@@ -0,0 +1,61 @@
+---
+title: Erreurs des source map
+slug: Outils/Débogueur/Source_map_errors
+translation_of: Tools/Debugger/Source_map_errors
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">Les Source maps sont des fichiers JSON permettant d'associer les sources transformées (minifiés, combinés, générées) lues par le navigateur, à leurs fichiers source originels. Il est parfois possible d'avoir des problèmes avec les sources map. Cette page présente les plus communs d'entre eux ainsi que des solutions pour les corriger.</p>
+
+<div class="note">
+<p><strong>Note</strong>: En cas d'infamiliarité avec les source map, il est possible d'en apprendre plus ici : <a href="/fr/docs/Tools/Debugger/How_to/Use_a_source_map">Utiliser une source map</a>.</p>
+</div>
+
+<h2 id="Gestion_d'erreurs_des_source_map">Gestion d'erreurs des source map</h2>
+
+<p>Dès lors qu'une erreur arrive, un message apparaitra dans la <a href="/fr/docs/Outils/Console_Web">Console</a>. Le message affichera le message d'erreur, l'URL de la ressource, et l'URL de la source map :</p>
+
+<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p>
+
+<p>Ici, l'URL de la ressource URL indique que <code>bundle.js</code> mentionne une source map, et l'URL de la source map montre ou trouver la source map en elle-même (avec un chemin relatif à la ressource). L'erreur indique que la source map n'est pas un JSON valide.</p>
+
+<p>Il y a quelques erreurs fréquentes qui reviennent avec les sources map. Elles sont décrites dans les sections suivantes.</p>
+
+<h2 id="La_source_map_est_inexistante_ou_inaccessible">La source map est inexistante ou inaccessible</h2>
+
+<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p>
+
+<p>La solution ici est de vérifier que le fichier est bien accessible par le navigateur (le fichier existe, et l'URL est bonne).</p>
+
+<h2 id="Source_map_invalide">Source map invalide</h2>
+
+<p>Le code de la source map data peut être invalide. Soit parce que ce n'est tout simplement pas un fichier JSON, soit parce qu'il est mal formaté. Les messages d'erreurs typiques sont:</p>
+
+<ul>
+ <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li>
+ <li><code>Error: "version" is a required argument</code></li>
+</ul>
+
+<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p>
+
+<h2 id="Source_originale_manquante">Source originale manquante</h2>
+
+<p>Une source originale peut manquer. Il est possible d'avoir cette erreur en tentant d'ouvrir une source originale dans le Débogueur. Le message est un peu différent dans ce cas :</p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p>
+
+<p>Ici, l'erreur sera également affichée dans l'onglet source du Débogueur :</p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p>
+
+<h2 id="NetworkError_lors_de_la_récupération_d'une_ressource">NetworkError lors de la récupération d'une ressource</h2>
+
+<p>Un bug dans Firefox l’empêche de charger les sources maps des extensions web.</p>
+
+<p>Voir le <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437937">Bug 1437937: WebExtensions Doesn't Find Source Maps</a> pour plus de détails.</p>
+
+<pre class="syntaxbox"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
+ Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
+ Source-Map-Adresse: background.js.map</span></span></span></pre>
+
+<p>Le seule workaround est de changer manuellement l'URL de la map pour la rendre publique (http://localhost:1234/file.map.js) et de lancer un serveur web local sur ce port.</p>
diff --git a/files/fr/tools/debugger/ui_tour/index.html b/files/fr/tools/debugger/ui_tour/index.html
new file mode 100644
index 0000000000..44c25e1835
--- /dev/null
+++ b/files/fr/tools/debugger/ui_tour/index.html
@@ -0,0 +1,125 @@
+---
+title: Visite guidée de l'interface utilisateur
+slug: Outils/Débogueur/Visite_guidée_de_l_interface_utilisateur
+translation_of: Tools/Debugger/UI_Tour
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Cet article est une visite guidée des principales sections de l'interface utilisateur du Débogueur JavaScript. Cette interface est séparée en trois panneaux :</p>
+
+<ul>
+ <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane">Panneau de la liste des sources</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">Panneau des sources</a></li>
+ <li>Un troisième panneau, qui dépend de l'état du Débogueur, et peut contenir :
+  <ul>
+   <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Toolbar">Barre d'outils</a></li>
+   <li>Expressions espionnes</li>
+   <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Breakpoints_list">Liste des points d'arrêt</a></li>
+   <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Call_stack">Pile d'exécution</a></li>
+   <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Scopes">Portées</a></li>
+   <li>Points d'arrêt XHR</li>
+   <li>Points d'arrêt des ecouteurs d'évènement</li>
+  </ul>
+ </li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16840/debugger_uiTour_01.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p>
+
+<h2 id="Panneau_de_la_liste_des_sources">Panneau de la liste des sources</h2>
+
+<p>Le panneau de la liste des sources liste tous les fichiers sources JavaScript qui sont chargés dans la page, et permet d'en sélectionner un pour le déboguer. Les sources sont triées par origine, puis organisées selon la structure de dossier depuis lesquels elles sont chargées.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16841/debugger_uiTour_02.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p>
+
+<p>Il est possible de <a href="/fr/docs/Tools/Debugger/How_to/Search#Searching_for_files">rechercher un fichier</a> en utilisant le raccourci clavier <kbd>Ctrl</kbd> + <kbd>P</kbd> (<kbd>Cmd</kbd> + <kbd>P</kbd> sur Mac).</p>
+
+<p>Depuis Firefox 69 les extensions Web sont listés en utilisant le nom de l'extension plutôt que son identifiant.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16868/source_list_pane.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 373px;"></p>
+
+<p>Il est possible de simplifier la liste des fichiers dans la liste des sources avec un clic droit sur un dossier, et une sélection de "définir comme répertoire racine".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16122/directory-root.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>Maintenant, la racine de la liste des sources est la racine du projet, rendant ainsi la navigation bien plus pratique.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16123/directory-root-02.png" style="border: 1px sollid black; display: block; height: 408px; margin: 0 auto; width: 480px;"></p>
+
+<h3 id="Onglet_Structure">Onglet Structure</h3>
+
+<p>L'onglet structure affiche un arbre pour naviguer dans le fichier ouvert. Il permet de se placer directement dans une fonction, une classe, ou une méthode.</p>
+
+<h2 id="Panneau_des_sources">Panneau des sources</h2>
+
+<p>Ce panneau affiche le fichier JavaScript actuellement chargé.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16843/debugger_uiTour_02.5.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p>
+
+<p>Lorsque le panneau des sources est sélectionné, il est possible de <a href="/fr/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">rechercher une string dans le fichier</a> en utilisant  <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> sur Mac).</p>
+
+<p><a href="/fr/docs/Tools/Debugger/How_to/Set_a_breakpoint">Les points d'arrêt</a> ont une flèche bleue superposée au numéro de ligne. Les <a href="/fr/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">points d'arrêt conditionnels</a> ont eux une flèche orange. Si le code est arrêté à un point d'arrêt, la flèche est surchargée de vert. Dans la capture d'écran ci-dessous, il y a trois points d'arrêt :</p>
+
+<ul>
+ <li>La ligne 82 a un point d'arrêt normal et le Débogueur est arrêté dessus.</li>
+ <li>La ligne 85 a un point de sortie console qui affiche le contenu de <em>tableRow </em>dans la console.</li>
+ <li>La ligne 100 a un point d'arrêt conditionnel.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16842/debugger_uiTour_03.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p>
+
+<p>La troisième colonne affiche d'avantage d'informations sur les point d'arrêt. Par exemple le point de sortie console ligne 85 affiche la valeur de <em>tableRow </em>dans la console, et le point d'arrêt conditionnel à la ligne 100 a pour condition que <em>todolist </em>soit <em>undefined.</em></p>
+
+<h2 id="Barre_doutils"><a name="toolbar">Barre d'outils</a></h2>
+
+<p>La barre d'outils est située en haut du panneau de droite :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16844/debugger_toolbar.png" style="display: block; height: 126px; margin-left: auto; margin-right: auto; width: 236px;"></p>
+
+<p>Cette barre est composée de :</p>
+
+<ul>
+ <li>Quatre boutons pour <a href="/fr/docs/Tools/Debugger/How_to/Step_through_code">contrôler le mouvement du Débogueur à travers le script : </a>
+
+  <ul>
+   <li><strong>Pause/Reprendre</strong>(F8) : met en pause ou reprend l’exécution du script en débogage. Lorsque ce bouton est en forme de "reprendre" cela veut dire que le script est en pause, soit parce que vous avez appuyé sur le bouton soit parce que le code est arrivé sur un point d'arrêt.</li>
+   <li><strong>Passer la fonction</strong> (F10) : Passe à la ligne de JavaScript suivante.</li>
+   <li><strong>Entrer dans la fonction</strong> (F11) : Entre dans la fonction appelée par la ligne de JavaScript actuelle si appel il y a. sinon, passe à la ligne suivante.</li>
+   <li><strong>Sortir de la fonction</strong> (Shift-F11): Fait tourner le code jusqu’à sortir de la fonction actuelle.</li>
+  </ul>
+ </li>
+ <li>Un bouton pour désactiver tous les points d'arrêt.</li>
+</ul>
+
+<h2 id="Liste_des_points_darrêt">Liste des points d'arrêt</h2>
+
+<p>Sous la barre d'outils, se trouve une liste de tous les points d'arrêt. À côté de chaque point, il y a une case à cocher qui permet <a href="/fr/docs/Tools/Debugger/How_to/Disable_breakpoints">d'activer/désactiver le point d'arrêt</a> :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16845/debugger_uiTour_breakpoints.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p>
+
+<h2 id="Expressions_espionnes">Expressions espionnes</h2>
+
+<p>Il est possible d'ajouter des expressions espionnes dans la barre de droite. Celles-ci seront évaluées lorsque le code est en pause :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14845/watch-expressions.png" style="display: block; height: 769px; margin-left: auto; margin-right: auto; width: 504px;"></p>
+
+<h2 id="Infobulle_de_variable">Infobulle de variable</h2>
+
+<p>Survoler une variable dans le code source affichera une infobulle contentant sa valeur :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14851/tooltip-1.gif" style="display: block; height: 522px; margin-left: auto; margin-right: auto; width: 988px;"></p>
+
+<h2 id="Pile_dexécution_call_stack">Pile d'exécution (call stack)</h2>
+
+<p>Lorsque le Débogueur est en pause, une pile d'exécution est affichée :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16846/debugger_uiTour_call_stack.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p>
+
+<p>Chaque niveau de la pile à sa propre ligne, avec le nom de la fonction, le nom de fichier, et le numéro de ligne. Cliquer sur cette ligne ouvre la source dans le panneau des sources.</p>
+
+<h2 id="Portées">Portées</h2>
+
+<p>Dans le panneau de droite, se trouve un élément nommé "Portées". Lorsque le Débogueur est arrêté, il est possible d'étendre cette section pour afficher tous les objets qui sont dans la portée du programme en ce point :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16847/debugger_uiTour_scopes.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p>
+
+<p>Les objets sont triés par portée : du plus local au plus global (Window dans la plupart des scripts de page web).</p>