Fixes #1541 (#1626)

* Fixes #1541, update page vs. en-US counterparts + improves/clarifies some parts
* FIX: bcd and id

Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>

1 files changed, 26 insertions, 59 deletions

diff --git a/files/fr/web/api/console/log/index.html b/files/fr/web/api/console/log/index.html
index e7fb49d849..c1f9577c6a 100644
--- a/files/fr/web/api/console/log/index.html
+++ b/files/fr/web/api/console/log/index.html
@@ -1,97 +1,64 @@
 ---
 title: console.log()
 slug: Web/API/Console/log
-tags:
-  - API
-  - DOM
-  - Développement
-  - Method
-  - Méthode
-  - Refernece
-  - Web
-  - console
-  - console.dir()
-  - console.log()
 translation_of: Web/API/Console/log
+browser-compat: api.Console.log
 ---
 <div>{{APIRef("Console API")}}</div>
 
-<p>La méthode <strong><code>log()</code></strong> de l'objet {{domxref("Console")}} affiche un message dans la console Web. Le message peut être une simple chaine (avec des valeurs optionnelles de substitution), ou peut être un ou plusieurs objets JavaScript.</p>
+<p>La méthode <strong><code>console.log()</code></strong> affiche un message dans la console Web. Le message peut être une simple chaine de caractères (avec des valeurs optionnelles de substitution) ou peut être composé d'un ou plusieurs objets JavaScript.</p>
 
 <p>{{AvailableInWorkers}}</p>
 
-<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<h2 id="syntax">Syntaxe</h2>
 
-<pre class="syntaxbox notranslate">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+<pre class="brush: js">
+console.log(<var>obj1</var> [, <var>obj2</var>, ..., <var>objN</var>]);
+console.log(<var>msg</var> [, <var>subst1</var>, ..., <var>substN</var>]);
 </pre>
 
-<h3 id="Paramètres">Paramètres</h3>
+<h3 id="parameters">Paramètres</h3>
 
 <dl>
  <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>une liste d'objets Javascript à afficher. Les représentations textuelles de chacun de ces objets seront affichées à la sortie dans l'ordre indiqué. Notez que si vous consignez des objets dans les dernières versions de Chrome et Firefox, ce que vous avez enregistré sur la console est une référence à l'objet, qui n'est pas nécessairement la «valeur» de l'objet au moment où vous appelez la console.log (), mais est la valeur de l'objet au moment où vous cliquez dessus.</dd>
+ <dd>Une liste d'objets Javascript à afficher. Les représentations textuelles de chacun de ces objets seront affichées dans la console du navigateur selon l'ordre indiqué. Attention, pour les versions récentes de Chrome et Firefox, ce qui apparaît dans la console est une <strong>référence à l'objet</strong> et pas nécessairement la valeur de l'objet au moment de l'appel à <code>console.log()</code> mais sa valeur au moment où on ouvre la console.</dd>
  <dt><code>msg</code></dt>
  <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs chaînes de substitution.</dd>
  <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd>Objets Javascript qui remplaceront les chaînes de subsitution éventuellement contenues dans <code>msg</code>. Cela offre plus de contrôle sur le format d'affichage.</dd>
+ <dd>Des objets JavaScript dont les valeurs textuelles remplaceront les emplacements à substituer indiqués dans <code>msg</code>. Cela offre plus de contrôle sur le format d'affichage.</dd>
 </dl>
 
-<p>Voir <a href="/fr/docs/Web/API/Console#Outputting_text_to_the_console" title="DOM/console#Outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p>
+<p>Voir <a href="/fr/docs/Web/API/Console#outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de <a href="/fr/docs/Web/API/Console"><code>console</code></a> pour plus de détails.</p>
 
-<h2 id="Différence_avec_console.dir">Différence avec console.dir()</h2>
+<h2 id="difference_between_log_and_dir">Différence entre console.log() et console.dir()</h2>
 
-<p><span id="result_box" lang="fr"><span>Vous pourriez vous demander quelle est la différence entre {{domxref("</span></span>console.dir()")}} et <code>console.log()</code>.</p>
-
-<p>Une autre différence utile dans Chrome existe lors de l'envoi d'éléments DOM vers la console.</p>
-
-<p><img alt="" src="https://i.imgur.com/DozDcYR.png"></p>
-
-<p>À noter :</p>
+<p>Vous pourriez vous demander quelles sont les différences entre <a href="/fr/docs/Web/API/Console/dir"><code>console.dir()</code></a> et <code>console.log()</code>.</p>
 
+<p>Celles-ci concernent principalement la gestion particulière des objets du DOM :</p>
 <ul>
- <li><code>console.log</code> affiche les éléments dans un arbre de type HTML,</li>
- <li><code>console.dir</code> affiche les éléments dans un arbre de type JSON.</li>
+ <li><code>console.log()</code> affiche les éléments dans un arbre de type HTML,</li>
+ <li><code>console.dir()</code> affiche les propriétés de l'objet JavaScript.</li>
 </ul>
 
-<p><span class="short_text" id="result_box" lang="fr"><span>Plus précisément</span></span>, <code>console.log</code> fait un traitement spécial aux éléments DOM, alors que <code>console.dir</code> n'en fait pas. C'est souvent utile pour voir la représentation complète de l'objet JS DOM.</p>
-
-<p>Il y a plus d'informations dans <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a> sur ceci et d'autres fonctions.</p>
-
-<h2 id="Affichage_dobjets">Affichage d'objets</h2>
+<p><img alt="" src="dozdcyr.png"></p>
 
-<p>Évitez d'utiliser <code>console.log(obj)</code> mais préférez <code>console.log(JSON.parse(JSON.stringify(obj)))</code> afin d'être sûr de voir la valeur de l'objet au moment de l'affichage en console. Autrement, de nombreux navigateurs produisent un affichage interactif de l'objet qui se maintient à jour quand les propriétés de l'objet changent. Cela ne pourrait pas être ce que vous voulez et peut porter à confusion.</p>
 
-<h2 id="Specification" name="Specification">Spécification</h2>
+<h2 id="logging_objects">Affichage d'objets dans la console</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#log", "console.log()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+<p>Évitez d'utiliser <code>console.log(obj)</code> mais préférez <code>console.log(JSON.parse(JSON.stringify(obj)))</code> si vous souhaîtez être sûr·e d'observer la valeur de l'objet au moment de l'exécution de <code>console.log()</code>. Autrement, de nombreux navigateurs produisent un affichage interactif de l'objet qui se maintient à jour quand les propriétés de l'objet changent. Cela ne pourrait pas être ce que vous voulez et peut porter à confusion.</p>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<h2 id="specifications">Spécifications</h2>
 
+<p>{{Specifications}}</p>
 
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
-<p>{{Compat("api.Console.log")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
- <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
- <li><a href="http://getfirebug.com/wiki/index.php/Console_API" title="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug supports additional features in its console.log() implementation, such as <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/" title="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li>
- <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/console-log">Docs Microsoft : Edge - Afficher des messages dans la console</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">La référence de l'API Console pour Chrome</a></li>
+ <li><a href="https://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS : API Console</a></li>
 </ul>