Script console : Exemple complet de la console

<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>