unslug fr: move

15 files changed, 357 insertions, 0 deletions

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>