<h1>Usage de la console des navigateurs</h1><p>Observez l'émulateur de la console</p><div id="vider" class="bouton" onclick="vider()">Vider la console</div><div id="vider" class="bouton" onclick="remplir()">Alimenter la console</div><script>/* Affichage dans la console */function remplir() {console.log("Bienvenue dans la console avec console.log(texte)");console.warn("Message de niveau avertissement avec console.warn(texte)");console.error("Message de niveau error avec console.error(texte)");console.group("Affichage groupé et indenté avec console.group(titre)"); console.log("Premier message dans le groupe indenté"); console.log("Encore une ligne"); console.group("Niveau 1.1"); console.log("Profondeur supplémentaire"); console.groupEnd(); console.group("Niveau 1.2"); console.log("Profondeur supplémentaire"); console.groupEnd();console.groupEnd();console.group("Affichage d'objets JavaScript avec console.log(objet)"); console.log(Math.PI); console.log({id: 1558, nom: "Jonquille", rayon: "bulbe"}); console.log(["Gérard", "Jean-Claude", "Patrick", "Eddie", "Michel"]); console.log(document.getElementById("vider")); console.log(navigator);console.groupEnd();console.group("Formatage de tableau"); console.table(["Gérard", "Jean-Claude", "Patrick", "Eddie", "Michel"])console.groupEnd();console.group("Utilisation de console.assert(condition, texte)"); console.assert(2==2*1, "Cette ligne n'est pas affichée"); console.assert(1==0, "Cette ligne est affichée car 1==0 est faux");console.groupEnd();console.group("Mesure du temps avec console.time(timer)"); console.time("boucle"); traitementUnPeuLong(); console.timeEnd("boucle");console.groupEnd();var dt=new Date();console.group("Remplacements avec console.log(txt, remplace1, ... remplaceN)"); console.log("Vous utilisez %s comme navigateur", navigator.appCodeName); console.log("Il est %i:%i sur votre poste", dt.getHours(), dt.getMinutes()); console.log("PI vaut %f (ou disons 3.14)", Math.PI); console.groupEnd();console.group("Mise en forme CSS avec console.log(txt, remplace1, ... remplaceN)"); console.log("Je log() en %cgras et souligné", "font-weight:bold;text-decoration:underline;"); console.log("Je log() en %cvert, italic, 25px", "color:green;font-style:italic;font-size:25px;");console.groupEnd();}/* Effacer le contenu de la console */function vider() { console.clear();}/* Lancement d'un traitement un peu long */function traitementUnPeuLong() { let total=0; for (let i=0; i<1e6; i++) { total+=Math.sin(i); }}remplir();</script><style type="text/css">body { font-family: helvetica;}div.bouton { display:inline-block; background-color: #316AC5; color:#fff; font-weight: bold; border: 2px solid #316AC5; border-radius: 5px; padding:4px; padding-left:10px; padding-right: 10px; margin:4px; cursor: pointer;}div.bouton:hover { background-color: #fff ; color:#316AC5;}</style>