aboutsummaryrefslogtreecommitdiff
path: root/files/fr/outils/débogueur/comment
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
commit39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch)
tree66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/outils/débogueur/comment
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip
unslug fr: move
Diffstat (limited to 'files/fr/outils/débogueur/comment')
-rw-r--r--files/fr/outils/débogueur/comment/accéder_au_débogage_depuis_un_module_complàmentaire/index.html26
-rw-r--r--files/fr/outils/débogueur/comment/afficher_en_surbrillance_et_inspecter_le_dom/index.html16
-rw-r--r--files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt/index.html45
-rw-r--r--files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt_conditionnel/index.html16
-rw-r--r--files/fr/outils/débogueur/comment/breaking_on_exceptions/index.html28
-rw-r--r--files/fr/outils/débogueur/comment/déboguer_des_sources_évaluées/index.html29
-rw-r--r--files/fr/outils/débogueur/comment/désactiver_des_points_d_arrêts/index.html16
-rw-r--r--files/fr/outils/débogueur/comment/examiner,_modifier,_et_espionner_des_variables/index.html49
-rw-r--r--files/fr/outils/débogueur/comment/formater_et_indenter_un_fichier_minifié/index.html20
-rw-r--r--files/fr/outils/débogueur/comment/index.html12
-rw-r--r--files/fr/outils/débogueur/comment/mettre_une_source_dans_une_boîte_noire/index.html24
-rw-r--r--files/fr/outils/débogueur/comment/ouvrir_le_débogueur/index.html20
-rw-r--r--files/fr/outils/débogueur/comment/parcourir_le_code/index.html25
-rw-r--r--files/fr/outils/débogueur/comment/s_arrêter_sur_un_évènement_dom/index.html25
-rw-r--r--files/fr/outils/débogueur/comment/search/index.html30
-rw-r--r--files/fr/outils/débogueur/comment/set_watch_expressions/index.html18
-rw-r--r--files/fr/outils/débogueur/comment/utiliser_une_source_map/index.html32
17 files changed, 0 insertions, 431 deletions
diff --git a/files/fr/outils/débogueur/comment/accéder_au_débogage_depuis_un_module_complàmentaire/index.html b/files/fr/outils/débogueur/comment/accéder_au_débogage_depuis_un_module_complàmentaire/index.html
deleted file mode 100644
index 5c14593f5f..0000000000
--- a/files/fr/outils/débogueur/comment/accéder_au_débogage_depuis_un_module_complàmentaire/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
----
-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/outils/débogueur/comment/afficher_en_surbrillance_et_inspecter_le_dom/index.html b/files/fr/outils/débogueur/comment/afficher_en_surbrillance_et_inspecter_le_dom/index.html
deleted file mode 100644
index 4c0299205c..0000000000
--- a/files/fr/outils/débogueur/comment/afficher_en_surbrillance_et_inspecter_le_dom/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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/outils/débogueur/comment/ajouter_un_point_d_arrêt/index.html b/files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt/index.html
deleted file mode 100644
index 5f0ac95129..0000000000
--- a/files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
----
-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/outils/débogueur/comment/ajouter_un_point_d_arrêt_conditionnel/index.html b/files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt_conditionnel/index.html
deleted file mode 100644
index b78dfa5a8e..0000000000
--- a/files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt_conditionnel/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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/outils/débogueur/comment/breaking_on_exceptions/index.html b/files/fr/outils/débogueur/comment/breaking_on_exceptions/index.html
deleted file mode 100644
index b009f06df0..0000000000
--- a/files/fr/outils/débogueur/comment/breaking_on_exceptions/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
----
-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/outils/débogueur/comment/déboguer_des_sources_évaluées/index.html b/files/fr/outils/débogueur/comment/déboguer_des_sources_évaluées/index.html
deleted file mode 100644
index e0c305f21a..0000000000
--- a/files/fr/outils/débogueur/comment/déboguer_des_sources_évaluées/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
----
-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/outils/débogueur/comment/désactiver_des_points_d_arrêts/index.html b/files/fr/outils/débogueur/comment/désactiver_des_points_d_arrêts/index.html
deleted file mode 100644
index 5ca12ea619..0000000000
--- a/files/fr/outils/débogueur/comment/désactiver_des_points_d_arrêts/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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/outils/débogueur/comment/examiner,_modifier,_et_espionner_des_variables/index.html b/files/fr/outils/débogueur/comment/examiner,_modifier,_et_espionner_des_variables/index.html
deleted file mode 100644
index ff534ba3ae..0000000000
--- a/files/fr/outils/débogueur/comment/examiner,_modifier,_et_espionner_des_variables/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: 'Examiner, modifier, et espionner des variables'
-slug: 'Outils/Débogueur/Comment/Examiner,_modifier,_et_espionner_des_variables'
-translation_of: Tools/Debugger/How_to/Set_Watch_Expressions
-translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables'
----
-<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>
-
-<h2 id="Examiner_des_variables">Examiner des variables</h2>
-
-<p>Quand le code s'est arrêté sur un point d'arrêt, il est possible d'examiner ses variables grâce au <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables</a> du débogueur :</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13216/debugger-variables-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p>
-
-<p>Les variables sont listées et triées selon leur portée : Dans la fonction ci-dessus, les variables intégrées <code>arguments</code> et <code>this</code> ainsi que les variables locales comme <code>user</code> et <code>greeting</code> seront visibles. Dans la portée globale, les variables globales qui ont été définies (<code>greetme</code>) et les variables globales intégrées (<code>localStorage</code>, <code>console</code>…) seront visibles.</p>
-
-<p>Chaque objet peut être étendu pour voir son contenu en utilisant l'icône en forme de triangle.</p>
-
-<p>Survoler le nom d'une variable affiche une infobulle qui fournit des informations complémentaires sur la variable. Se référer à <a href="/fr/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a> pour des détails sur la signification de ces termes.</p>
-
-<p>Pour voir les propriétés des objets, il est possible d'utiliser le <a href="#" title="#script filter">filtre de script</a> avec le préfixe spécial "*" ou en utilisant la boite de filtrage des variables si vous l'avez activée dans les <a href="/fr/docs/Tools/Debugger/Settings" title="#debugger-settings">options du débogueur</a>.</p>
-
-<p>{{EmbedYouTube("dxCvnixpM_Q")}}</p>
-
-<p>Si une variable existe dans la source, mais a été enlevé par le moteur JavaScript à la suite d'une optimisation. Alors cette variable est présente dans le panneau, mais sa valeur est égale à <code>(optimized away)</code>,  et n'est pas modifiable. Dans la capture d’écran ci-dessous, la variable <code>upvar</code> a été optimisée :</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/10169/optimized-out.png" style="display: block; height: 235px; margin-left: auto; margin-right: auto; width: 332px;"></p>
-
-<h2 id="Modifier_des_variables">Modifier des variables</h2>
-
-<p>Quand le code s'est arrêté à un point d'arrêt, il est possible de modifier les variables dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables </a> du débogueur. Il suffit de cliquer sur la valeur actuelle d'une variable pour pouvoir la réécrire :</p>
-
-<p>{{EmbedYouTube("FKG-jkvSpq8")}}</p>
-
-<h2 id="Espionner_une_expression">Espionner une expression</h2>
-
-<p>Les expressions espionnes sont des expressions qui sont évaluées à chaque fois que l'exécution s'arrête. Il est alors possible d'examiner le résultat de ces expressions. C'est utile dans la mesure où cela permet d'inspecter des éléments invariants dans votre code que vous savez être présents, mais qui ne sont pas nécessairement prêts pour une inspection.</p>
-
-<p>Pour ajouter une expression espionne, il faut cliquer sur la boite "ajouter une expression espionne" puis entrer l'expression JavaScript que vous souhaitez surveiller en parcourant votre code.</p>
-
-<p>Il ne reste plus qu'à faire tourner votre code. L'expression espionne ne fait rien tant que le code n'est pas arrêté à un point d'arrêt. Quand le code est arrêté, les expressions espionnes sont activées et leur valeur apparaitra alors :</p>
-
-<p>{{EmbedYouTube("CwGU-5wKRw0")}}</p>
-
-<p>À chaque changement de la valeur de l'expression espionne, sa boite sera brièvement affichée en surbrillance jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de croix à côté. Bien sûr, il est également possible d'avoir plus d'une seule expression espionne à la fois.</p>
diff --git a/files/fr/outils/débogueur/comment/formater_et_indenter_un_fichier_minifié/index.html b/files/fr/outils/débogueur/comment/formater_et_indenter_un_fichier_minifié/index.html
deleted file mode 100644
index 4ba2ddaf91..0000000000
--- a/files/fr/outils/débogueur/comment/formater_et_indenter_un_fichier_minifié/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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/outils/débogueur/comment/index.html b/files/fr/outils/débogueur/comment/index.html
deleted file mode 100644
index 4b9f36e8fe..0000000000
--- a/files/fr/outils/débogueur/comment/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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/outils/débogueur/comment/mettre_une_source_dans_une_boîte_noire/index.html b/files/fr/outils/débogueur/comment/mettre_une_source_dans_une_boîte_noire/index.html
deleted file mode 100644
index 2af7f19958..0000000000
--- a/files/fr/outils/débogueur/comment/mettre_une_source_dans_une_boîte_noire/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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/outils/débogueur/comment/ouvrir_le_débogueur/index.html b/files/fr/outils/débogueur/comment/ouvrir_le_débogueur/index.html
deleted file mode 100644
index e56cd0a53c..0000000000
--- a/files/fr/outils/débogueur/comment/ouvrir_le_débogueur/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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/outils/débogueur/comment/parcourir_le_code/index.html b/files/fr/outils/débogueur/comment/parcourir_le_code/index.html
deleted file mode 100644
index 9e3d8a3ae7..0000000000
--- a/files/fr/outils/débogueur/comment/parcourir_le_code/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
----
-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/outils/débogueur/comment/s_arrêter_sur_un_évènement_dom/index.html b/files/fr/outils/débogueur/comment/s_arrêter_sur_un_évènement_dom/index.html
deleted file mode 100644
index 5ab981337b..0000000000
--- a/files/fr/outils/débogueur/comment/s_arrêter_sur_un_évènement_dom/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
----
-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/outils/débogueur/comment/search/index.html b/files/fr/outils/débogueur/comment/search/index.html
deleted file mode 100644
index 3db07016dc..0000000000
--- a/files/fr/outils/débogueur/comment/search/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
----
-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/outils/débogueur/comment/set_watch_expressions/index.html b/files/fr/outils/débogueur/comment/set_watch_expressions/index.html
deleted file mode 100644
index 0ee376dc77..0000000000
--- a/files/fr/outils/débogueur/comment/set_watch_expressions/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
----
-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/outils/débogueur/comment/utiliser_une_source_map/index.html b/files/fr/outils/débogueur/comment/utiliser_une_source_map/index.html
deleted file mode 100644
index fb9c4d3c8b..0000000000
--- a/files/fr/outils/débogueur/comment/utiliser_une_source_map/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
----
-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>