unslug fr: move

8 files changed, 897 insertions, 0 deletions

diff --git a/files/fr/tools/web_console/console_messages/index.html b/files/fr/tools/web_console/console_messages/index.html
new file mode 100644
index 0000000000..6115351784
--- /dev/null
+++ b/files/fr/tools/web_console/console_messages/index.html
@@ -0,0 +1,469 @@
+---
+title: Console messages
+slug: Outils/Console_Web/Console_messages
+translation_of: Tools/Web_Console/Console_messages
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>La majorité de la Console Web est occupée par le panneau d'affichage des messages :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13278/console-messages.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 877px;"></p>
+
+<p>Chaque message est affiché sur une nouvelle ligne.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; height: 152px; margin-left: auto; margin-right: auto; width: 795px;"></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Temps</th>
+   <td>La date et heure à laquelle le message a été enregistré. Cette information n'est pas affichée par défaut, et vous pouvez demander de l'afficher en utilisant un paramètre de la Boite d'outils</td>
+  </tr>
+  <tr>
+   <th scope="row">Catégorie</th>
+   <td>
+    <p>Indique le type de message :</p>
+
+    <ul>
+     <li><strong>Noir </strong>: Requête HTTP</li>
+     <li><span style="color: #0099ff;"><strong>Bleu </strong></span> : Avertissement/erreur CSS</li>
+     <li><strong><span style="color: #ff8c00;">Orange </span></strong> : Avertissement/erreur JavaScript</li>
+     <li><span style="color: #ff0000;"><strong>Rouge</strong></span> : Avertissement/erreur de sécurité</li>
+     <li>Vert : Logs serveur</li>
+     <li><span style="color: #a9a9a9;"><strong>Gris léger </strong></span> : Message de l'API <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">Console</a></li>
+     <li><span style="color: #696969;"><strong>Gris foncé</strong></span> : Messages d'entrées/sorties de la <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter">ligne de commande JavaScript</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Type</th>
+   <td>Pour tous les messages sauf les requêtes HTTP et les messages d'entrées/sorties, une icône indique s'il s'agit d'une erreur (☓), d'un avertissement (⚠), ou d'un message informatif</td>
+  </tr>
+  <tr>
+   <th scope="row">Message</th>
+   <td>Le message lui-même</td>
+  </tr>
+  <tr>
+   <th scope="row">Nombre d’occurrences</th>
+   <td>Si une ligne générant un avertissement ou une erreur apparait plus d'une fois, elle ne sera enregistrée qu'une fois, et ce compteur apparaitra pour indiquer le nombre de fois qu'elle a été rencontrée</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Nom du fichier et numéro de ligne</strong></th>
+   <td>
+    <p>Pour JavaScript, CSS et les messages de l'API console, le message peut être associé à une ligne de code spécifique. La console fournit alors un lien vers le nom du fichier et le numéro de ligne qui a généré le message.</p>
+
+    <p>Depuis Firefox 36, cela inclut le nombre de colones également.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Par défaut, la console est effacée à chaque fois que vous naviguez sur une nouvelle page ou que vous rechargez la page courante. Pour modifier ce comportement, cochez "Activer les journaux persistants" dans les paramètres de la Boite à outils.</p>
+
+<h2 id="Categories_de_messages">Categories de messages</h2>
+
+<h3 id="Requêtes_réseau">Requêtes réseau</h3>
+
+
+
+<div class="note">
+<p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px;"><span style="color: #000000;">Les messages réseau ne sont pas affichés par défaut. Il faut utiliser la fonctionnalité de <a href="/fr/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtrage</a> pour les afficher.</span></p>
+</div>
+
+
+
+<p>Les requêtes résseau sont affichées sous cette forme :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; height: 139px; margin-left: auto; margin-right: auto; width: 664px;"></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Temps</th>
+   <td>La date et heure à laquelle le message a été enregistré</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Catégorie</strong></th>
+   <td>Indique que ce message concerne une requête HTTP</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Méthode</strong></th>
+   <td>
+    <p>La méthode HTTP utilisée</p>
+
+    <p>Si la requête à été faite avec <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, il y a une notre aditionelle :</p>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>URI</strong></th>
+   <td>L'URI cible</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Résumé</strong></th>
+   <td>La version HTTP, le code de statut, et le temps qu'il a fallu pour la terminer</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Si vous cliquez sur le message, vous verrez une fenêtre contenant plus de détails sur la requête et la réponse :</p>
+
+<p>Défiler vers le bas révèle les en-têtes de réponses. Par défaut, la Console Web n'enregistre pas les contenus de la requête et la réponse : pour le faire, activez le menu contextuel de la Console Web et choisissez "Journaliser le contenu des requêtes et des réponses". Rechargez la page, et vous les verrez dans cette fenêtre d'inspection.</p>
+
+<p>Seul le premier méga-octet de données est enregistré pour le contenu de chaque requête ou réponse. Les requêtes et les réponses très lourdes seront tronquées.</p>
+
+<p>Les logs de messages réseaux ne sont pas montrés par defaut. Utiliser la fonction filtre pour les afficher.</p>
+
+<h4 id="XHR">XHR</h4>
+
+<p>From Firefox 38 onwards, the Web Console indicates when a network request was made as an <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p>
+
+<p>Also from Firefox 38 onwards, you can <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Filtering_and_searching">filter</a> the network requests so as to only see XMLHttpRequests.</p>
+
+<p>Like normal network request log messages, logs of XMLHttpRequests are not shown by default. Use the <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Filtering_and_searching">filtering</a> feature to show them.</p>
+
+<h3 id="Erreurs_et_avertissements_JavaScript">Erreurs et avertissements JavaScript</h3>
+
+<p>Les messages JavaScript ressemblent à :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="sect1"></h3>
+
+<h3 id="Erreurs_CSS_avertissements_et_évènements_de_reflow">Erreurs CSS, avertissements et évènements de <em>reflow</em></h3>
+
+<p>Les messages CSS ressemblent à ceci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Par défaut, les avertissements CSS ne sont pas affichés.</p>
+
+<h4 id="Évènements_de_reflow">Évènements de reflow</h4>
+
+<p>La Console Web logue aussi les évènements de reflow. Un reflow est le nom donné à une opération pendant laquelle le navigateur calcule la disposition de tout ou partie de la page.<br>
+ Les reflows se produisent lorsqu'un changement est arrivé dans la page et que la navigateur pense qu'il en affecte la disposition. Plusieurs évènements peuvent déclencher des reflows, incluant : redimensionner la fenêtre du navigateur, activer des pseudo-classes comme :hover ou manipuler le DOM en JavaScript.<br>
+ <br>
+ Parce que les reflows peuvent être très coûteux en calculs et affecter directement l'interface utilisateur, ils peuvent avoir un grand impact sur la réactivité d'un site ou d'une application web. En loguant les évènements de reflow, la Console Web peut vous donner une idée du moment auquel ces évènements sont déclenchés, combien de temps ils prennent à s'exécuter et si les reflows sont synchrones et déclenchés par du JavaScript, quel code les a déclenchés.<br>
+ <br>
+ Les évènements de reflow sont affichés dans la catégorie CSS, en tant que messages "Log", bien séparés des erreurs et avertissements CSS. Par défaut, ils sont désactivés. Vous pouvez les activer en cliquant sur le bouton "CSS" dans la boite à outils et en sélectionnant "Log".<br>
+ <br>
+ Chaque message porte une étiquette "reflow" et montre le temps qui a fallu pour exécuter le reflow :<br>
+ <br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7087/web-console-reflow-asynch.png" style="height: 53px; width: 554px;"><br>
+ Si le reflow est synchrone et a été déclenché par du JavaScript, un lien vers la ligne de code qui a déclenché le reflow est aussi affiché :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7089/web-console-reflow-synch.png"><br>
+ Cliquez sur le lien pour ouvrir le fichier dans le <a href="/fr/docs/Tools/Debugger">Débogueur</a>.</p>
+
+<h4 id="Reflows_synchrones_et_asynchrones">Reflows synchrones et asynchrones</h4>
+
+<p>Si un changement est fait et qu'il invalide la disposition courante - par exemple, la fenêtre du navigateur est redimensionnée ou du JavaScript modifie le CSS d'un élément - la disposition n'est pas recalculée immédiatement. A la place, le reflow se produit de façon asynchrone, lorsque le navigateur décide que cela est nécessaire ; en général, lorsque le navigateur redessine ("repaint"). De cette façon, le navigateur peut enregistrer une série de changements invalidants et recalculer leurs effets en une seule fois. Cependant, si du code JavaScript lit un style qui a été modifié, alors le navigateur doit réaliser un reflow synchrone pour calculer le style calculé ("<em>computed style</em>") à retourner.</p>
+
+<p>Par exemple, le code suivant provoque un reflow immédiat et synchrone au moment de l'appel à window.getComputedStyle(thing).height :</p>
+
+<pre class="brush: js notranslate"><code class="language-js"><span class="keyword token">var</span> thing <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById<span class="punctuation token">(</span></span><span class="string token">"the-thing"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+thing<span class="punctuation token">.</span>style<span class="punctuation token">.</span>display <span class="operator token">=</span> <span class="string token">"inline-block"</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> thingHeight <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">getComputedStyle<span class="punctuation token">(</span></span>thing<span class="punctuation token">)</span><span class="punctuation token">.</span>height<span class="punctuation token">;</span></code>
+</pre>
+
+<p>A cause de cela, c'est une bonne idée d'éviter l'entrelacement des appels en écriture et en lecture des styles d'un élément lors de la manipulation du DOM, parce que chaque fois que vous relisez un style qui a été invalidé par un précédent appel en écriture, vous forcez un reflow synchrone.</p>
+
+<h3 id="Avertissements_et_erreurs_de_sécurité">Avertissements et erreurs de sécurité</h3>
+
+<p>Les avertissements et les erreurs de sécurité ressemblent à ceci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Les messages de sécurité affichés dans la console web aident les développeurs à trouver les vulnérabilités de leur site qu’elles soient potentielles ou effectives. De plus, beaucoup de ces messages sont enrichissants pour les développeurs car ils finissent par un lien "En savoir plus" qui redirige sur une page contenant des informations et des conseils pour minimiser le problème.</p>
+
+<p>La liste complète des messages de sécurité est la suivante :</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <th scope="col">Message</th>
+   <th scope="col">Details</th>
+  </tr>
+  <tr>
+   <td>Blocage du chargement du contenu mixte actif</td>
+   <td>La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td>
+  </tr>
+  <tr>
+   <td>Blocage du chargement du contenu mixte non actif</td>
+   <td>La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td>
+  </tr>
+  <tr>
+   <td>Chargement de contenu mixte actif (non sécurisé) sur une page sécurisée</td>
+   <td>La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td>
+  </tr>
+  <tr>
+   <td>Chargement de contenu mixte non actif (non sécurisé) sur une page sécurisée</td>
+   <td>La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td>
+  </tr>
+  <tr>
+   <td>Le site spécifie un en-tête   X-Content-Security-Policy/Report-Only et un en-tête Content-Security-Policy/Report-Only. L’en-tête X-Content-Security-Policy/Report-Only sera ignoré.</td>
+   <td>Voir <a href="/fr/docs/Security/CSP">Content Security Policy</a> pour plus de détails.</td>
+  </tr>
+  <tr>
+   <td>Les en-tête X-Content-Security-Policy X-Content-Security-Report-Only seront dépréciés dans le futur. Merci d'utiliser les en-têtes Content-Security-Policy et Content-Security-Report-Only avec les spécificités CSP à la place.</td>
+   <td>Voir <a href="/fr/docs/Security/CSP">Content Security Policy</a> pour plus de détails.</td>
+  </tr>
+  <tr>
+   <td>Champs mot de passe présents sur une page non sécurisée (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.</td>
+   <td>Les pages contenant des formulaires de connexion doivent être servis en HTTPS et non en HTTP.</td>
+  </tr>
+  <tr>
+   <td>Champs mot de passe présents sur un formulaire non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.</td>
+   <td>Les formulaires contenant des champs de mot de passe doivent les envoyer en HTTPS et non en HTTP.</td>
+  </tr>
+  <tr>
+   <td>Champs mot de passe présents dans un iframe non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.</td>
+   <td>Les pages comprenant des iframes qui contiennent des formulaires de connexion doivent être servis en HTTPS et non en HTTP.</td>
+  </tr>
+  <tr>
+   <td>Le site a spécifié un en-tête Strict-Transport-Security invalide.</td>
+   <td>Voir <a href="/fr/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> pour plus d'informations</td>
+  </tr>
+  <tr>
+   <td>
+    <div class="geckoVersionNote">
+    <p>New in Firefox 36</p>
+    </div>
+
+    <p>This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.</p>
+   </td>
+   <td>
+    <p>The site uses a certificate whose signature uses the SHA-1 hash algorithm.</p>
+
+    <p>SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the <a href="https://developer.mozilla.org/en-US/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> article for more details.</p>
+
+    <p>Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Le Bug 863874</a> est le méta-bug pour l'affichage des messages d'erreurs de sécurité dans la console web. Si vous avez d'autres idées pour des fonctionnalités utiles comme celles décrites ici, ou si vous êtes intéressé pour contribuer, jetez un coup d'œil au méta-bug et à ses dépendances.</p>
+
+<h3 id="Message_console_API">Message console API</h3>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Cette section décrit les messages web console des appels API qui affichent véritablement quelque chose. Pour des informations plus génériques sur la console API il est possible de se référer à sa <a href="/fr/docs/Web/API/console">page de documentation</a>.</p>
+
+<h4 id="Messages_derreurs">Messages d'erreurs</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">API</th>
+   <th scope="col">Contenu du message</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.error"><code>error()</code></a></td>
+   <td>
+    <p>L'argument à  <code>error()</code>.</p>
+
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js">console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"an error"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7143/api-error.png" style="display: block; margin-left: auto; margin-right: auto;">
+    <p>A partir de Firefox 31, la console affiche la pile complète des erreurs :</p>
+
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js"><span class="keyword token">function</span> <span class="function token">error<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"an error"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">call_error<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">error<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">call_error<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/7745/console-error-stack.png" style="display: block; height: 109px; margin-left: auto; margin-right: auto; width: 497px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.exception"><code>exception()</code></a></td>
+   <td>Un alias de <code>error()</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.assert"><code>assert()</code></a></td>
+   <td>
+    <p>Si l'insertion fonctionne, rien. Si l'insertion ne fonctionne pas l'argument :</p>
+
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js">console<span class="punctuation token">.</span><span class="function token">assert<span class="punctuation token">(</span></span><span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"My assertion always fails"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7139/api-assert.png" style="display: block; margin-left: auto; margin-right: auto;">
+    <p>A partir de Firefox 31, la console affiche la pile complète des insertions :</p>
+
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js"><span class="keyword token">function</span> <span class="function token">assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">assert<span class="punctuation token">(</span></span><span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"assertion failed"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">call_assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">call_assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/7743/console-assert-stack.png" style="display: block; height: 111px; margin-left: auto; margin-right: auto; width: 497px;"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Messages_davertissement">Messages d'avertissement</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">API</th>
+   <th scope="col">Contenu du message</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.warn"><code>warn()</code></a></td>
+   <td>
+    <p>L'argument à <code>warn()</code>.</p>
+
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js">console<span class="punctuation token">.</span><span class="function token">warn<span class="punctuation token">(</span></span><span class="string token">"a warning"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7155/api-warn.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Messages_dinformation">Messages d'information</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">API</th>
+   <th scope="col">Contenu du message</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.info"><code>info()</code></a></td>
+   <td>
+    <p>L'argument à <code>info()</code>.</p>
+
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js">console<span class="punctuation token">.</span><span class="function token">info<span class="punctuation token">(</span></span><span class="string token">"some info"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7145/api-info.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Message_de_log">Message de log</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">API</th>
+   <th scope="col">Contenu du message</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.count"><code>count()</code></a></td>
+   <td>
+    <p>Le label fourni, si présent, et le nombre d'occurrences que <code>count()</code> a appelé avec le label donné.</p>
+
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js">console<span class="punctuation token">.</span><span class="function token">count<span class="punctuation token">(</span></span>user<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/7359/api-count.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.log"><code>log()</code></a></td>
+   <td>
+    <p><code>L'argument à log()</code>.</p>
+
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js">console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"logged"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7147/api-log.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.trace"><code>trace()</code></a></td>
+   <td>Trace de la pile.
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js">console<span class="punctuation token">.</span><span class="function token">trace<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7159/api-trace.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.dir"><code>dir()</code></a></td>
+   <td>
+    <p>Liste les propriétés d'un objet.</p>
+
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js"><span class="keyword token">var</span> user <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById<span class="punctuation token">(</span></span><span class="string token">'user'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">dir<span class="punctuation token">(</span></span>user<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7157/api-dir.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.time"><code>time()</code></a></td>
+   <td>
+    <p>Notifie que le timer a démarré.</p>
+
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js">console<span class="punctuation token">.</span><span class="function token">time<span class="punctuation token">(</span></span><span class="string token">"t"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7149/api-time.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></td>
+   <td>
+    <p>Durée du timer.</p>
+
+    <pre class="brush: js  language-js notranslate">
+<code class="language-js">console<span class="punctuation token">.</span><span class="function token">timeEnd<span class="punctuation token">(</span></span><span class="string token">"t"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7151/api-timeEnd.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.table"><code>table()</code></a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Ce message est une des nouveautés de Firefox 34.</p>
+    </div>
+
+    <p>Affiche des données de tableau comme un tableau.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Messages_groupés">Messages groupés</h4>
+
+<p>il est possible d'utiliser<code> console.group()</code> pour créer des groupes indentés dans la console. Voir <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> pour plus d'informations.</p>
+
+<h4 id="Personnalisation_des_messages">Personnalisation des messages</h4>
+
+<p>Depuis Firefox 31, il est possible d'utiliser le spécificateur de format <code>"%c"</code> pour personnaliser les messages console :</p>
+
+<pre class="brush: js  language-js notranslate"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"%cMy stylish message"</span><span class="punctuation token">,</span> <span class="string token">"color: red; font-style: italic"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div>
+
+<h3 id="Messages_dentréesortie">Messages d'entrée/sortie</h3>
+
+<p>Les commandes envoyées au navigateur en utilisant <a href="#command-line" title="#command-line">la ligne de commande de la Console Web</a>, et les réponses correspondantes, sont affichés de cette façon :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">La barre gris foncé indique qu'il s'agit de messages d'entrée/sortie, tandis que la direction de la flèche indique si il s’agit d'une entrée ou d'une sortie.</p>
+
+<h3 id="Filtrer_et_rechercher"><a name="filtering-and-searching">Filtrer et rechercher</a></h3>
+
+<p>Vous pouvez utiliser la barre d'outils en haut pour filtrer l'affichage :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5601/web-console-toolbar-highlighted.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 924px;">To see only messages of particular types, click the button labeled with that type ("Net", "CSS", and so on). Clicking the main part of the button toggles that type on or off, while clicking the arrow on the right gives you more fine-grained filter options within that type (for example, whether to display errors and warnings).</p>
+
+<p>To see only messages that contain a specific string, type in the text box labeled "Filter output".</p>
+
+<p>Enfin, vous pouvez aussi vider la Console Web de tous ses messages.</p>
diff --git a/files/fr/tools/web_console/helpers/index.html b/files/fr/tools/web_console/helpers/index.html
new file mode 100644
index 0000000000..f367005482
--- /dev/null
+++ b/files/fr/tools/web_console/helpers/index.html
@@ -0,0 +1,82 @@
+---
+title: Fonctions d'aide de la Console Web
+slug: Outils/Console_Web/Fonctions_d_aide
+tags:
+  - Debugging
+  - Web Development
+  - web console
+translation_of: Tools/Web_Console/Helpers
+---
+<div>{{ToolsSidebar}}</div>
+
+<h2 id="Les_commandes">Les commandes</h2>
+
+<p>La ligne de commande JavaScript fournie par la Console Web, offre de nombreuses fonctions d'aide pour rendre certaines tâches plus simples.</p>
+
+<ul>
+ <li>Un sélecteur passé à <code>document.querySelector</code> pour localiser l'iframe.</li>
+ <li>L'élément iframe lui même</li>
+ <li>La fenêtre de contenu de l'iframe</li>
+</ul>
+
+<dl>
+ <dt><code>$()</code></dt>
+ <dd>Analyse le sélecteur CSS, et retourne le premier élément correspondant. Équivalent à {{ domxref("document.querySelector()") }}, ou appelle la fonction $ de la page, si elle existe.</dd>
+ <dt><code>$$()</code></dt>
+ <dd>Analyse le sélecteur CSS, et retourne une liste de nœud DOM correspondant. C'est un raccourci de {{ domxref("document.querySelectorAll()") }}</dd>
+ <dd>Depuis Firefox 41, cette méthode n'est plus un raccourci pour {{ domxref("document.querySelectorAll()")}} et à la place retourne un tableau d'éléments.</dd>
+ <dt><code>$0</code></dt>
+ <dd>L'élément actuellement inspecté sur la page.</dd>
+ <dt><code>$_</code></dt>
+ <dd><em>Nouveau dans Firefox 39. </em>Stocke le résultat de la dernière expression exécutée dans la ligne de commande de la console. Par exemple, taper 2+2 puis <kbd>entrée</kbd> et ensuite $_ puis <kbd>entrée</kbd>, la console affichera 4.</dd>
+ <dt><code>$x()</code></dt>
+ <dd>Evalue une expression <a href="/fr/docs/XPath" title="/fr/docs/XPath">XPath </a>et renvoie un tableau des nœuds correspondant.</dd>
+ <dt><code>keys()</code></dt>
+ <dd>À partir d'un objet, retourne une liste de ses clefs (<em>keys</em>, ou nom de propriété) . C'est un raccourci de <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a>.</dd>
+ <dt><code>values()</code></dt>
+ <dd>À partir d'un objet, retourne une liste de ses valeurs ; à utiliser avec <code>keys()</code>.</dd>
+ <dt><code>clear()</code></dt>
+ <dd>Vide l'affichage des messages de la console.</dd>
+ <dt><code>inspect()</code></dt>
+ <dd>À partir d'un objet, ouvre un inspecteur d'objet.</dd>
+ <dt><code>pprint()</code></dt>
+ <dd>Formate la valeur fournie sous une forme lisible (<em>pretty-print)</em> ; utile pour afficher le contenu d'objets ou de tableaux.</dd>
+ <dt><code>help()</code></dt>
+ <dd>Affiche un texte d'aide. En fait, dans un parfait exemple de récursion, cette commande vous amène à cette page.</dd>
+ <dt><code>cd()</code></dt>
+ <dd>Change le contexte de l'évaluation JavaScript vers une autre iframe dans la page. Cet helper accepte différent inputs. Il est possible de fournir :</dd>
+ <dd>Voir <a href="/fr/docs/Tools/Web_Console#Working_with_iframes" title="/fr/docs/Tools/Web_Console#Working_with_iframes">travailler avec des iframes</a>.</dd>
+ <dt><code>copy()</code></dt>
+ <dd><em>Nouveau dans Firefox 38.</em> Copie l'argument dans le presse-papier. Si l'argument est une chaine de caractères, elle est copiée telle quelle. Sinon la méthode <code><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a></code> sera appelée sur l'argument et le résultat sera copié dans le presse-papier.</dd>
+ <dt><code>clearHistory()</code></dt>
+ <dd><em>Nouveau dans Firefox 39.</em> Exactement comme une ligne de commande normale, la ligne de commande de la console <a href="/fr/docs/Tools/Web_Console#Command_history">se souvient des commandes tapées</a>.</dd>
+ <dt>Référez-vous à l'<a href="/fr/docs/Web/API/console" title="/fr/docs/Web/API/console">API Console</a> pour plus d'informations sur comment journaliser depuis le contenu.</dt>
+</dl>
+
+<h2 id="Variables">Variables</h2>
+
+<dl>
+ <dt id="tempN">temp<em>N</em></dt>
+ <dd>L'option <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use in Console">"Utiliser dans la Console"</a> de l'Inspecteur génère une variable pour un noeud nommé <code>temp0</code>, <code>temp1</code>, <code>temp2</code>, etc. Afin de référencer le noeud.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_Voir_le_contenu_dun_nœud_DOM">Exemple : Voir le contenu d'un nœud DOM</h3>
+
+<p>Supposons que nous avons un nœud DOM avec l'ID "content". En fait, la page que vous êtes en train de lire actuellement en possède un, vous pouvez ainsi directement ouvrir la Console Web et essayer.</p>
+
+<p>Regardez le contenu du nœud en utilisant les fonctions <code>$()</code> et <code>inspect()</code> :</p>
+
+<pre class="brush: js notranslate">inspect($("#content"))</pre>
+
+<p>Ceci ouvre automatiquement l'inspecteur d'objet, vous montrant le contenu du nœud DOM qui correspond au sélecteur CSS "#content".</p>
+
+<h3 id="Exemple_Afficher_le_contenu_dun_nœud_DOM">Exemple : Afficher le contenu d'un nœud DOM</h3>
+
+<p>Imaginons que vous déboguez à distance pour un utilisateur, et que vous avez besoin du contenu du nœud. Vous pouvez demander à votre utilisateur d'ouvrir la Console Web et d'afficher le contenu du nœud dans la console, de copier le texte et de vous l'envoyer par e-mail, en utilisant la fonction  <code>pprint()</code> :</p>
+
+<pre class="brush: js notranslate">pprint($("#content"))
+</pre>
+
+<p>Ceci écrit tout le contenu du nœud afin que vous puissiez le lire. Bien entendu, cette commande est plus utile sur des objets autres qu'un nœud DOM.</p>
diff --git a/files/fr/tools/web_console/index.html b/files/fr/tools/web_console/index.html
new file mode 100644
index 0000000000..7660506e93
--- /dev/null
+++ b/files/fr/tools/web_console/index.html
@@ -0,0 +1,47 @@
+---
+title: Console Web
+slug: Outils/Console_Web
+tags:
+  - Debugging
+  - Guide
+  - Security
+  - Tools
+  - Web Development
+  - 'Web Development:Tools'
+  - web console
+translation_of: Tools/Web_Console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p><strong>La Console Web :</strong></p>
+
+<ol>
+ <li>Affiche les informations associées à la page web : les requêtes réseau, le JavaScript, le CSS, les erreurs et avertissements de sécurité, ainsi que les erreurs, les avertissements et les messages d'information explicitement affichés par le code JavaScript s’exécutant sur la page.</li>
+ <li>Permet d’interagir avec la page web en exécutant des expressions JavaScript dans le contexte de la page.</li>
+</ol>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/fr/docs/Tools/Web_Console/Opening_the_Web_Console">Ouvrir la Console Web</a></dt>
+ <dd>Commencer à utiliser la Console Web.</dd>
+ <dt><a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter">L'interpréteur de ligne de commande</a></dt>
+ <dd>Interagir avec un document en utilisant la Console.</dd>
+ <dt><a href="/fr/docs/Tools/Web_Console/Split_console">Console scindée</a></dt>
+ <dd>Utiliser la Console à côté d'autres outils.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/fr/docs/Tools/Web_Console/Console_messages">Les messages de la console</a></dt>
+ <dd>Les détails des messages que la Console enregistre.</dd>
+ <dt><a href="/fr/docs/Tools/Web_Console/Rich_output">Informations détaillées</a></dt>
+ <dd>Voir et interagir avec les objets affichés par la Console.</dd>
+ <dt><a href="/fr/docs/Tools/Web_Console/Keyboard_shortcuts">Raccourcis clavier</a></dt>
+ <dd>Référence des raccourcis.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/fr/tools/web_console/keyboard_shortcuts/index.html b/files/fr/tools/web_console/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..ddff3cf238
--- /dev/null
+++ b/files/fr/tools/web_console/keyboard_shortcuts/index.html
@@ -0,0 +1,12 @@
+---
+title: Raccourcis clavier
+slug: Outils/Console_Web/Keyboard_shortcuts
+translation_of: Tools/Web_Console/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "web-console") }}</p>
+
+<h2 id="Global_shortcuts">Global shortcuts</h2>
+
+<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
diff --git a/files/fr/tools/web_console/rich_output/index.html b/files/fr/tools/web_console/rich_output/index.html
new file mode 100644
index 0000000000..cf1a2a8146
--- /dev/null
+++ b/files/fr/tools/web_console/rich_output/index.html
@@ -0,0 +1,77 @@
+---
+title: Informations Détaillées
+slug: Outils/Console_Web/Rich_output
+translation_of: Tools/Web_Console/Rich_output
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Lorsque la console Web, affiche des objets, elle inclut un ensemble d'informations plus riche que juste le nom de l'objet. En particulier elle :</p>
+
+<ul>
+ <li><a href="/fr/docs/Tools/Web_Console/Rich_output#Type-specific_rich_output">Fournit des informations supplémentaires sur certains types</a></li>
+ <li><a href="/fr/docs/Tools/Web_Console/Rich_output#Examining_object_properties">Permet un examen détaillé des propriétés de l'objet</a></li>
+ <li><a href="/fr/docs/Tools/Web_Console/Rich_output#Highlighting_and_inspecting_DOM_nodes">Fournit des informations plus riches sur les éléments DOM, et permet de les sélectionner dans l'Inspecteur</a></li>
+</ul>
+
+<h2 id="Information_spécifique_aux_types">Information spécifique aux types</h2>
+
+<p>La Console Web fournit des informations supplémentaires pour une bonne partie des types d'objets, cela inclut les types suivants :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>Object</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Array</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Date</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Promise</code></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>New in Firefox 36</p>
+    </div>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>RegExp</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Window</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Document</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Element</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Event</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/14434/webconsole-events.png" style="height: 51px; width: 600px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examiner_les_propriétés_d'un_objet">Examiner les propriétés d'un objet</h2>
+
+<p>Lorsqu'un objet est affiché dans la console, il apparait avec une petite icône en forme de triangle en début de ligne. Cliquer dessus affichera une liste de son contenu.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16430/console_logObject.png" style="border: 1px solid black; display: block; height: 239px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<h2 id="Mettre_en_surbrillance_les_noeuds_DOM">Mettre en surbrillance les noeuds DOM</h2>
+
+<p>Lors d'un survol, sur un noeud DOM affiché dans la console, il sera mis en surbrillance dans la page :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display: block; margin-left: auto; margin-right: auto;">Dans la capture d'écran ci-dessous, il est possible de remarquer une "cible" bleue à côté de du noeud : cliquer dessus ouvrira l'<a href="/fr/docs/Tools/Page_Inspector">Inspecteur</a> avec ce noeud sélectionné.</p>
diff --git a/files/fr/tools/web_console/split_console/index.html b/files/fr/tools/web_console/split_console/index.html
new file mode 100644
index 0000000000..8ead94713a
--- /dev/null
+++ b/files/fr/tools/web_console/split_console/index.html
@@ -0,0 +1,20 @@
+---
+title: Console scindée
+slug: Outils/Console_Web/Split_console
+translation_of: Tools/Web_Console/Split_console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Il est possible (et très pratique) d'utiliser la Console web en parallèle d'autres outils. Il suffit pour cela d'être dans un autre outil de développement et d'appuyer sur <kbd>Échap</kbd> ou bien d'appuyer sur le bouton "Afficher la console scindée" dans le menu de la <a href="/fr/docs/Tools_Toolbox#Toolbar">Barre d'outils</a>. La boite à outils sera alors scindée, avec l'outil de base en haut et la console en dessous.</p>
+
+<p>Il est possible de fermer la console scindée en appuyant à nouveau sur <kbd>Échap</kbd>, ou en utilisant le bouton "Fermer la console scindée".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16106/split-console.png" style="border-style: solid; border-width: 1px; height: 77px; width: 350px;"></p>
+
+<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p>
+
+<p>Comme d'ordinaire <code>$0</code> sert de raccourci pour l'élément sélectionné actuellement dans l'inspecteur :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16105/split-console-debugger.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;">Lors de l'utilisation de la Console scindée avec le Débogueur, la portée (scope) de la console correspond à celle du Débogueur. Ainsi si le code s'arrête à un point d'arrêt dans une fonction, la portée sera celle de la fonction. En comme si ça n'était pas assez, il y a également de l'auto complétion en fonction de la portée, cela permet par exemple de modifier les objets de la fonction facilement et rapidement :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16107/split-console-show-debug.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"></p>
diff --git a/files/fr/tools/web_console/the_command_line_interpreter/index.html b/files/fr/tools/web_console/the_command_line_interpreter/index.html
new file mode 100644
index 0000000000..631bcd0ef8
--- /dev/null
+++ b/files/fr/tools/web_console/the_command_line_interpreter/index.html
@@ -0,0 +1,161 @@
+---
+title: Interpreteur de ligne de commande
+slug: Outils/Console_Web/The_command_line_interpreter
+translation_of: Tools/Web_Console/The_command_line_interpreter
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Il est possible d'interpréter des expressions JavaScript en temps réel en utilisant l'interpréteur de ligne de commande fournie par la <a href="/fr/docs/Tools/Web_Console">Console Web</a>. La Console a deux modes de saisie : mode ligne unique et mode éditeur multiligne.</p>
+
+<h2 id="Le_mode_ligne_unique">Le mode ligne unique</h2>
+
+<p>Pour ce mode se saisie, vous pouvez écrire des expressions JavaScript dans le champ de saisie qui se situe en bas de la console, à droite de <strong>&gt;&gt;</strong>.</p>
+
+<p><img alt="Mode ligne unique, on constate que la zone de saisie se situent en bas, à la fin des message de la Console Web" src="https://mdn.mozillademos.org/files/16672/web_console.png"></p>
+
+<p>Pour ajouter des expressions il suffit de les saisir dans la ligne de commande et d'appuyer sur <kbd>Entrée</kbd>. Pour sauter des lignes et ainsi pouvoir entrer des expressions multiligne, il suffit d'utiliser <kbd>Maj</kbd><kbd>Entrée</kbd> au lieu de <kbd>Entrée</kbd>.</p>
+
+<p>L'expression entrée s'affiche alors dans la fenêtre d'affichage de message, et est suivie par son résultat :</p>
+
+<p><img alt="Retour de la Console Web avec coloration syntactique" src="https://mdn.mozillademos.org/files/16670/console_01.png"></p>
+
+<p>Si votre expression n'a pas l'air d'être complète lorsque <kbd>Entrée</kbd> est pressée, alors la console considère qu'il s'agit en fait d'un <kbd>Maj</kbd>+<kbd>Entrée</kbd> , permettant ainsi de finir l'expression.</p>
+
+<p>Par exemple, si vous tapez :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> toto<span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span></code></pre>
+
+<p>et que vous appuyiez sur <kbd>Entrée</kbd>, la Console ne validera PAS immédiatement votre saisie. Ceci permet d'éviter les erreurs d'inattention avec un code invalide ou pas prêt, vous épargnant par la même occasion une erreur frustrante. À la place, la Console fera comme si vous aviez utilisé <kbd>Maj</kbd>+<kbd>Entrée</kbd> , et il sera ainsi possible de finir tranquillement de rentrer la définition de la fonction.</p>
+
+<h2 id="Le_mode_éditeur_multiligne">Le mode éditeur multiligne</h2>
+
+<p>Pour le mode éditeur multiligne, cliquez sur "Passer en mode éditeur multiligne" <img alt="Icone passer en mode éditeur multiligne" src="https://media.prod.mdn.mozit.cloud/attachments/2020/04/14/17176/2ca78324ebc4b5c4666959a5ed606dfd/icone-multiligne.png"> à droite de la zone de saisie du mode ligne unique ou pressez <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). L'éditeur multiligne s'ouvre à gauche de la <a href="/fr/docs/Tools/Web_Console">Console Web</a>. </p>
+
+<p><img alt="Editeur multiligne, avec deux colonnes, à gauche la zone de saisie et à droite la liste des message de la Console Web" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png"></p>
+
+<p>À l'inverse du mode ligne unique, vous pouvez saisir plusieurs lignes en pressant la touche <kbd>Entrée</kbd>. Pour exécuter le morceau de code que vous avez saisi, cliquez sur <img alt='le bouton "Exécuter"' src="https://media.prod.mdn.mozit.cloud/attachments/2020/04/14/17177/4778932832bd7aaae5ad75968643f4c7/executer.png"> au dessus de la zone d'édition ou appuyez sur <kbd>Ctrl</kbd>+<kbd>Entrée</kbd> (ou <kbd>Cmd</kbd>+<kbd>Return</kbd> sur MacOS).</p>
+
+<p>Vous pouvez ouvrir des fichiers avec le mode éditeur multiligne et sauvegarder dans un fichier le contenu présent dans la zone d'édition :</p>
+
+<ul>
+ <li>Pour ouvrir un fichier, appuyez sur <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner le fichier à ouvrir. </li>
+ <li>Pour sauvegarder le contenu de la zone d'édition, appuyez sur <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner l'emplacement de sauvegarde.</li>
+</ul>
+
+<p>Pour revenir au mode ligne unique, cliquez sur l'icône <strong>X </strong>au-dessus de la zone d'édition ou appuyez sur <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p>
+
+<h2 id="Accéder_à_des_variables">Accéder à des variables</h2>
+
+<p>Il est possible d'accéder à des variables définies dans la page, par exemple des variables préconstruites comme <code>window</code> et des variables ajoutées par du code JavaScript comme <code>jQuery </code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png"></p>
+
+<h2 id="Autocomplétion">Autocomplétion</h2>
+
+<p>La ligne de commande possède de l'autocomplétion : il suffit d'entrer quelques lettres et une pop-up apparait avec les complétions possibles (s’il y en a) :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png"></p>
+
+<p>Appuyer sur <kbd>Entrée</kbd>, <kbd>Tab</kbd>, ou Flèche Droite, acceptera la suggestion sélectionnée. Pour changer de sélection, il faut utiliser les flèches haut/bas ou continuer à taper pour affiner les suggestions.</p>
+
+<p>Les suggestions d'autocomplétion sont sensibles à la case.</p>
+
+<p>La console suggère des complétions depuis le scope qui s'exécute actuellement dans la stack frame. Cela signifie que si la console s'est arrêtée sur un point d'arrêt, l'autocomplétion suggérera des objets de la fonction locale.</p>
+
+<p>Les suggestions fonctionnent pour les tableaux également :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png"></p>
+
+<h2 id="Définir_des_variables">Définir des variables</h2>
+
+<p>Il est possible de définir ses propres variables et d'y accéder par la suite :</p>
+
+<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png"></p>
+
+<p>Une fois qu'il aura été interprété, le texte entré aura de la coloration syntaxique, de même que le résultat si approprié.</p>
+
+<div class="blockIndicator note">
+<p>Note: La coloration syntaxique ne sera pas visible dans votre navigateur si certaines fonctionnalités d'Accessibilité sont activées.</p>
+</div>
+
+<h2 id="Historique_de_commandes">Historique de commandes</h2>
+
+<p>La ligne de commande se souvient des commandes qui ont été entrées : pour naviguer dans l'historique, il faut utiliser les flèches haut/bas.</p>
+
+<p>Cet historique persiste entre les sessions. Pour nettoyer l'historique, il faut utiliser <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">fonction d'aide</a> <code>clearHistory()</code>.</p>
+
+<p>À partir de Firefox 65, il est possible d'initier une recherche inversée dans l'historique, à l'instar de ce qui est possible dans le bash Linux/Mac ou du PowerShell de Windows.<br>
+ <br>
+ Sur Windows et Linux, F9 lance la recherche inversée. Sur Mac il s'agit de Ctrl + R</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16468/reverse_search.png"></p>
+
+<p>Il faut ensuite entrer le texte recherché dans la ligne de commande en bas de la Console. Lors de la frappe, la première occurrence correspondante sera affichée dans la Console.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png"></p>
+
+<p>Appuyer de nouveau sur F9 (Ctrl + R sous Mac) itère à l'envers parmi les occurrences. Utiliser Maj + F9 (Ctrl + S sur Mac) itère à l'endroit parmi les occurrences. Lorsque la commande cherchée est trouvée, appuyer sur Entrée exécute l'expression.</p>
+
+<h2 id="Travailler_avec_des_iframes">Travailler avec des iframes</h2>
+
+<p>Si une page contient des <a href="/fr/docs/Web/HTML/Element/iframe">iframes</a>, il est possible d'utiliser la commande <code>cd()</code> pour changer le scope de la console vers celui d'une iframe spécifique. Il est alors possible d'exécuter des fonctions définies dans le document hosté par cette iframe. Il y a trois façons d'accéder à une iframe en utilisant <code>cd()</code>:</p>
+
+<p>Il est possible de passer l'élément DOM de l'iframe :</p>
+
+<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
+cd(frame);</pre>
+
+<p>Il est possible de passer un sélecteur CSS qui correspond à l'iframe :</p>
+
+<pre class="brush: js notranslate">cd("#frame1");</pre>
+
+<p>Il est possible de passer l'objet global window de l'iframe :</p>
+
+<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
+cd(frame.contentWindow);</pre>
+
+<p>Pour revenir au contexte de la fenêtre principale, il suffit d'appeler <code>cd()</code> sans paramètres :</p>
+
+<pre class="brush: js notranslate">cd();</pre>
+
+<p>Par exemple, supposons que nous avons un document qui inclut une iframe :</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Cette iframe définit une nouvelle fonction :</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;script&gt;
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Il est possible de changer de contexte comme ceci :</p>
+
+<pre class="brush: js notranslate">cd("#frame1");</pre>
+
+<p>Le document de l'objet global window est maintenant celui de l'iframe :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png">Et il est alors possible d'appeler la fonction définie dans l'iframe :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png"></p>
+
+<h2 id="Commandes_daide">Commandes d'aide</h2>
+
+<p>{{ page("/fr/docs/Outils/Console_Web/Fonctions_d_aide", "Les commandes") }}</p>
diff --git a/files/fr/tools/web_console/ui_tour/index.html b/files/fr/tools/web_console/ui_tour/index.html
new file mode 100644
index 0000000000..aa1a5fd0d7
--- /dev/null
+++ b/files/fr/tools/web_console/ui_tour/index.html
@@ -0,0 +1,29 @@
+---
+title: Ouvrir la Console web
+slug: Outils/Console_Web/Opening_the_Web_Console
+translation_of: Tools/Web_Console/UI_Tour
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Pour ouvrir la Console web, il faut :</p>
+
+<ul>
+ <li>Soit sélectionner "Console Web" dans le sous-menu "Développement" du menu de Firefox ( sous Mac OS X, il s'agit du menu "Outils")</li>
+ <li>Soit utiliser le raccourci clavier <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>K</kbd> (<kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>K</kbd> sous OS X).</li>
+</ul>
+
+<p>La <a href="/fr/docs/Tools/DevTools_Window" title="/fr/docs/Tools/DevTools_Window">Boite à outils</a> apparaitra en bas de la fenêtre du navigateur, avec la Console Web activée (elle s'appelle simplement "Console" dans la barre d'outils des outils de développement) :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16191/console_63.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 845px;"></p>
+
+<p>L'interface de la Console web est séparée en trois sections horizontales :</p>
+
+<ul>
+ <li><a href="/fr/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">La Barre d'outils </a>se trouve en haut et contient trois boutons. Cliquer sur la corbeille efface le contenu de la Console. Cliquer sur l'entonnoir filtre les messages affichés dans la Console. La case à cocher à droite active les journaux persistant (pas d'effaçage au rechargement ou changement de page)</li>
+ <li><a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">La Ligne de commande</a> se trouve tout en bas, commence par "&gt;&gt;", et permet d'entrer des expressions JavaScript.</li>
+ <li><a href="/fr/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Le panneau d'affichage des messages</a> se trouve entre la barre d'outils et la ligne de commande et occupe la plupart de la fenêtre. Il affiche les divers messages de la console.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Il est possible de vider le contenu de la console avec le raccourci clavier <kbd>Ctrl</kbd> + <kbd>L</kbd> (Windows, Linux) ou <kbd>Cmd</kbd> + <kbd>K</kbd> sous macOS.</p>
+</div>