unslug fr: move

1 files changed, 195 insertions, 0 deletions

diff --git a/files/fr/tools/browser_console/index.html b/files/fr/tools/browser_console/index.html
new file mode 100644
index 0000000000..7125ea0544
--- /dev/null
+++ b/files/fr/tools/browser_console/index.html
@@ -0,0 +1,195 @@
+---
+title: Console JavaScript
+slug: Outils/Console_JavaScript
+tags:
+  - Browser
+  - Debugging
+  - Tools
+  - Web Development
+  - 'WebDevelopment:Tools'
+translation_of: Tools/Browser_Console
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="boxed translate-rendered">
+<p>La Console du navigateur est au navigateur entier ce qu'est la <a href="/fr/docs/Tools/Web_Console"> Console Web</a> à une page web.</p>
+
+<p>Elle logue le même type d'information de la Console Web : Requêtes réseaux, JavaScript, CSS, erreurs et avertissement de sécurité, messages logués par du code JavaScript. Cependant, au lieu de loguer cette information pour un seul onglet, la console logue l"information de tout les onglets courants, de tout les modules complémentaires et du propre code du navigateur.</p>
+
+<p>Si vous voulez également utiliser les autres outils de développement de la <a href="/fr/docs/Tools/Tools_Toolbox">Boite à outils Web</a> sur les modules complémentaires ou le code du navigateur, vous pouvez utiliser la <a href="/fr/docs/Tools/Browser_Toolbox">Boite à outils du navigateur</a>.</p>
+
+<p>Comme la Console Web, la Console du navigateur peut exécuter des expressions JavaScript. Cependant, contrairement à la Console Web qui exécute le code dans le contexte de la page, la Console du navigateur, elle, l'exécute dans le contexte de la fenêtre du navigateur. Cela veut dire que vous pouvez interagir avec chaque onglet du navigateur, en utilisant la variable globale <a href="/fr/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a>. Il est même possible d’interagir avec le XUL utilisé pour spécifier l'interface utilisateur du navigateur.</p>
+
+<div class="geckoVersionNote">
+<p>NB : La ligne de commande de la Console du navigateur (pour exécuter des expressions JavaScript) est désactivée par défaut. Pour l'activer, il faut passer la préférence <code>devtools.chrome.enabled</code> à <code>true</code> dans about:config, ou cocher l'option "Activer le débogage du chrome du navigateur et des modules" dans les <a href="/fr/docs/Tools_Toolbox#Advanced_settings">options des outils de développement</a>.</p>
+</div>
+
+<h2 id="Ouvrir_la_Console_du_navigateur">Ouvrir la Console du navigateur</h2>
+
+<p>Il est possible d'ouvrir la Console du navigateur de deux façons différentes :</p>
+
+<ol>
+ <li>Depuis le menu Firefox : Il faut sélectionner "Console du navigateur" dans le menu "'Développement" (sous macOS, le menu "Développement" est un sous menu du menu "Outils")</li>
+ <li>Utiliser le raccourci clavier : <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>J</kbd> sur Windows et <kbd>Cmd</kbd>+<kbd>Maj</kbd>+<kbd>J</kbd> sur Mac.</li>
+</ol>
+
+<p>Alternativement, il est possible d'ouvrir la Console du navigateur en laçant Firefox en ligne de commande avec l'argument</p>
+
+<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre>
+
+<p>La Console du navigateur ressemble a ceci :</p>
+
+
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16787/browser_console_68.png" style="display: block; height: 339px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+
+
+<p>Comme vous pouvez le constater, la Console du navigateur ressemble et se comporte comme la <a href="/fr/docs/Tools/Web_Console"> Console Web </a>:</p>
+
+<ul>
+ <li>La plupart de la fenêtre est occupé par un <a href="/fr/docs/Tools/Web_Console#Message_Display_Pane">panneau d'affichage</a></li>
+ <li>Une <a href="/fr/docs/Tools/Web_Console#Filtering_and_searching">barre d'outils </a>se trouve en haut et permet de filtrer les messages qui apparaissent.</li>
+ <li>Un <a href="/fr/docs/Tools/Web_Console#The_command_line_interpreter">interpréteur de ligne de commande </a>en bas, permet d'évaluer des expressions JavaScript.</li>
+</ul>
+
+<p>À partir de Firefox 68, la console du navigateur permet d'afficher ou de cacher les messages de contenu (les messages des scripts de toutes les pages ouvertes). Il suffit pour cela de cocher la case "<strong>Afficher les messages de contenu</strong>". L'image suivante montre la même page, mais avec la case cochée :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16788/browser_console_68_02.png" style="display: block; height: 339px; margin: 0 auto; width: 800px;"></p>
+
+
+
+<h2 id="Messages_de_la_Console_du_navigateur">Messages de la Console du navigateur</h2>
+
+<p>La Console du navigateur affiche le même type de messages que la Console Web. Elle affiche donc :</p>
+
+<ul>
+ <li><a href="/fr/docs/Tools/Web_Console#HTTP_requests">Les requêtes HTTP</a></li>
+ <li><a href="/fr/docs/Tools/Web_Console#Warnings_and_errors">Les avertissements et erreurs </a>(incluant le JavaScript, le CSS, les avertissements et erreurs de sécurité, et les messages affichés par du code JavaScript utilisant <a href="/fr/docs/Web/API/console">l'API console</a>)</li>
+ <li><a href="/fr/docs/Tools/Web_Console#Input.2Foutput_messages">Les messages d'entrée/sortie </a>: les commandes envoyées au navigateur via ligne de de commande, et les résultats de l’exécution ces commandes.</li>
+</ul>
+
+<p>Cependant, la Console du Navigateur affiche les messages venant du :</p>
+
+<ul>
+ <li>Contenu web contenu dans tous les onglets du navigateur</li>
+ <li>Code du navigateur</li>
+ <li>Contenu des modules complémentaires.</li>
+</ul>
+
+<h3 id="Messages_des_modules_complémentaires">Messages des modules complémentaires</h3>
+
+<p>La Console du navigateur affiche les messages envoyés par chaque module complémentaire de Firefox.</p>
+
+<h4 id="Console.jsm">Console.jsm</h4>
+
+<p>Pour utiliser l'API console depuis un modèle complémentaire traditionnel, il faut l'obtenir grâce au module "Console".</p>
+
+<p>Un mot réservé importé par Console.jsm est "console". L'exemple ci-dessous accède au module puis ajoute un message dans la Console du navigateur :</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console</pre>
+
+<p>Pour en savoir plus :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/console">Documentation de l'API console</a></li>
+ <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Le code source de Console.jsm dans the Mozilla Cross-Reference</a></li>
+</ul>
+
+<h4 id="HUDService">HUDService</h4>
+
+<p>HUDService permet également d'accéder à la Console du navigateur. Ce module est disponible dans <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a>. Ce module permet non seulement d’accéder à la Console du navigateur, mais également à la Console Web.</p>
+
+<p>Voici un exemple qui explique comment effacer le contenu de la Console du navigateur :</p>
+
+<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);</pre>
+
+<p>Il est possible d'accéder au contexte du document de la Console du navigateur avec HUDService. L'exemple ci-dessous efface la contenu de la Console du navigateur quand l'utilisateur survole le bouton "Clear" :</p>
+
+<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);</pre>
+
+<h4 id="Fonctionnalités_bonus_disponibles">Fonctionnalités bonus disponibles</h4>
+
+<p>Pour les modules complémentaires utilisant le <a href="https://addons.mozilla.org/fr/developers/docs/sdk/latest/dev-guide/index.html">Add-on SDK</a>, l'API console est disponible automatiquement. Voici un exemple de module complémentaire qui affiche une erreur quand l'utilisateur clique sur un widget :</p>
+
+<pre class="brush: js">widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}</pre>
+
+<p><a href="https://addons.mozilla.org/fr/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">Compiler ceci en tant que fichier XPI</a>, puis ouvrir la Console du navigateur, puis ouvrir le fichier XPI dans Firefox et l'installer fera apparaître un widget nommé "Error!" dans la barre des modules complémentaires :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png">Cliquer sur l’icône affichera ce message dans la console :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png"></p>
+
+<p>Les messages des modules complémentaires basés sur le Add-on SDK sont préfixés par le nom du module complémentaire (ici "log-error"), rendant ainsi la recherche de ces messages facile grâce à la <a href="/fr/docs/Tools/Web_Console#Filtering_and_searching">boite de filtrage</a>. Par défaut, seuls les messages d’erreur sont affichés dans la console. Il est cependant possible de changer cela dans <a href="/fr/Add-ons/SDK/Tools/console#Logging%20Levels">préférences du navigateur</a>.</p>
+
+<h2 id="Ligne_de_commande_de_la_Console_du_navigateur">Ligne de commande de la Console du navigateur</h2>
+
+<div class="geckoVersionNote">
+<p>La ligne de commande de la Console du navigateur est désactivée par défaut. Pour l'activer, il faut passer la préférence <code>devtools.chrome.enabled</code> à <code>true</code> dans about:config, ou cocher l'option "Activer le débogage du chrome du navigateur et des modules" dans les <a href="/fr/docs/Tools/Settings">options des outils de développement</a>.</p>
+</div>
+
+<p>Comme la Console Web, l'interpréteur de ligne de commande permet d'évaluer des expressions JavaScript en temps réel :<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png">Comme la Console Web, elle supporte également <a href="/fr/docs/Tools/Web_Console#Autocomplete">l'autocomplétion</a>, <a href="/fr/docs/Tools/Web_Console#Command_history">l'historique</a>, de nombreux <a href="/fr/docs/Tools/Web_Console#Keyboard_shortcuts">raccourcis clavier </a>et des <a href="/fr/docs/Tools/Web_Console#Helper_commands">fonctions d'aide</a>. Si le résultat d'une commande est un objet, Il est possible de cliquer dessus <a href="/fr/docs/Tools/Web_Console#Inspecting_objects">pour voir ses détails</a>.</p>
+
+<p>Alors que la Console Web exécute le code dans le contexte de la page à laquelle elle est rattachée, la Console du navigateur elle exécute le code dans la contexte du navigateur. Il est possible de vérifier cela en évaluant l'objet <code>window</code> :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png"></p>
+
+<p>Cela signifie qu'il est possible de contrôler le navigateur, il est ainsi possible de : ouvrir et fermer onglets et fenêtres, changer leur contenu et modifier l'interface utilisateur en créant, modifiant ou supprimant des éléments XUL.</p>
+
+<h3 id="Contrôler_le_navigateur">Contrôler le navigateur</h3>
+
+<p>L'interpréteur de ligne de commande a accès à l'objet <a href="/fr/docs/XUL/tabbrowser"><code>tabbrowser</code></a> à travers la variable globale <code>gBrowser</code>. Cela permet de contrôler le navigateur via ligne de commande. Entrer ce code dans la ligne de commande de la Console du navigateur modifiera l’onglet ouvert puis redirigera automatiquement vers le site de Mozilla (bon à savoir, pour sauter une ligne dans l'interpréteur, utilisez le <kbd>Maj</kbd>+<kbd>Entrée</kbd>) :</p>
+
+<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "&lt;h1&gt;this page has been eaten&lt;/h1&gt;";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre>
+
+<p>Cela ajoute un écouteur sur l'évènement <code>load</code> qui absorbera la nouvelle page puis chargera la nouvelle page.</p>
+
+<div class="note">
+<p>Il est possible de relancer le navigateur avec avec la commande <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Windows, Linux) ou <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Mac). Cette commande redémare le navigateur avec les même onglets qu'avant le rédémarage.</p>
+</div>
+
+<h3 id="Modifier_l'interface_utilisateur_du_navigateur">Modifier l'interface utilisateur du navigateur</h3>
+
+<p>Étant donné que l’objet <code>window</code> correspond au chrome du navigateur, il est possible de modifier l'interface utilisateur du navigateur. Sur Windows, le code suivant ajoutera un nouvel objet au menu principal du navigateur. (Attention, ce code ne marche pas dans les versions récentes de Firefox) :</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png">Sur macOS, ce code ajoutera un objet au menu "Tools" :</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png"></p>
+</div>