unslug fr: move

27 files changed, 1358 insertions, 0 deletions

diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html
new file mode 100644
index 0000000000..1ba15a6767
--- /dev/null
+++ b/files/fr/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html
@@ -0,0 +1,59 @@
+---
+title: FAQ de l'Inspecteur DOM
+slug: Inspecteur_DOM/DOM_Inspector_FAQ
+tags:
+  - DOM_Inspector
+translation_of: Tools/Add-ons/DOM_Inspector/DOM_Inspector_FAQ
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cet outil est un module complémentaire pour les applications basées sur XUL comme Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documentation pour <a href="/fr/docs/Tools/Page_Inspector">L'Inspecteur</a>.</p>
+</div>
+
+<h2 id="Comment_faire_pour_inspecter_une_pagefenêtre_web">Comment faire pour inspecter une page/fenêtre web ?</h2>
+
+<p>Le menu "File" permet différentes manières d'inspecter un document :</p>
+
+<dl>
+ <dt>Inspect Content Document</dt>
+ <dd>Inspecte un contenu non privilégié présent dans l'onglet choisi.</dd>
+ <dt>Inspect Chrome Document</dt>
+ <dd>Inspecte une application chrome. Cela inclut les fenêtres XUL ouvertes.</dd>
+ <dt>Inspect a URL</dt>
+ <dd>Cela sélectionne simplement la barre d'adresse de l'Inspecteur DOM. Cette barre d'adresse permet d'inspecter les documents qui peuvent être accédés via une URL. Inspecter une URL a pour effet de charger le document de correspondant à cette URL dans le panneau "Browser". Cela peut inclure des documents chrome. Il n'est cependant pas recommandé d'inspecter des documents XUL directement via URL, car certains comportements du document peuvent dépendre du fait que le document doit être contenu dans un autre document XUL. À la place, il est recommandé de charger le document XUL normalement (en utilisant des commandes ou en ouvrant des fenêtres dans l'application utilisée), puis de trouver et de l'inspecter grâce au menu "<strong>Inspect Chrome Document"</strong>.</dd>
+</dl>
+
+<h2 id="Pourquoi_certains_nœuds_dans_le_panneau_DOM_nodes_apparaissent_en_rouge">Pourquoi certains nœuds dans le panneau "DOM nodes" apparaissent en rouge ?</h2>
+
+<p>Ces nœuds sont des <a href="/fr/XBL/XBL_1.0_Reference#Anonymous_Content" title="en/XBL/XBL_1.0_Reference#Anonymous_Content">nœuds à contenu anonyme</a>. Cela veut dire qu'ils ne sont pas dans le DOM généré par le document d’origine.</p>
+
+<h2 id="Comment_faire_pour_cacher_ces_nœuds_anonymes">Comment faire pour cacher ces nœuds anonymes ?</h2>
+
+<p>Il est possible de cacher les nœuds anonymes dans l'inspecteur en décochant l'option <strong>"Show Anonymous Content"</strong> dans le menu menu <strong>"View"</strong>.</p>
+
+<h2 id="Il_y_beaucoup_de_nœuds_text_vides_que_je_ne_vois_pas_dans_le_document_d'origine._Que_sont-ils_pourquoi_sont_ils_là_et_comment_s'en_débarrasser">Il y beaucoup de nœuds #text vides que je ne vois pas dans le document d'origine. Que sont-ils, pourquoi sont ils là et comment s'en débarrasser ?</h2>
+
+<p>Ces nœuds sont actuellement les sauts de ligne et l'espacement entre les éléments. Une longue discussion sur pourquoi ces nœuds sont présent est disponible dans le {{ Bug(26179) }}.</p>
+
+<p>En revanche, il est possible de cacher ces <a href="/fr/Whitespace_in_the_DOM" title="en/Whitespace_in_the_DOM">nœuds d'espaces</a> dans l'inspecteur en décochant l'option<strong> "Show Whitespace Nodes</strong>" dans le menu <strong>"View"</strong>. Il est à noter que certains nœuds de texte vide ne seront pas cachés. Ces nœuds ont en effet une propriété CSS <code><a class="external" href="http://www.w3.org/TR/CSS21/text.html#propdef-white-space">white-space</a></code> qui empêche l'agent utilisateur de réduire les séquences d'espaces, et ne sont donc pas cachés.</p>
+
+<h2 id="Il_est_parfois_difficile_de_trouver_un_nœud_en_particulier_dans_l'arbre_DOM._Existe-t-il_une_manière_plus_rapide_pour_le_trouver_et_naviguer_dans_l'arbre">Il est parfois difficile de trouver un nœud en particulier dans l'arbre DOM. Existe-t-il une manière plus rapide pour le trouver et naviguer dans l'arbre ?</h2>
+
+<p>Bien sûr. Il est possible d'effectuer une recherche basée sur le nom du nœud, sur son id, ou même sur un attribut/paire de valeur. Pour effectuer une recherche il faut cliquer sur<strong> "Find Nodes..." </strong>dans le menu <strong>"Edit"</strong> (ou utiliser le raccourci Ctrl+f). Une fenêtre dans laquelle il est possible de rentrer les critères de la recherche apparaitra alors. La recherche de l'Inspecteur DOM utilise les<a href="/fr/JavaScript/Reference/Global_Objects/RegExp" title="en/Core_JavaScript_1.5 Reference/Global_Objects/RegExp"> RegExps JavaScript</a> pour trouver les nœuds et fera de la correspondance partielle automatiquement. Ainsi, faire une recherche avec l'expression "tab" retournera des résultats pour <a href="/fr/XUL/tabpanel" title="en/XUL/tabpanel">tabpanel</a> et <a href="/fr/XUL/tabbox" title="en/XUL/tabbox">tabbox</a> en plus de <a href="/fr/XUL/tab" title="en/XUL/tab">tab</a>. pour limiter la recherche, il est possible d'utiliser les marqueurs de début (^) et de fin ($) de chaîne de caractère. Ainsi, rechercher "^tab$" retournera uniquement les nœuds dont les noms sont <em>exactement</em> "tab".</p>
+
+<p>Il est également possible dans le cas d'un manque total d'information sur le noeud, d'essayer de le sélectionner en cliquant dessus. Pour cela, il faut trouver le nœud dans la page puis le sélectionner grâce au bouton "inspect by clickling" de la barre d'outils. Le menu <strong>"Edit"</strong> inclut également une option <strong>"Select Element by Click"</strong>.</p>
+
+<h2 id="Comment_inspecter_les_pseudo-classes_et_les_pseudo-éléments_dans_la_vue_des_règles_CSS">Comment inspecter les pseudo-classes et les pseudo-éléments dans la vue des règles CSS ?</h2>
+
+<p>L'Inspecteur DOM permet de forcer les pseudo-classes <a href="/fr/CSS/:hover" title="CSS/:hover">:hover</a>, <a href="/fr/CSS/:active" title="en/CSS/:active">:active</a>, et <a href="/fr/CSS/:focus" title="en/CSS/:focus">:focus</a> à s'appliquer sur un nœud donné. Pour ce faire, il faut depuis le panneau des nœuds DOM, sélectionner le nœud et faire apparaître le menu contextuel (clic droit sur le nœud). Dans ce menu, il faut cliquer sur l'option <strong>Set Pseudo-classes</strong> qui permet d'appliquer les pseudo-classes mentionnées ci-dessus.</p>
+
+<p>Il n'y a actuellement aucun moyen d'inspecter les règles appliquées dynamiquement pour d'autres pseudo-classes ou pseudo-éléments en utilisant l'interface de l'Inspecteur DOM. Il est en revanche possible de trouver n'importe quelle règle (afin de la modifier) dans sa feuille de style parente en utilisant le <strong>"Style Sheets viewer"</strong> dans le panneau document, puis de la localiser dans le <strong>"CSS Rules viewer"</strong> du panneau <strong>"object".</strong></p>
+
+<div class="originaldocinfo">
+<h2 id="Informations_sur_le_document_d'origine">Informations sur le document d'origine</h2>
+
+<ul>
+ <li>Autheur(s) : Christopher Aillon</li>
+ <li>Dernière mise à jour: November 11, 2003</li>
+ <li>Informations de copyright : Des portions de contenu sont © 1998–2007 par des contributeurs mozilla.org individuels. Le contenu est disponible sous licence Creative Commons | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Détails</a>.</li>
+</ul>
+</div>
diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/index.html
new file mode 100644
index 0000000000..bb280fc286
--- /dev/null
+++ b/files/fr/orphaned/tools/add-ons/dom_inspector/index.html
@@ -0,0 +1,70 @@
+---
+title: Inspecteur DOM
+slug: Inspecteur_DOM
+tags:
+  - DOM
+  - 'DOM:Tools'
+  - DOM_Inspector
+  - Extensions
+  - 'Extensions:Tools'
+  - Themes
+  - 'Themes:Tools'
+  - Tools
+  - Web Development
+  - 'Web Development:Tools'
+  - XUL
+  - 'XUL:Tools'
+translation_of: Tools/Add-ons/DOM_Inspector
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cet outil est un module complémentaire pour les applications bassées sur XUL tels que Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documention pour <a href="/fr/docs/Tools/Page_Inspector">L'Inspecteur</a>.</p>
+</div>
+
+<p><strong>L'inspecteur DOM</strong> (également connu sous l'appellation <strong>DOMi</strong>) est un outil de Mozilla servant à inspecter, parcourir et modifier le <a href="/fr/docs/Web/API/Document_Object_Model">modèle objet de document</a> des documents - habituellement des pages Web ou des fenêtres <a href="/fr/docs/Mozilla/Tech/XUL">XUL</a>.<br>
+ Il est possible de naviguer dans la  hiérarchie DOM en utilisant une fenêtre à deux panneau qui permet une visibilitée du document et de tout les noeuds qu'il contient.</p>
+
+<h2 id="Documentation">Documentation</h2>
+
+<dl>
+ <dt><a href="/fr/DOM_Inspector/Introduction_to_DOM_Inspector" title="Introduction à l'Inspecteur DOM">Introduction à l'Inspecteur DOM</a></dt>
+ <dd>Un tutoriel guidé qui aide à démarrer avec l'Inspecteur DOM.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/DOM_Inspector/DOM_Inspector_FAQ" title="FAQ de l'Inspecteur DOM">FAQ de l'Inspecteur DOM</a></dt>
+ <dd>Questions courantes sur l'Inspecteur DOM.</dd>
+</dl>
+
+<dl>
+ <dt><a class="external" href="http://kb.mozillazine.org/DOM_Inspector">Page sur de MozillaZine sur l'Inspecteur DOM</a></dt>
+ <dd>Des informations complémentaires sur l'Inspecteur DOM.</dd>
+ <dt><a href="http://asurkov.blogspot.com/2013/02/build-dom-inspector.html">Comment compiler l'Inspecteur DOM.</a></dt>
+ <dd>Article de blog sur comment compiler l'Inspecteur DOM.</dd>
+</dl>
+
+<h2 id="Obtenir_l'Inspecteur_DOM.">Obtenir l'Inspecteur DOM.</h2>
+
+<dl>
+ <dt>Firefox et Thunderbird</dt>
+ <dd>Il faut télécharger et installer <a class="link-https" href="https://addons.mozilla.org/fr/firefox/addon/6622" title="L'Inspector DOM">L'Inspector DOM</a> depuis le site web AMO. Les utilisateurs de Thunderbird naviguant dans AMO dans Firefox doivent sauvegarder le lien de l'installation, ou visiter la page <a class="link-https" href="https://addons.mozilla.org/fr/thunderbird/addon/6622" title="Inspecteur DOM pour Thunderbird">Inspecteur DOM pour Thunderbird</a>.</dd>
+</dl>
+
+<dl>
+ <dt>Thunderbird 2</dt>
+ <dd><a class="link-https" href="https://addons.mozilla.org/fr/thunderbird/addon/1806">L'Inspecteur DOM pour Thunderbird 2</a> est disponible dans les <a class="link-https" href="https://addons.mozilla.org/fr/thunderbird/">modules complémentaires de Thunderbird</a>. Il est également possible de compiler Thunderbird vous-même avec les options suivantes :</dd>
+</dl>
+
+<pre>ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+</pre>
+
+<dl>
+ <dt>Mozilla Suite et SeaMonkey</dt>
+ <dd>Selectioner Outils &gt; Development Web &gt; Inspecteut DOM. Vous pouvez installer le panneau latéral via Éditer &gt; Préferences &gt; Avancé &gt; Inspecteur DOM, puis en ouvrant le panneau de l'inspecteur et en visitant un site web.</dd>
+</dl>
+
+<h2 id="Reporter_un_bug_dans_l'Inspecteur_DOM">Reporter un bug dans l'Inspecteur DOM</h2>
+
+<p>Utilisez le "component" <a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&amp;product=Other%20Applications&amp;component=DOM%20Inspector">"DOM Inspector" dans Bugzilla</a>.</p>
+
+<p>Pour trouver qui a des connaissances sur <a href="https://hg.mozilla.org/dom-inspector" title="le code de l'Inspecteur DOM">le code de l'Inspecteur DOM</a> ainsi que le pays dans lequel il se trouve, regardez  <a class="link-https" href="https://wiki.mozilla.org/Modules/All#DOM_Inspector" title="liste des modules">dans la liste des modules</a>.</p>
diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/internals/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/internals/index.html
new file mode 100644
index 0000000000..d817bd62cf
--- /dev/null
+++ b/files/fr/orphaned/tools/add-ons/dom_inspector/internals/index.html
@@ -0,0 +1,242 @@
+---
+title: Interieur de l'Inspecteur DOM
+slug: Inspecteur_DOM/Internals
+translation_of: Tools/Add-ons/DOM_Inspector/Internals
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>L'Inspecteur DOM est un module complémentaire pour les applications basées sur XUL comme Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documentation pour <a href="/fr/docs/Tools/Page_Inspector">L'Inspecteur</a>.</p>
+</div>
+
+<p>Il ya trois parties principales dans l'Inspecteur DOM. La plus utilisée est l'interface utilisateur principale basée sur <code>inspector.xul</code>. il s'agit de l'Inspecteur à deux panneaux qui apparait au lancement de l'outil.</p>
+
+<p><img alt="DOM Inspector primary UI inspecting browser.xul" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p>
+
+<p>En dehors de l'interface principale de l'Inspecteur DOM, il y a quelques autres inspecteurs haut-niveau qui diffèrent légèrement (l'inspecteur d'objets et le panneau latéral de l'Inspecteur DOM utilisé dans SeaMonkey). Nous allons d'abord nous concentrer sur <code>inspector.xul</code> et son point d'entrée, puis nous allons ensuite expliquer comment ces autres inspecteurs diffèrent.</p>
+
+<h2 id="L'Inspecteur_DOM_d'un_point_de_vue_haut_niveau">L'Inspecteur DOM d'un point de vue haut niveau</h2>
+
+<p>L'interface utilisateur principale de l'Inspecteur DOM est composée de barres d'outils et d'un "<strong>panelset</strong>." Le panelset contient deux panneaux. Un qui réagit aux changements occurrents dans le document inspecté. Et un qui réagit aux changements dans la sélection du premier panneau. Il s'agit respectivement du panneau document et du panneau objet.</p>
+
+<p>Le but d'un panneau est de gérer les <strong>"viewers</strong>" disponibles. En haut de chaque panneau, se trouve une barre d'outils qui contient :un bouton menu permettant de choisir quel viewer afficher parmi la <strong>viewer list</strong>, une étiquette affichant le nom du viewer actuel, et un autre bouton permettant d'effectuer des actions spécifiques au viewer.</p>
+
+<p>Les viewers sont chargés dynamiquement. Lorsqu'un panneau reçoit l'ordre de changer de viewer, l'ancien viewer est détruit et le nouveau est chargé à la place. Ainsi le panelset et les panneaux fonctionnent comme des frameset et frames. Cette comparaison s'avère très proche de la réalité, car chaque panneau contient en réalité un <code><a href="/fr/XUL/browser" title="en/XUL/browser">browser</a></code> anonyme, et, car chaque viewer existe dans un document séparé chargé dans le navigateur. Cette séparation permet aux viewers d'être indépendants, aec un XUL de viewer défini dans son propre document et chargé dans sa propre portée, cela sans crainte de collisions entre le XUL, le CSS ou le JS. Une autre conséquence est qu’en utilisant un <a href="/fr/Setting_up_an_extension_development_environment" title="en/Setting up an extension development environment">profil de développement</a> correctement configuré, alors la plupart des changements développés sont visibles uniquement en changeant de viewer puis en revenant sur le viewer précédant.</p>
+
+<p>Sachant comment les viewers sont écrits, il est maintenant possible de jeter un oeil à l'organisation du code source de l'Inspecteur DOM.d</p>
+
+<h2 id="Organisation_du_code_source">Organisation du code source</h2>
+
+<p>Le contenu du dossier racine de l'Inspecteur DOM devrait ressembler à ceci :</p>
+
+<ul>
+ <li>base/
+  <ul>
+   <li>js/
+    <ul>
+     <li>inspector-cmdline.js</li>
+     <li>Makefile.in</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>build/
+  <ul>
+   <li>install.js</li>
+   <li>Makefile.in</li>
+  </ul>
+ </li>
+ <li>resources/
+  <ul>
+   <li>content/
+    <ul>
+     <li><var>…</var></li>
+    </ul>
+   </li>
+   <li>locale/
+    <ul>
+     <li><var>…</var></li>
+    </ul>
+   </li>
+   <li>skin/
+    <ul>
+     <li><var>…</var></li>
+    </ul>
+   </li>
+   <li>Makefile.in</li>
+  </ul>
+ </li>
+ <li>install.rdf</li>
+ <li>jar.mn</li>
+ <li>Makefile.in</li>
+ <li>makefiles.sh</li>
+</ul>
+
+<p>Pratiquement toute la partie intéressante se trouve dans le dossier resources/content/. Son contenu devrait ressembler à ceci :</p>
+
+<ul>
+ <li>extensions/
+  <ul>
+   <li>…</li>
+  </ul>
+ </li>
+ <li>jsutil/
+  <ul>
+   <li>…</li>
+  </ul>
+ </li>
+ <li>prefs/
+  <ul>
+   <li>…</li>
+  </ul>
+ </li>
+ <li>res/
+  <ul>
+   <li>…</li>
+  </ul>
+ </li>
+ <li>tests/
+  <ul>
+   <li>…</li>
+  </ul>
+ </li>
+ <li>viewers/
+  <ul>
+   <li>…</li>
+  </ul>
+ </li>
+ <li>browserOverlay.xul</li>
+ <li>commandOverlay.xul</li>
+ <li>editingOverlay.xul</li>
+ <li>Flasher.js</li>
+ <li>hooks.js</li>
+ <li>inspector.css</li>
+ <li>inspector.js</li>
+ <li>inspectorOverlay.xul</li>
+ <li>inspector.xml</li>
+ <li>inspector.xul</li>
+ <li>keysetOverlay.xul</li>
+ <li>object.js</li>
+ <li>object.xul</li>
+ <li>popupOverlay.xul</li>
+ <li>sidebar.js</li>
+ <li>sidebar.xul</li>
+ <li>statusbarOverlay.xul</li>
+ <li>tasksOverlay-cz.xul</li>
+ <li>tasksOverlay-ff.xul</li>
+ <li>tasksOverlay-mobile.xul</li>
+ <li>tasksOverlay-sb.xul</li>
+ <li>tasksOverlay-tb.xul</li>
+ <li>tasksOverlay.xul</li>
+ <li>toolboxOverlay.xul</li>
+ <li>utils.js</li>
+ <li>venkmanOverlay.xul</li>
+ <li>ViewerRegistry.js</li>
+</ul>
+
+<h3 id="Superpositions_(Overlays)">Superpositions (Overlays)</h3>
+
+<p>Il y a de nombreux overlays. Certains overlays peuvent être décrits comme des overlays d'intégration hôte, et d'autres comme des overlays à structure partagée.</p>
+
+<h4 id="Overlays_d'intégration_hôte">Overlays d'intégration hôte</h4>
+
+<p>L'Inspecteur DOM est une extension à utilité générique, adaptée à une utilisation avec n'importe quel toolkit d'application hôte de Mozilla. Afin que l'Inspecteur DOM soit utile avec son application hôte, il doit obligatoirement y avoir un moyen de lancer l'Inspecteur DOM depuis l'intérieur de l'application. Soit l'application fournit ces moyens eux-mêmes (généralement en intégrant l'Inspecteur DOM dans l'application), soit l'Inspecteur DOM doit explicitement supporter l'application en ayant ses propres options de menus et/ou raccourcis clavier avec des overlays d'intégration hôte.</p>
+
+<p>L'Inspecteur DOM supporte explicitement plusieurs applications Mozilla en fournissant des overlays d'intégration hôte. Ces overlays sont :</p>
+
+<ul>
+ <li>browserOverlay.xul</li>
+ <li>tasksOverlay-cz.xul</li>
+ <li>tasksOverlay-ff.xul</li>
+ <li>tasksOverlay-mobile.xul</li>
+ <li>tasksOverlay-sb.xul</li>
+ <li>tasksOverlay-tb.xul</li>
+ <li>tasksOverlay.xul</li>
+ <li>venkmanOverlay.xul</li>
+ <li>prefs/prefsOverlay.xul</li>
+</ul>
+
+<p>Un examen plus approfondi du <a href="/fr/chrome.manifest" title="en/chrome.manifest">manifeste chrome</a> révèlera que l'Inspecteur DOM utilise également des overlays conditionnels dans sa fenêtre principale :</p>
+
+<pre><code>overlay chrome://inspector/content/inspector.xul chrome://communicator/content/utilityOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
+overlay chrome://inspector/content/inspector.xul chrome://communicator/content/tasksOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</code>
+</pre>
+
+<pre><code>overlay chrome://inspector/content/inspector.xul chrome://browser/content/baseMenuOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}</code>
+</pre>
+
+<p>Ces overlays fournis par l'hôte permettent à l'Inspecteur DOM d'adopter une apparence et des sensations similaires à l'application hôte. (Au-dessus, respectivement SeaMonkey et Firefox).</p>
+
+<p>Il y a plusieurs overlays dans le dossier "resources/contents/" qui ne font pas partie de cette catégorie d'overlays d'intégration hôte. En effet, l'Inspecteur DOM utilise également des overlays partagés pour construire sa propre interface utilisateur.</p>
+
+<h4 id="Overlays_à_structure_partagée">Overlays à structure partagée</h4>
+
+<p>Jetter un oeil au contenu du fichier inspector.xul de l'interface utilisateur principale de l'Inspecteur DOM révélera qu'il ne contient quasiment aucun élément visible. Au moment présent, il a une <code><a href="/fr/XUL/toolbox" title="en/XUL/toolbox">boite à outils</a></code> contenant un <code><a href="/fr/XUL/menubar" title="en/XUL/menubar">menubar</a></code> vide et une <code><a href="/fr/XUL/toolbar" title="en/XUL/toolbar">barre d'outils</a></code> vide, ainsi qu'une <code><a href="/fr/XUL/vbox" title="en/XUL/vbox">vbox</a></code> vide :</p>
+
+<pre><code>  &lt;toolbox id="tbxInsToolbox"&gt;
+    &lt;menubar id="mbrInspectorMain"/&gt;
+    &lt;toolbar id="tbInspectorPrimary"/&gt;
+  &lt;/toolbox&gt;
+
+  &lt;vbox id="bxInspectorMain" flex="1"/&gt;</code>
+</pre>
+
+<p>Il n'y a aucun menu, barres d'outils, etc. définies ici. Même la plupart des éléments qui ne sont pas visibles tels que <code><a href="/fr/XUL/keyset" title="en/XUL/keyset">key</a></code>- et <code><a href="/fr/XUL/commandset" title="en/XUL/commandset">commandset</a></code>, ne sont pas définis dans inspector.xul. Ils sont tirés d'une série d'overlays, afin que le XUL définissant l'interface de l’Inspecteur DOM puisse être organisé en unités discrètes. inspector.xul en lui-même n'est qu'un squelette définissant la structure et la disposition basique de la fenêtre principale de l'Inspecteur DOM, laissant ainsi la plupart de son contenu être ajouté par les overlays.</p>
+
+<p>En utilisant des overlays modulaires permet également au XUL commun d'être partagé à travers les différents documents qui composent l'interface de l'Inspectreur DOM, même si toutes les overlays ne sont pas partagées par plusieurs utilisateurs. Il existe des overlays sur mesure uniquement pour des organisations.</p>
+
+<p>Dans certains cas, les overlays sont surchargées par d'autres overlays. Si nous imaginons une structure d'arbre obtenue en connectant les overlays en tant qu'enfants des fichiers qu'elles "overlayent" tout en ignorant les overlays utilisées pour l'intégration hôte, nous pouvons alors visualiser l'arbre d'overlays pour un fichier donné. Voici l'arbre d'overlay étendu ne prenant pas en compte les overlays d'hôte pour inspector.xul :</p>
+
+<ul>
+ <li><a class="external" rel="freelink">chrome://inspector/content/inspector.xul</a>
+
+  <ul>
+   <li><a class="external" rel="freelink">chrome://inspector/content/inspectorOverlay.xul</a></li>
+   <li><a class="external" rel="freelink">chrome://inspector/content/toolboxOverlay.xul</a></li>
+   <li><a class="external" rel="freelink">chrome://inspector/content/popupOverlay.xul</a>
+    <ul>
+     <li><a class="external" rel="freelink">chrome://inspector/content/editingOverlay.xul</a></li>
+     <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...pupOverlay.xul</a></li>
+     <li><a class="external" rel="freelink">chrome://inspector/content/viewers/s...pupOverlay.xul</a></li>
+    </ul>
+   </li>
+   <li><a class="external" rel="freelink">chrome://inspector/content/commandOverlay.xul</a>
+    <ul>
+     <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...andOverlay.xul</a></li>
+    </ul>
+   </li>
+   <li><a class="external" rel="freelink">chrome://inspector/content/keysetOverlay.xul</a>
+    <ul>
+     <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...setOverlay.xul</a></li>
+    </ul>
+   </li>
+   <li><a class="external" rel="freelink">chrome://inspector/content/statusbarOverlay.xul</a></li>
+   <li><a class="external" rel="freelink">chrome://global/content/globalOverlay.xul</a></li>
+  </ul>
+ </li>
+</ul>
+
+<p>(Il est à noter que les overlays des sous dossiers du viewer —viewers/dom et viewers/styleRules— sont chargés à la suite des <a href="/fr/Chrome_Registration#overlay" title="/en/chrome.manifest#overlay"><code>directives d'overlay</code></a> dans le manifeste chrome de l'Inspecteur DOM, au lieu d'être simplement importé explicitement en utilisant une instruction de processus <code>xul-overlay</code> dans l'overlay surchargée)</p>
+
+<dl>
+ <dt>inspectorOverlay.xul</dt>
+ <dd>
+ <p>Ce fichier importe les scripts supérieurs, dont l'Inspecteur à besoin (cela inclut les dépendances). De plus, il définit le contenu du corps principal de la fenêtre de l'Inspecteur DOM c'est à dire : le panelset, les viewers documents et objets et le document du panneau du navigateur. (Le panneau du navigateur n'est pas un panneau viewer dans le sens ou les viewer document et objets eux le sont. C'est-à-dire les sortes de panneaux définis précédemment en relation avec le panelset. "panneau" est ici utilisé en fonction du panneau du navigateur dans un sens large pour décrire la mixture d'interface générique)</p>
+ </dd>
+ <dt>toolboxOverlay.xul</dt>
+ <dd>
+ <p>Cette overlay, remplit la boite à outils de l'Inspecteur, incluant les boutons de la barre d'outils et la "location bar" avec son bouton "inspect". toolboxOverlay.xul définit également la structure de menubar, sans pour autant définir le contenu des menus eux-mêmes.</p>
+ </dd>
+ <dt>popupOverlay.xul</dt>
+ <dd>
+ <p>Cette iverlay définit la plupart de la structure statique des menus dans le menubar, avec quelques exceptions. Pour des raisons évidentes, le contenu des menus dynamiques n’est pas défini ici. Les menus dynamiques comprennent les pop-up du menu Inspecter ("Inspect Content Document" et "Inspect Chrome Document") du menu fichier, et les menus "Document Viewer" et "Object Viewer" du menu View. La préférence menuitems dans le menu View qui affecte uniquement le viewer de noeuds DOM ("Blink Selected Element", etc..) sont ajouté par l'overlay de pop-up de ce viewer (resources/content/viewers/dom/popupOverlay.xul). C'est également vrai pour les menuitems Find et le menuitem "Select Element By Click" dans le menu Edit, car aucun viewer à part le viewer de noeuds DOM ne supporte ces features.</p>
+
+ <p>Les autres objets du menu Edit sont également utilisés dans plusieurs menus contextuels de viewers. Pour cette raison, seuls les id des menuitems sont référencés ici, et les difinitions complètes sont importées depuis editingOverlay.xul. Les viewers qui incluent un ou plus de ces menuitems dans leu contexte suivent la même pratique.</p>
+
+ <p>Le tooltip utilisé pour les menus Inspect—Celui utilisé pour afficher le titre d'un document et son URI pour un menuitme donné--est également défini ici.</p>
+ </dd>
+ <dt>commandOverlay.xul</dt>
+ <dd>Les menuitems fournis par popupOverlay.xul qui délèguent à des éléments de <code><a href="/fr/XUL/command" title="en/XUL/command">command</a></code> externe ont leurs commandes définies ici.</dd>
+ <dt>keysetOverlay.xul</dt>
+ <dd>Certains menutimes fournis par popupOverlay.xul ont leurs <code><a href="/fr/XUL/key" title="en/XUL/key">keys</a></code> définis ici. Au moment présent, toutes les clés qui correspondent aux objets du menu Edit sont dans editingOverlay sans aucune bonne raison.</dd>
+ <dt>statusbarOverlay.xul</dt>
+ <dd>Ce fichier définit le contenu de la barre de statuts de l'Inspecteur DOM. L'Inspecteur DOM n'ayant pas de barre de statut, ce fichier est complètement inutile.</dd>
+</dl>
diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html
new file mode 100644
index 0000000000..6e31978549
--- /dev/null
+++ b/files/fr/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html
@@ -0,0 +1,96 @@
+---
+title: Introduction à l'Inspecteur DOM
+slug: Inspecteur_DOM/Introduction_to_DOM_Inspector
+tags:
+  - DOM_Inspector
+translation_of: Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>L'Inspecteur DOM est une extension Mozilla qui est accéssible depuis le menu <strong>Tools &gt; Web Development</strong> dans SeaMonkey, ou en sélectionant "DOM Inspector" depuis le menu Developpement web de Firefox ou Thunderbird. L'Inspecteur DOM est un programe standalone qui supporte toutes les applications toolkit, et il est également possible de l'inclure dans votre propre application XUL. L'Inspecteur DOM peut servir à vérifier la qualitée et l'état du <a href="/en/DOM" title="en/DOM">DOM</a>, ou peut être utilisé pour manipuler le DOM à la main si besoin est.</p>
+
+<div class="note"><strong>Note:</strong> Depuis Firefox 3, l'Inspecteur DOM n'est pas inclut par défaut dans Firefox. Il est alors nécessaire de le <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622"> télécharger et de l’installer</a> depuis le site des modules complémentaires de Mozilla. (Note lien mort)</div>
+
+<p>Au lancement de l'Inspecteur DOM, une application à deux panneaux apparait. L'Inspecteur DOM possède une barre d'adresse, et quelques menus comme ceux de Firefox. Dans SeaMonkey, des menus globaux sont présents en plus.</p>
+
+<p><img alt="domi.png" class="default internal" src="/@api/deki/files/4684/=domi.png"></p>
+
+<h2 id="Inspecter_un_Document">Inspecter un Document</h2>
+
+<p>Lors de l'ouverture de l'Inspecteur DOM, il est possible qu'un document associé ait été chargé. Cela dépend de l'application hôte. Si l'Inspecteur n'a pas automatiquement chargé un document ou a chargé un document différent de celui voulu, il existe plusieurs manières de sélectionner le document voulu.</p>
+
+<h3 id="File_.3E_Inspect_a_Window_.3E" name="File_.3E_Inspect_a_Window_.3E">Inspecter les Content Documents</h3>
+
+<p>L'option "Inspect Content Document" est accessible depuis le menu "File" et liste tous les content documents actuellement chargés. Dans les navigateurs Firefox et SeaMonkey, il s'agit des pages webs ouverts dans les onglets. Dans Thunderbird et SeaMonkey Mail and News, il s'agit des messages actuellement vus.<img alt="domi-inspect-content-popup.png" class="default internal" src="/@api/deki/files/4690/=domi-inspect-content-popup.png"></p>
+
+<h3 id="File_.3E_Inspect_a_Window_.3E" name="File_.3E_Inspect_a_Window_.3E">Inspecter les Chrome Documents</h3>
+
+<p>L'option "Inspect Content Document" est accessible depuis le menu "File" , et liste toutes les fenêtres et sous documents chrome. Une fenêtre du navigateur et l'Inspecteur DOM ont de grandes chances d'être déjà affichés dans cette liste. L'inspecteur DOM garde la trace de toutes les fenêtres ouvertes. Ainsi pour inspecter le DOM d'une fenêtre en particulier, il suffit simplement accéder normalement à cette fenêtre puis de sélectionner son titre dans la liste mise à jour dynamiquement.</p>
+
+<p><img alt="domi-inspect-chrome-popup.png" class="default internal" src="/@api/deki/files/4689/=domi-inspect-chrome-popup.png"></p>
+
+<h3 id="File_.3E_Inspect_a_URL..." name="File_.3E_Inspect_a_URL...">Inspecter arbitrairement des URLS</h3>
+
+<p>Il est également possible d'inspecter arbitrairement le DOM d'URLS en utilisant l'option "Inspect and URL", ou simplement en utilisant la barre d'adresse de L'inspecteur DOM. Par exemple, il est possible de rentrer dans cette barre l'url <a class="external" href="http://www.mozilla.org" rel="freelink">http://www.mozilla.org</a>, d'appuyer sur entrée puis de voir la structure DOM de la page d'accueil de mozilla.org.</p>
+
+<p>Il est extrêmement déconseillé d'utiliser cette approche pour inspecter des chrome documents. À la place, il faut s'assurer que le document se charge bien par les moyens normaux puis utiliser la méthode "Inspect Chrome Document".</p>
+
+<p><img alt="domi-inspect-chrome-popup.png" class="default internal" src="/@api/deki/files/4693/=domi-inspecting-mozilla.org.png"></p>
+
+<p>Lors d'une inspection de page web via URL, un panneau navigateur affichant la page apparaitra en bas de l'Inspecteur DOM. Cela permet d'utiliser l'Inspecteur DOM sans avoir à utiliser un navigateur séparé et sans avoir à intégrer un navigateur dans votre application. Si le panneau navigateur prend trop place pour votre confort, il est possible de le fermer, mais alors, il sera impossible voir les conséquences de vos changements.</p>
+
+<h2 id="Using_the_DOM_Inspector" name="Using_the_DOM_Inspector">Utiliser l'Inspecteur DOM</h2>
+
+<p>Une fois que le document voulu est ouvert, il est possible de voir que l'Inspecteur DOM charge le viewer "Document - DOM nodes" panneau document et le viewer "Object - DOM Nodes" dans le panneau objet. Le panneau document affiche alors une vue structurée et hiérarchisée du DOM. En cliquant, dans le panneau document, le panneau Objet est automatiquement mis à jour pour afficher les informations du noeud actuellement sélectionné. Ces viewers sont dits viewers liés et sont un aspect important à avoir en tête lors de l'apprentissage de l'utilisation de l'Inspecteur DOM.</p>
+
+<h3 id="DOM_Inspector_Information_Types" name="DOM_Inspector_Information_Types">Les viewers de l'Inspecteur DOM</h3>
+
+<p>Il est à noter que les deux viewer précédemment mentionnés ne sont que deux viewers fournis par défaut. Il est possible d'utiliser d'autres viewers, mais pour l'instant, il convient de continuer à les décrire.</p>
+
+<p>Le viewer de noeuds DOM dans le panneau document permet de chercher et de trouver et d'inspecter des noeuds DOM. Un des plus grands avantages que cela apporte au développement web, est qu'il est possible de trouver le markup et les noeuds dans lesquels la partie intéressante se trouve. Une utilisation ordinaire de l'Inspecteur DOM est de trouver le nom et la position d'une icône en particulier utilisée dans l'interface utilisateur. Dans le cas de l'inspection d'un chrome document, la sélection d'un noeud DOM dans le viewer, la version rendue de ce noeud est mise en surbrillance dans l'interface utilisateur elle-même. (Il est à noter qu'il existe des bugs qui empêche de le flasher de l'API de l'Inspecteur DOM de fonctionner correctement sur certaines plateformes) .</p>
+
+<p>Par exemple lors de l'inspection de la fenêtre principale du navigateur et de la sélection d'un noeud dans le viewer (noeud possédant une UI visible), de nombreuses parties de l'interface du navigateur seront mises en surbrillance par une bordure rouge clignotante. Il est possible de rentrer dans cette structure pour trouver des noeuds plus spécifiques tels que l'icône du bouton de la barre recherche.</p>
+
+<p><img alt="domi-edit-search-onclick.png" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p>
+
+<p>Une fois, un noeud sélectionné, il est possible de choisir n'importe lequel des viewers disponibles pour afficher les informations du noeud dans le panneau objet. Ces viewers sont tous disponibles dans la liste déroulante accessible depuis le bouton en haut à gauche du panneau objet :</p>
+
+<p><img alt="domi-object-viewers.png" class="default internal" src="/@api/deki/files/4692/=domi-object-viewers.png"></p>
+
+<p>Dans le cas de la sélection d'une icône, pour trouver le nom du fichier utilisé, il est nécessaire de sélectionner le viewer "CSS Rules" et de chercher parmi les règles CSS, la règle qui définit l'image.</p>
+
+<p>La liste des viewers disponible donne une idée des possibilités d'extensibilité de l'Inspecteur DOM. Les descriptions suivantes fournissent une vue d'ensemble des viewers disponibles :</p>
+
+<p>Le viewer DOM Node affiche les informations du noeud sélectionné. Il permet également de modifier les attributs ou le contenu textuel du noeud.</p>
+
+<p>Le viewer Box Model affiche des informations variées sur les éléments XUL et HTML, incluant le placement et la taille de ces éléments.</p>
+
+<p>Le viewer XBL Bindings liste tous les bindings XBL attachés aux éléments.</p>
+
+<p>Le viewer CSS Rules affiche les règles CSS appliquées au noeud sélectionné. Lors d'une utilisation conjointe avec le viewer Style Sheets, ce viewer liste toutes les règles reconnues de la style sheet sélectionné dans l'ordre. Les propriétés CSS peuvent être modifiées. Les règles s'appliquant aux pseudo-éléments n'apparaissent pas.</p>
+
+<p>Le viewer JavaScript Object affiche un arbre hiérarchisé du sujet du panneau objet. Ce viewer permet également d'évaluer du JavaScript en sélectionnant l'option appropriée dans le menu contextuel.</p>
+
+<h3 id="Actions_de_base_du_viewer_DOM_Nodes">Actions de base du viewer DOM Nodes</h3>
+
+<h4 id="Sélectioner_des_éléments_au_clic">Sélectioner des éléments au clic</h4>
+
+<p>Une autre fonctionnalité interactive de l'Inspecteur DOm est que lorsque l'Inspecteur DOM est ouvert et que cette fonctionnalité a été activée en choisissant <strong style="font-weight: bold;">Edit</strong><strong> &gt; Select Element by Click</strong> ou en cliquant sur l'icône en forme de loupe dans le coin en haut à gauche de l'Inspecteur DOM, il est alors possible de cliquer n'importe ou dans la page et l'élément cliqué aura son noeud DOM correspondant dans L'Inspecteur sélectionné.</p>
+
+<h4 id="Chercher_des_noeuds_dans_le_DOM">Chercher des noeuds dans le DOM</h4>
+
+<p>Une autre façon d'inspecter le DOM est de chercher un élément particulier via son ID, sa class ou un de ses attributs. Cliquer sur <strong>Edit &gt; Find Nodes...</strong> ou utiliser le raccourci <code>Ctrl + F</code>, affichera une pop-up qui permet de rechercher de différentes manières.</p>
+
+<p><img alt="domi-find-appcontent.png" class="default internal" src="/@api/deki/files/4687/=domi-find-appcontent.png"></p>
+
+<h4 id="Mettre_à_jour_le_DOM_dynamiquement">Mettre à jour le DOM dynamiquement</h4>
+
+<p>Chaque noeud peut être édité, et le DOM sera mis à jour automatiquement. Les viewers dans le panneau objet permettent également de modifier le DOM. La plupart des modifications se font via les options du menu contextuel.</p>
+
+<p><img alt="domi-edit-search-onclick.png" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p>
+
+<p>Cette interactivité permet par exemple de grossir/réduire la taille des éléments, changer des icônes, et plein d'autres choses. Tout cela sans avoir besoin de modifier les fichiers sources.</p>
+
+<p>Aimer l'Inspecteur</p>
+
+<p>L'Inspecteur DOM peut prendre du temps à prend en main, mais une fois maitrisé, vous viendrez peut être à penser que les fonctionnalités de l'Inspecteur sont exactement ce qui manquait au développement d'applications web. L'Inspecteur DOM ne fait pas que présenter des informations sur les pages de manière claire et structurée, il donner également la possibilité de chercher dans cette structure et de la mettre à jour dynamiquement. Utiliser l'Inspecteur DOM avec d'autres outils Mozilla comme<a class="external" href="http://www.mozilla.org/projects/venkman"> Venkman</a>, le JavaScript debugger et le DOM Inspector peut véritablement vous donner une vue <em>complète</em> de n'importe quelle page web ou application basée sur une interface DOM</p>
diff --git a/files/fr/orphaned/tools/add-ons/index.html b/files/fr/orphaned/tools/add-ons/index.html
new file mode 100644
index 0000000000..77d2801897
--- /dev/null
+++ b/files/fr/orphaned/tools/add-ons/index.html
@@ -0,0 +1,13 @@
+---
+title: Modules complémentaires
+slug: Outils/Add-ons
+translation_of: Tools/Add-ons
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Il s'agit des outils de développement qui ne sont pas directement intégrés à Firefox, mais disponibles en tant que module complémentaire.</p>
+
+<dl>
+ <dt><a href="https://addons.mozilla.org/fr/firefox/addon/websocket-monitor/">WebSocket Monitor </a> {{obsolete_inline}}</dt>
+ <dd>Permet d'examiner les données échangées via une connexion WebSocket. Ce module complémentaire n'est plus disponible car il nécessite des versions de Firefox trop anciennes. <a href="https://addons.mozilla.org/en-US/firefox/addon/websocketsniff">WebSocket Sniffer</a> est une alternative, il n'est pas aussi détaillé mais peut aider.</dd>
+</dl>
diff --git a/files/fr/orphaned/tools/css_coverage/index.html b/files/fr/orphaned/tools/css_coverage/index.html
new file mode 100644
index 0000000000..c02460ede0
--- /dev/null
+++ b/files/fr/orphaned/tools/css_coverage/index.html
@@ -0,0 +1,147 @@
+---
+title: CSS Coverage
+slug: Outils/CSS_Coverage
+translation_of: Tools/CSS_Coverage
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="note">
+<p>Cette fonctionnalité est expérimentale et n'est pas encore disponible dans Firefox.</p>
+</div>
+
+<p>Le CSS Coverage est un ensemble de commandes pour les outils de développement de Firefox qui aide à améliorer du CSS désordonné en mettant en évidence le CSS qui n'est pas "utilisé" et en indiquant les parties du fichier CSS nécessaires au rendu initial.</p>
+
+<p>Cet outil est quelque peu expérimental, car la définition "d'utilisation" du CSS est compliquée. Ce guide a pour ambition d'expliquer comment cet outil fonctionne.</p>
+
+<p>Cet outil est généralement utilisé de la façon suivante :</p>
+
+<ul>
+ <li>Lancer le tracker de coverage ("<code>csscoverage start</code>")</li>
+ <li>Visiter un ensemble de pages représentatives du site web à analyser.</li>
+ <li>Arrêter le tracker ("<code>csscoverage stop</code>") et voir les règles non utilisées dans <a href="/fr/docs/Outils/Éditeur_de_style">l'Éditeur de style</a>.</li>
+ <li>Voir le rapport ("<code>csscoverage report</code>") contenant les règles qui pourraient être mis en ligne (in-lined) dans chaque page.</li>
+</ul>
+
+<p>Une autre commande ("<code>csscoverage oneshot</code>") permet de lancer ("<code>csscoverage start; csscoverage stop</code>").</p>
+
+<h2 id="Que_veut_dire_utiliser">Que veut dire "utiliser" ?</h2>
+
+<h3 id="TLDR">TL;DR :</h3>
+
+<p>Le CSS coverage vérifie que le sélecteur <span style="color: #008000;"><code>tag#id.class</code></span> dans l'exemple ci-dessous, existe dans un ensemble de pages web :</p>
+
+<pre class="brush: css">@media thing {
+  tag#id.class:hover {
+    foo: bar;
+  }
+}</pre>
+
+<h3 id="Pourquoi">Pourquoi ?</h3>
+
+<p>Supposons que le CSS possède ce genre de propriété :</p>
+
+<pre class="brush: html">&lt;style&gt;
+  span:hover {
+    color: purple;
+  }
+&lt;/style&gt;
+
+&lt;span&gt;Test&lt;/span&gt;
+</pre>
+
+<p>Si durant ce test, la souris n'est pas entrée dans le &lt;span&gt;, est-ce que la règle a été utilisée ?</p>
+
+<p>Techniquement parlant, la règle <code>span:hover</code> n'a pas été utilisée dans le sens ou le mot "Test" n'a jamais été coloré en violet. Cependant, Le CSS coverage se concentre principalement à voir quelles règles sont pertinentes ou non pour la page. Dans ce cas, <code>span:hover</code> est visiblement pertinent pour la page.</p>
+
+<p>Supposons également que le CSS possède ce genre de propriété :</p>
+
+<pre class="brush: html">&lt;style&gt;
+  @media tv {
+    span {
+      color: purple;
+    }
+  }
+&lt;/style&gt;
+
+&lt;span&gt;Test&lt;/span&gt;
+</pre>
+
+<p>Devrait-il être obligatoire de se connecter depuis une télévision pour mesurer la pertinence de cette règle ?</p>
+
+<p>Mais "l'utilisation" n'est pas seulement une affaire de pertinence...<br>
+ Est-ce que la règle suivante est pertinente ?</p>
+
+<pre class="brush: html">&lt;style&gt;
+  span { }
+&lt;/style&gt;
+
+&lt;span&gt;Test&lt;/span&gt;
+</pre>
+
+<p>Il est possible d'affirmer que cette règle n'est pas pertinente, car elle n'a pas d'effet sur la page et peut donc être retirée sans danger.</p>
+
+<p>Cependant qu'en est-il du code suivant :</p>
+
+<pre class="brush: html">&lt;style&gt;
+  span {
+    -o-text-curl: minor;
+  }
+&lt;/style&gt;
+
+&lt;span&gt;Test&lt;/span&gt;
+</pre>
+
+<p>Savoir si cette règle est utilisée ou non requiert l'utilisation d'un moteur de recherche et des compétences analytiques, et peut être même des connaissances sur les versions des navigateurs supportés par le site. Ceci est donc considéré hors de portée de cet outil, du moins jusqu'à la <a href="https://fr.wikipedia.org/wiki/Singularit%C3%A9_technologique">singularité</a>.</p>
+
+<p>Cela explique également pourquoi la règle appliquée aux div dans l'exemple suivant est considéré comme "utilisée"</p>
+
+<pre class="brush: html">&lt;style&gt;
+  div { color: red; }
+  span { color: blue; }
+&lt;/style&gt;
+
+&lt;div&gt;&lt;span&gt;Test&lt;/span&gt;&lt;/div&gt;
+</pre>
+
+<p>Il est possible d'affirmer que la règle div n'est pas utilisée puisqu'elle n'affecte pas le rendu final de la page. Cependant si l'on considère la définition alternative suivante :</p>
+
+<pre class="brush: html">&lt;style&gt;
+  div { color: red; border: none; }
+  span { color: blue; }
+&lt;/style&gt;
+</pre>
+
+<p>Il est alors difficile de savoir si la règle de bordure est utilisée, et il existe beaucoup d'autres variations. L'opacité, la visibilité et les conversions de couleurs par exemple compliquent encore la définition "d'utilisation". Pour garder une définition simple, "utilisée" signifie que le sélecteur correspond ç au moins un élément.</p>
+
+<p>Si une feuille de style incluse dans un test contient une règle qui ne s'applique que pour une page particulière qui n'a pas été visitée lors du Test, alors bien évidemment cette règle sera marquée comme "non-utilisée" malgré le fait qu'il existe des moments ou cette règle est utilisée. Il est donc recommandé de doubler les vérifications avant d'enlever des règles des fichiers CSS.</p>
+
+<h2 id="Avertissements">Avertissements</h2>
+
+<p>Il est à noter que :</p>
+
+<ul>
+ <li>L'outil présume qu'une URL retourne le même ensemble d'octets chaque fois qu'elle référencée lors de la période de test.</li>
+ <li>Les <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">feuilles de style alternatives</a> ne sont pas traquées.</li>
+</ul>
+
+<h2 id="Bugs">Bugs</h2>
+
+<p>La résolution de certains bugs importants est actuellement en travail :</p>
+
+<ul>
+ <li>Les changements du CSSOM via JavaScript ne sont actuellement pas traqués. Cela inclu l'ajout de feuilles de styles. Voir le <a href="https://bugzil.la/1007533">bug 1007533</a>.</li>
+ <li>Le markup dans l'Éditeur de style est fait ligne par ligne et, les sources-maps ne sont pas encore supportées. En conséquence, l'analyse devient confuse si le test est réalisé sur du CSS compressé. Voir le <a href="https://bugzil.la/1007073">bug 1007073</a>.</li>
+ <li>Les informations @keyframe ne sont pas incluses dans le résumé de préchargement. Voir le <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1034062">bug 1034062</a>.</li>
+</ul>
+
+<p> </p>
+
+<h2 id="Alternatives">Alternatives</h2>
+
+<p>Il y plusieurs autres outils qui peuvent vous aider à trouver du CSS inutilisé, sans avoir besoin d'utiliser Firefox.</p>
+
+<ul>
+ <li><a href="https://www.jitbit.com/unusedcss/">Unused CSS</a> parcourt <em>récursivement</em> votre site pour détecter les sélecteurs inutilisés. Il s'agit d'un outil en ligne, gratuite et sans publicité.</li>
+ <li><a href="https://github.com/purifycss/purifycss">PurifyCSS </a>est un paquet NPM qui est utilisable comme un outil de console après son installation.</li>
+ <li><a href="https://unused-css.com/">unused-css.com</a>, un autre outil en ligne. Celui-ci n'est pas gratuit.</li>
+</ul>
diff --git a/files/fr/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html b/files/fr/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html
new file mode 100644
index 0000000000..939e3c2343
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html
@@ -0,0 +1,19 @@
+---
+title: Limitations of the new debugger
+slug: Outils/Débogueur/Limitations_of_the_new_debugger
+translation_of: Tools/Debugger/Limitations_of_the_new_debugger
+---
+<div>{{ToolsSidebar}}</div><p>À partir de la version 52, Firefox inclut un nouveau Débogueur. Celui-ci n'est actuellement activé par défaut que dans Firefox Nightly et Firefox Developer Edition. Le nouveau Débogueur est plus rapide et plus fiable que l'ancien. Il fournit également une base plus saine pour les futurs développements de l'outil.</p>
+
+<p>Cependant, il ne possède pas encore toutes les fonctionnalités de l'ancien Débogueur. Cette page liste les fonctionnalités de l'ancienne version qui ne sont pas encore supportées.</p>
+
+<p>Il est à noter que le support de la plupart de ces fonctionnalités sont prévues pour les prochaines versions. Cette page sera mise à jour en fonction de cela.</p>
+
+<p>Si vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à <code>false</code> dans about:config (page du navigateur).</p>
+
+<p>Les fonctionalitées suivantes ne sont pas supportées par le nouveau Débogueur :</p>
+
+<ul>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Break_on_a_DOM_event">S'arreter sur les évènements DOM</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes">Afficher en surbrillance et inspecter les nœuds DOM</a></li>
+</ul>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html
new file mode 100644
index 0000000000..89a692e2ad
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html
@@ -0,0 +1,24 @@
+---
+title: Désactiver des point d'arrêts
+slug: Outils/Debugger_(before_Firefox_52)/Disable_breakpoints
+translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p>Si vous utilisez Firefox 52 ou plus récent, et que vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à <code>false</code> dans about:config (page du navigateur).</p>
+
+<p>Pour désactiver un point d'arrêt, il suffit de décocher la case à cocher à coté du point d'arrêt dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">panneau de la liste des sources </a> :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<p>Une autre solution est d'activer le menu contextuel en effectuant un clic droit sur le point d'arrêt puis de cliquer sur "Désactiver le point d'arrêt".</p>
+
+<p>Il est également possible de supprimer un point d’arrêt en cliquant simplement sur le cercle bleu représentant le point d'arrêt.</p>
+
+<p>Pour activer/désactiver tout les points d'arrêt, il faut utiliser le bouton "Activer/Désactiver tout les points d'arrêt" dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">panneau de la liste des sources </a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html
new file mode 100644
index 0000000000..4708b18950
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html
@@ -0,0 +1,32 @@
+---
+title: Access debugging in add-ons
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</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/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html
new file mode 100644
index 0000000000..7fa3206c04
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html
@@ -0,0 +1,28 @@
+---
+title: Mettre une source dans une boîte noire
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Black_box_a_source
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</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_(Before_Firefox_52)/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_(Before_Firefox_52)/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/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html
new file mode 100644
index 0000000000..515a2df202
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html
@@ -0,0 +1,22 @@
+---
+title: S’arrêter sur un évènement DOM
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis 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_(Before_Firefox_52)/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_(Before_Firefox_52)/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/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html
new file mode 100644
index 0000000000..421de55174
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html
@@ -0,0 +1,36 @@
+---
+title: Debug eval sources
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</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ères à 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>fonction</code></a>.</p>
+
+<p>Pour faire cela, il est nécessaire d'utiliser l'instruction <code>//# sourceURL</code> pour nommer la source :</p>
+
+<pre class="brush: js">var button = document.getElementById("clickme");
+button.addEventListener("click", evalFoo, false);
+
+var script = "function foo() {" +
+             "  console.log('foo a été appelée');" +
+             "}" +
+             "foo();//# sourceURL=mon-foo.js";
+
+function evalFoo() {
+  eval(script);
+}</pre>
+
+<p>Cela nome le script "mon-foo.js".</p>
+
+<p>Une fois que la chaine a été évaluée, le script apparaitra dans le Débogueur comme une source séparée et sera entièrement débogable comme toutes les autres sources. Il sera également possible de <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">l'afficher joliment</a> :</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/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html
new file mode 100644
index 0000000000..25f362b7a9
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html
@@ -0,0 +1,24 @@
+---
+title: Désactiver des point d'arrêts
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p>Si vous utilisez Firefox 52 ou plus récent, et que vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à <code>false</code> dans about:config (page du navigateur).</p>
+
+<p>Pour désactiver un point d'arrêt, il suffit de décocher la case à cocher à coté du point d'arrêt dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">panneau de la liste des sources </a> :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<p>Une autre solution est d'activer le menu contextuel en effectuant un clic droit sur le point d'arrêt puis de cliquer sur "Désactiver le point d'arrêt".</p>
+
+<p>Il est également possible de supprimer un point d’arrêt en cliquant simplement sur le cercle bleu représentant le point d'arrêt.</p>
+
+<p>Pour activer/désactiver tout les points d'arrêt, il faut utiliser le bouton "Activer/Désactiver tout les points d'arrêt" dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">panneau de la liste des sources </a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html
new file mode 100644
index 0000000000..d3ded1c55f
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html
@@ -0,0 +1,49 @@
+---
+title: 'Examiner, modifier, et espionner des variables'
+slug: >-
+  Outils/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables
+translation_of: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables'
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis 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_(Before_Firefox_52)/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="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter" 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_(Before_Firefox_52)/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_(Before_Firefox_52)/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/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html
new file mode 100644
index 0000000000..edcdc56c82
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/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/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p>Si vous survolez un nœud DOM dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/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/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html
new file mode 100644
index 0000000000..7fa79d80a3
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html
@@ -0,0 +1,8 @@
+---
+title: Comment ?
+slug: Outils/Debugger_(before_Firefox_52)/How_to
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">Ces articles décrivent comment se servir du Débogueur.</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html
new file mode 100644
index 0000000000..dc052eb319
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html
@@ -0,0 +1,21 @@
+---
+title: Ouvrir le Débogueur
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Open_the_debugger
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p>Pour ouvrir le Débogueur, il faut utiliser le bouton du menu Firefox (<img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title="">). Puis sélectionner "Développement web", et enfin sélectionner "Débogueur". Il est également possible d'utiliser le raccourci clavier :</p>
+
+<ul>
+ <li><kbd>Controle</kbd>+<kbd>Maj</kbd>+<kbd>S</kbd> sur Windows et Linux</li>
+ <li><kbd>Command</kbd>+<kbd>Option</kbd>+<kbd>S</kbd> sur Mac</li>
+</ul>
+
+<p>La  <a href="/fr/docs/Tools/Tools_Toolbox">Boite à outils </a>apparaitra alors en bas du navigateur, avec le Débogueur activé. Voici une capture d'écran qui montre à quoi ressemble le débogueur lors de son ouverture :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13200/debugger-open.png" style="display: block; height: 774px; margin-left: auto; margin-right: auto; width: 1006px;"></p>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html
new file mode 100644
index 0000000000..a5ba32edb2
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html
@@ -0,0 +1,16 @@
+---
+title: Formater et indenter un fichier minifié
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p>Pour formater et indenter un fichier qui a été minifié, il faut ouvrir le fichier minifié et cliquer sur l'icône en forme de paire d'accolades :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13212/debugger-pretty-print.png" style="display: block; height: 407px; margin-left: auto; margin-right: auto; width: 904px;">Le fichier apparaitra alors dans un format plus lisible :</p>
+
+<p>Il est possible de demander au débogueur de détecter et de formater et indenter automatiquement les sources minifiés. Pour cela, il faut activer l'option "Formater et Indenter automatiquement les sources compactées" dans les <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/Settings">options du débogueur</a>.</p>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html
new file mode 100644
index 0000000000..5e35c61cd9
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html
@@ -0,0 +1,74 @@
+---
+title: Rechercher et filtrer
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Search_and_filter
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p>Pour effectuer une recherche à l'intérieur du débogueur, il est possible d'utiliser le filtre de script de la <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">barre d'outils </a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13214/debugger-filter.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<p>Ne pas utiliser de préfixe dans le filtre aura pour conséquence de ne rechercher que dans la liste des sources du <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">Panneau de la liste des sources</a>. Pour voir la source correspondante au nom de fichier recherché, il faut utiliser la touche entrée ou les flèches directionnelles.</p>
+
+<p>Utiliser un préfixe correspondant à l'un des divers caractères spéciaux aura différents effets sur la recherche :</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Préfixe</th>
+   <th scope="col">Fonction</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Aucun</td>
+   <td>Filtre les scripts affichés dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane" title="#source-list-pane">panneau de la liste des sources</a>.</td>
+  </tr>
+  <tr>
+   <td>!</td>
+   <td>Recherche la chaine de caractère dans tous les fichiers.</td>
+  </tr>
+  <tr>
+   <td>@</td>
+   <td>Recherche une définition de fonction dans tous les fichiers</td>
+  </tr>
+  <tr>
+   <td>#</td>
+   <td>
+    <p>Recherche l'expression dans le fichier actuellement ouvert dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">panneau de la liste des sources</a>.</p>
+
+    <p>Appuyer sur entrée itérera parmi les occurrences.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>:</td>
+   <td>Va à la ligne donnée dans le fichier actuellement ouvert dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">panneau de la liste des sources</a>.</td>
+  </tr>
+  <tr>
+   <td>*</td>
+   <td>Filtrer les variables affichées dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ces options sont affichées dans une pop-up lors d'un clic sur le filtre. Elles sont également accessibles depuis le menu contextuel dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">panneau des sources</a>.</p>
+
+<p>Les préfixes peuvent être combinés pour obtenir des expressions puissants. Par exemple :</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td>toto.js:12</td>
+   <td>Ouvre le fichier "toto.js" et se rend à la ligne 12</td>
+  </tr>
+  <tr>
+   <td>mod#onLoad</td>
+   <td>Recherche la chaine de caractères "onLoad" dans tous les fichiers contenant "mod" dans leur noms.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html
new file mode 100644
index 0000000000..62a8ce9317
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html
@@ -0,0 +1,29 @@
+---
+title: Ajouter un point d'arrêt
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p class="seoSummary">Il existe différentes façons de placer un point d'arrêt dans du code JavaScript dans le Débogueur :</p>
+
+<ul>
+ <li>Dans <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">le panneau des sources</a>, cliquez sur le numéro de ligne où vous voulez arrêter le code</li>
+ <li>Dans <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">le panneau des sources</a>, faites un clic droit sur la ligne où vous voulez arrêter le code pour ouvrir le menu contextuel puis cliquez sur "Ajouter un point d'arrêt"</li>
+ <li>Dans <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">le panneau des sources</a>, mettez la ligne ciblée en surbrillance et appuyez sur Ctrl+B (Windows/Linux) ou Command+B (Mac OS X)</li>
+</ul>
+
+<p>Chaque point d'arrêt est affiché à deux endroits dans le débogueur :</p>
+
+<ul>
+ <li>Listé dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">panneau de la liste des sources</a> en dessous du nom du fichier dans lequel il se trouve</li>
+ <li>Sous forme de flèche bleue (organe si conditionnel) sur la ligne affectée dans le <a href="#">panneau des sources</a></li>
+</ul>
+
+<p>La capture d'écran ci-dessous montre les points d'arrêt aux lignes 20 et 28 du fichier.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13202/debugger-details.png" style="display: block; height: 325px; margin-left: auto; margin-right: auto; width: 900px;"></p>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html
new file mode 100644
index 0000000000..5025b633bb
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html
@@ -0,0 +1,22 @@
+---
+title: Ajouter un point d’arrêt conditionnel
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<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_(Before_Firefox_52)/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 :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12900/debugger-conditional-breakpoint.png" style="display: block; height: 273px; margin-left: auto; margin-right: auto; width: 823px;"></p>
+
+<p>Les points d'arrêt conditionnels sont représentés par une flèche orange :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12904/debugger-conditional-orange.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 823px;"></p>
+
+<p>Pour éditer la condition ou pour ajouter une condition à un point d'arrêt normal, il faut activer le menu contextuel (clic droit) et sélectionner « Configurer le point d'arrêt » :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12902/debugger-make-conditional.png" style="display: block; height: 427px; margin-left: auto; margin-right: auto; width: 823px;"></p>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html
new file mode 100644
index 0000000000..64743f97f8
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html
@@ -0,0 +1,23 @@
+---
+title: Parcourir le code
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Step_through_code
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</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 à gauche dans la <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">barre d'outils </a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13208/debugger-step.png" style="display: block; height: 414px; margin-left: auto; margin-right: auto; width: 903px;"></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</li>
+</ul>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html
new file mode 100644
index 0000000000..0593d49d3a
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html
@@ -0,0 +1,20 @@
+---
+title: Utiliser une source map
+slug: Outils/Debugger_(before_Firefox_52)/How_to/Use_a_source_map
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p>Les sources JavaScript sont souvent combinées et minifiées afin d'optimiser le temps que met le serveur à les fournir. Il est également de plus en plus courant que les sources soient générées automatiquement en utilisant un langage comme CoffeeScript. En utilisant des <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, le débogueur peut faire le lien entre le code étant exécuté et les fichiers sources originaux, rendant ainsi le débogage incroyablement plus facile.</p>
+
+<p>Par défaut, le Débogueur utilisera les sources map si elles sont disponibles. Pour vérifier si l'utilisation des sources maps est activé (ou pour la désactiver), il faut cliquer sur les <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/Settings" title="#debugger-settings">options du débogueur</a> et dans la liste qui s'affiche sélectionner "Afficher les sources originales"  :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12922/debugger-sourcemaps.png" style="display: block; height: 506px; margin-left: auto; margin-right: auto; width: 915px;"></p>
+
+<p>Bien sûr, pour que cela fonctionne il faut avoir fourni une source map pour le JavaScript tournant dans la page. Pour cela il faut ajouter une instruction en commentaire dans votre fichier source :</p>
+
+<p><code>//# sourceMappingURL=http://example.com/chemin/vers/votre/sourcemap.map</code></p>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/index.html
new file mode 100644
index 0000000000..13f53b09e4
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/index.html
@@ -0,0 +1,55 @@
+---
+title: Débogueur (avant Firefox 52)
+slug: Outils/Debugger_(before_Firefox_52)
+translation_of: Tools/Debugger_(before_Firefox_52)
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p>Le débogueur JavaScript permet d'avancer pas à pas dans du code JavaScript et de l’examiner ou de le modifier, afin de retrouver et de corriger les bugs.</p>
+
+<p>Le débogueur peut fonctionner directement dans Firefox ou être utilisé à distance, par exemple sur un appareil Firefox OS ou Firefox sur 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>{{EmbedYouTube("sK8KU8oiF8s")}}</p>
+
+<hr>
+<h2 id="Visite_guidée_de_l'interface_utilisateur">Visite guidée de l'interface utilisateur</h2>
+
+<p>Pour vous repérer dans le débogueur, voici une courte <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/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_(Before_Firefox_52)/How_to/Open_the_debugger">Ouvrir le débogueur</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_breakpoint">Ajouter un point d’arrêt</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Disable_breakpoints">Désactiver des points d’arrêt</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">Parcourir le code pas à pas</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Break_on_a_DOM_event">S’arrêter sur un évènement DOM</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes">Afficher en surbrillance et inspecter des nœuds DOM</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">Afficher joliment un fichier minifié</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">Rechercher et filtrer</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_conditional_breakpoint">Ajouter un point d’arrêt conditionnel</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables">Examiner, modifier, et espionner des variables</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Use_a_source_map">Utiliser une source map (correspondance de source)</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source">Mettre une source dans une boite noire</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Debug_eval_sources">Déboguer des sources évaluées</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Access_debugging_in_add-ons">Accéder au débogage depuis un module complémentaire</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/Settings">Paramètres</a></li>
+</ul>
+</div>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..9de13b55a9
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html
@@ -0,0 +1,16 @@
+---
+title: Raccourcis clavier
+slug: Outils/Debugger_(before_Firefox_52)/Keyboard_shortcuts
+translation_of: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "old-debugger") }}</p>
+
+<h2 id="Raccourcis_généraux">Raccourcis généraux</h2>
+
+<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/settings/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/settings/index.html
new file mode 100644
index 0000000000..9037a57151
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/settings/index.html
@@ -0,0 +1,63 @@
+---
+title: Paramètres
+slug: Outils/Debugger_(before_Firefox_52)/Settings
+translation_of: Tools/Debugger_(before_Firefox_52)/Settings
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p>Le Débogueur a son propre menu de paramètres. Il est accessible depuis l’icône en forme d'engrenage dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#toolbar">barre d'outils </a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12930/debugger-options.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 845px;"></p>
+
+<p>Chaque paramètre est une simple case à cocher :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 40%;"><strong>Formater et indenter automatiquement les sources compactées</strong></td>
+   <td>Lorsque cette option est activée, le Débogueur <a href="/fr/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">affichera joliment</a> les fichiers JavaScript minifiés.</td>
+  </tr>
+  <tr>
+   <td><strong>Pause sur les exceptions</strong></td>
+   <td>Lorsque cette option est activée, l’exécution du script s’arrêtera automatiquement lorsqu'une exception JavaScript est levée.</td>
+  </tr>
+  <tr>
+   <td><strong>Ignorer les exceptions interceptées</strong></td>
+   <td>
+    <p>Lorsque cette option est activée, l’exécution ne s’arrêtera pas lorsqu'une exception levée est interceptée</p>
+
+    <p>Si cette option est activée (elle l'est par défaut), et que "Pause sur les exceptions" est activé, alors l'exécution s’arrêtera uniquement si l'exception levée n'est pas attrapée. Ce qui est généralement le comportement désiré : les expressions interceptées indiquent généralement que votre programme les gère correctement.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Panneaux développés au démarrage</strong></td>
+   <td>Lorsque cette option est activée, le <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables</a> du Débogueur est visible dès l'ouverture de celui-ci.</td>
+  </tr>
+  <tr>
+   <td><strong>Afficher uniquement les propriétés énumérables</strong></td>
+   <td>Les propriétés JavaScript non-énumérables ne sont pas affichées</td>
+  </tr>
+  <tr>
+   <td><strong>Afficher la boîte de filtrage des variables</strong></td>
+   <td>Lorsque cette option est activée, une boîte de recherche est ajoutée au <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables</a>, elle permet de filtrer la liste des variables affichée</td>
+  </tr>
+  <tr>
+   <td><strong>Afficher les sources originales</strong></td>
+   <td>Lorsque cette option est activée, le Débogueur utilisera des <a class="external external-icon" href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, s'il y en a, afin d'afficher le code source original qui a été minifié, combiné ou même compilé depuis un langage comme CoffeeScript. Cette option est activée par défaut</td>
+  </tr>
+  <tr>
+   <td><strong>Mettre automatiquement dans une boîte noire les sources compactées</strong></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nouveauté de Firefox 33</p>
+    </div>
+
+    <p><span id="summary_alias_container"><span id="short_desc_nonedit_display">Met automatiquement les sources dont l'URL finit par ".min.js" dans une <a href="/fr/docs/Tools/Debugger/How_to/Black_box_a_source">boîte noire</a></span></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html
new file mode 100644
index 0000000000..0a8213687b
--- /dev/null
+++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html
@@ -0,0 +1,134 @@
+---
+title: Visite guidée de l'interface utilisateur
+slug: Outils/Debugger_(before_Firefox_52)/UI_Tour
+translation_of: Tools/Debugger_(before_Firefox_52)/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p>
+
+<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p>
+</div>
+
+<p>Cet article est une visité guidée des principales sections de l'interface utilisateur du Débogueur JavaScript de Firefox. Cette interface est séparée en six sections principales :</p>
+
+<ul>
+ <li><a href="#toolbar">Barre d'outils</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">Panneau de la liste des sources</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Call_stack_pane">Panneau de la pile d’exécution</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">Panneau des sources</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">Panneau des variables</a></li>
+ <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">Panneau des événements</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13182/debugger-overview-annotated.png" style="display: block; height: 1640px; margin-left: auto; margin-right: auto; width: 1019px;"></p>
+
+<h2 id="Barre_d'outils"><a name="toolbar">Barre d'outils</a></h2>
+
+<p>La barre d'outils est composé de quatre sections :</p>
+
+<ul>
+ <li>Une ligne de boutons servant a <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">contrôler le parcours à travers un script</a></li>
+ <li>Une visualisation de la pile d’exécution</li>
+ <li>Le <a href="https://developer.mozilla.org/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">filtre de script</a></li>
+ <li>Deux boutons pour :
+  <ul>
+   <li>développer/réduire les panneaux des <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane">variables</a> et des <a href="/fr/docs/Tools/Debugger/UI_Tour#Events_pane">événements</a></li>
+   <li>contrôler les <a href="/fr/docs/Tools/Debugger/Settings">paramètres</a> du Débogueur</li>
+  </ul>
+ </li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13194/debugger-toolbar-annotated.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 942px;"></p>
+
+<p>Les quatre boutons de gauche ont (dans l'ordre) les fonctions suivantes :</p>
+
+<ul>
+ <li><strong>Pause/Reprendre</strong>(F8) : met pause ou reprend l’exécution du script en débogage. Lorsque ce bouton devient bleu, 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>
+
+<p>La visualisation de la pile d’exécution montre la pile d’exécution au moment ou l’exécution est arrêté.</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. Ce panneau partage sa portion d'écran avec le <a href="/fr/docs/Tools/Debugger/UI_Tour#Call_stack_pane">panneau de la pile d’exécution</a>. Les onglets en haut des panneaux permetent de passer d'un panneau à l'autre.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13186/debugger-source-list-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>Les fichiers sources sont regroupés sous différentes catégories basées sur l'origine de ces fichiers. Il est possible de sélectionner n'importe lequel de ces fichiers et il sera alors chargé dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">panneau des sources</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13188/debugger-source-list-pane-annotated.png" style="display: block; height: 535px; margin-left: auto; margin-right: auto; width: 922px;">Chaque point d'arrêt mis dans un fichier source est listé dans le panneau de la liste des sources juste en dessous du nom de ce fichier. La case à cocher à côté de chaque point d'arrêt permet de l'activer ou de le désactiver. Effectuer un clic droit sur un point d'arrêt dans la liste affiche un menu contextuel permettant de :</p>
+
+<ul>
+ <li>Désactiver, activer ou supprimer ce point d'arrêt, tous les points d'arrêt ou tous les points d'arrêt sauf celui-ci.</li>
+ <li>Rendre ce point d'arrêt conditionnel (ou éditer sa condition si il l'est déjà).</li>
+</ul>
+
+<p>Les trois icônes en bas du panneau permettent de :</p>
+
+<ul>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Black_box_a_source">Mettre une source dans une boîte noire</a>.</li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Afficher joliment des fichiers JavaScript minifiés</a></li>
+ <li><a href="/fr/docs/Tools/Debugger/How_to/Disable_breakpoints">Activer/désactiver tous les points d'arrêts</a>.</li>
+</ul>
+
+<p>Il existe un menu contextuel (clic droit) pour les éléments de la liste des sources celui-ci permet de copier l'URL d'où viennent les fichiers, ou bien de les ouvrir dans un nouvel onglet :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13184/debugger-source-list-menu-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<h2 id="Panneau_de_la_pile_d’exécution">Panneau de la pile d’exécution</h2>
+
+<p>Le deuxième onglet de la partie gauche du Débogueur affiche une pile d’exécution verticale :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13178/debugger-call-stack-pane-annotated.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>Chaque ligne représente un niveau de la pile, avec la couche actuelle au-dessus. Chaque ligne contient le nom de la fonction ou elle est exécutée ainsi qu'un lien vers le fichier source au bon numéro de ligne.</p>
+
+<h2 id="Panneau_des_sources">Panneau des sources</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13190/debugger-source-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>Ce panneau affiche le fichier source JavaScript actuellement chargé. Les lignes ayant un point d'arrêt ont un cercle bleu à côté du numéro de ligne. Lorsqu'un point d'arrêt est atteint, une flèche verte apparaît sur le cercle :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13192/debugger-source-pane-breakpoints-annotated.png" style="display: block; height: 436px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>Dans le panneau des sources, le menu contextuel (clic droit) permet :</p>
+
+<ul>
+ <li>D'ajouter un point d'arrêt.</li>
+ <li>D'ajouter un point d'arrêt conditionnel</li>
+ <li>D'ajouter une expression-espionne de la sélection</li>
+ <li>De rechercher ou filtrer en utilisant le <a href="https://developer.mozilla.org/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter" title="#script filter">filtre de scripts</a></li>
+</ul>
+
+<h3 id="Popup_de_variable">Popup de variable</h3>
+
+<p>Survoler une variable dans le panneau des sources fait apparaître une popup affichant la valeur actuelle de la variable :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13198/debugger-variables-popup-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>Cela permet de savoir rapidement la valeur d'une variable sans avoir à ouvrir le<a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane"> panneau des variables</a>.</p>
+
+<h2 id="Panneau_des_variables">Panneau des variables</h2>
+
+<p>Le panneau des variables permet d’examiner et de modifier les variables du script lors de son exécution :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13196/debugger-variables-pane.png" style="display: block; height: 670px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>Ce panneau partage sa portion d'écran avec le <a href="https://developer.mozilla.org/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">panneau des événements</a>. Pour passer de l'un à l'autre, il faut utiliser les onglets situés en haut du panneau.</p>
+
+<h2 id="Panneau_des_événements">Panneau des événements</h2>
+
+<p>Ce panneau liste tous les événements DOM qui sont écoutés dans le code.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13180/debugger-events-pane-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>Ce panneau partage sa portion d'écran avec le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">panneau des variables</a> Pour passer de l'un à l'autre, il faut utiliser les onglets situés en haut du panneau.</p>
+
+<p>Ce panneau regroupe les événements par type, la capture d'écran ci-dessus montre quatre types : Interaction, clavier, souris, et navigation. Les événements qui ont un écouteur sont listés sous leur type avec la syntaxe suivante :</p>
+
+<pre>[nom de l’événement] sur [cible de l’événement] dans [fichier source]</pre>
+
+<p>Cliquer sur la case à cocher à côté de l’événement aura pour conséquence de faire s’arrêter l’exécution à la première ligne de l'écouteur de l’événement. Cliquer sur la case à cocher à côté d'un type d’événement aura pour conséquence de faire s’arrêter l’exécution dans tous les écouteurs des événements listés sous ce type.</p>