diff options
Diffstat (limited to 'files/fr/tools/web_console')
4 files changed, 56 insertions, 56 deletions
diff --git a/files/fr/tools/web_console/console_messages/index.html b/files/fr/tools/web_console/console_messages/index.html index dbf34270a4..f12bb1eb54 100644 --- a/files/fr/tools/web_console/console_messages/index.html +++ b/files/fr/tools/web_console/console_messages/index.html @@ -6,7 +6,7 @@ original_slug: Outils/Console_Web/Console_messages --- <div>{{ToolsSidebar}}</div> -<p>La majorité de la Console Web est occupée par le panneau d'affichage des messages :</p> +<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> @@ -23,16 +23,16 @@ original_slug: Outils/Console_Web/Console_messages <tr> <th scope="row">Catégorie</th> <td> - <p>Indique le type de message :</p> + <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><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> + <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> @@ -73,7 +73,7 @@ original_slug: Outils/Console_Web/Console_messages -<p>Les requêtes résseau sont affichées sous cette forme :</p> +<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> @@ -108,13 +108,13 @@ original_slug: Outils/Console_Web/Console_messages </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>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>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> +<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> @@ -128,7 +128,7 @@ original_slug: Outils/Console_Web/Console_messages <h3 id="Erreurs_et_avertissements_JavaScript">Erreurs et avertissements JavaScript</h3> -<p>Les messages JavaScript ressemblent à :</p> +<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> @@ -136,7 +136,7 @@ original_slug: Outils/Console_Web/Console_messages <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>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> @@ -145,16 +145,16 @@ original_slug: Outils/Console_Web/Console_messages <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> + 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> + 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> + 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> @@ -163,7 +163,7 @@ original_slug: Outils/Console_Web/Console_messages <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> +<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> @@ -174,11 +174,11 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <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>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> +<p>La liste complète des messages de sécurité est la suivante :</p> <table class="standard-table" style="width: auto;"> <tbody> @@ -188,22 +188,22 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token </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> + <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> + <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> + <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> + <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>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> @@ -267,14 +267,14 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <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> + <p>L'argument à <code>error()</code>.</p> - <pre class="brush: js language-js notranslate"> + <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> + <p>A partir de Firefox 31, la console affiche la pile complète des erreurs :</p> - <pre class="brush: js language-js notranslate"> + <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> @@ -295,14 +295,14 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <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> + <p>Si l'insertion fonctionne, rien. Si l'insertion ne fonctionne pas l'argument :</p> - <pre class="brush: js language-js notranslate"> + <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> + <p>A partir de Firefox 31, la console affiche la pile complète des insertions :</p> - <pre class="brush: js language-js notranslate"> + <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> @@ -334,7 +334,7 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <td> <p>L'argument à <code>warn()</code>.</p> - <pre class="brush: js language-js notranslate"> + <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> @@ -356,7 +356,7 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <td> <p>L'argument à <code>info()</code>.</p> - <pre class="brush: js language-js notranslate"> + <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> @@ -378,7 +378,7 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <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"> + <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> @@ -389,14 +389,14 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <td> <p><code>L'argument à log()</code>.</p> - <pre class="brush: js language-js notranslate"> + <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"> + <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> @@ -405,7 +405,7 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <td> <p>Liste les propriétés d'un objet.</p> - <pre class="brush: js language-js notranslate"> + <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> @@ -415,7 +415,7 @@ console<span class="punctuation token">.</span><span class="function token">dir< <td> <p>Notifie que le timer a démarré.</p> - <pre class="brush: js language-js notranslate"> + <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> @@ -424,7 +424,7 @@ console<span class="punctuation token">.</span><span class="function token">dir< <td> <p>Durée du timer.</p> - <pre class="brush: js language-js notranslate"> + <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> @@ -447,21 +447,21 @@ console<span class="punctuation token">.</span><span class="function token">dir< <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> +<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> +<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>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>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> diff --git a/files/fr/tools/web_console/helpers/index.html b/files/fr/tools/web_console/helpers/index.html index d505945d7c..3121acba55 100644 --- a/files/fr/tools/web_console/helpers/index.html +++ b/files/fr/tools/web_console/helpers/index.html @@ -75,7 +75,7 @@ original_slug: Outils/Console_Web/Fonctions_d_aide <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> +<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> diff --git a/files/fr/tools/web_console/index.html b/files/fr/tools/web_console/index.html index 162fe4b482..c850045e21 100644 --- a/files/fr/tools/web_console/index.html +++ b/files/fr/tools/web_console/index.html @@ -14,10 +14,10 @@ original_slug: Outils/Console_Web --- <div>{{ToolsSidebar}}</div> -<p><strong>La Console Web :</strong></p> +<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>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> 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 index d2bb4b7efc..9e8f7408c5 100644 --- a/files/fr/tools/web_console/the_command_line_interpreter/index.html +++ b/files/fr/tools/web_console/the_command_line_interpreter/index.html @@ -6,7 +6,7 @@ original_slug: Outils/Console_Web/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> +<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> @@ -22,28 +22,28 @@ original_slug: Outils/Console_Web/The_command_line_interpreter <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> +<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> +<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> +<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>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>À 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> + <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> +<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> |