<aside> 💡

</aside>

Sommaire :

console.log('handleAddTechno', techno) // handleAddTechno, VueJS

Même chose en condensé :

console.log({firstNumber}) // { firstNumber: 78 } On peut même condenser plusieurs variables :

console.log({ firstNumber, secondNumber }) // { firstNumber: 27, secondNumber: 54 }

Pour afficher le contenu des variables en JavaScript, on utilise la méthode console.log en passant autant de variables qu’on veut en paramètres : console.log(premiere_variable, deuxieme_variable, ...). Exemple : console.log("Joyeux anniversaire %s, vous avez %d ans.", "Alice", 42) // Joyeux anniversaire Alice, vous avez 42 ans.

(Testé et vérifié : ça marche !)

Ajouter des emojis dans son code

🍎 Pomme Rouge Emoji

Comment écrire avec la syntaxe Discord ?

Untitled

https://youtu.be/wfBKCdxYUKE

1- alert, prompt, confirm

alert() permet d’afficher des messages dans une popup

prompt()affiche un message demandant à l'utilisateur de saisir du texte. Il renvoie le texte ou, si le bouton Annuler ou Esc est cliqué, null.

confirm()affiche un message et attend que l'utilisateur appuie sur "OK" ou "Annuler". Il renvoie true pour OK et false pour Cancel/Esc.

Interaction: alert, prompt, confirm

2- Différents types de console

console.warn() affiche un message d’avertissement

console.error() affiche un message d’erreur

console.clear() vide la console

console.log() permet d’afficher des messages dans la console

console.table() affiche les index et les valeurs d’un array dans un tableau Marche aussi avec les propriétés (clés et valeurs) des objets, mais pas leurs méthodes
console.count() affiche le nombre de fois que la ligne a été appelée
console.dir() Pour rendre une arborescence

console.group() démarre un nouveau groupe de log

console.groupCollapsed() pour que l’indentation soit fermée par défaut

console.groupEnd() termine le groupe d’indentation

console.time() démarre un chronomètre

console.timeEnd() arrête un chronomètre

etc…

Comment utiliser console.log en JavaScript ?

Console - Référence Web API | MDN

3- Mettre du style dans la console

Liste des spécificateurs de format CSS et de leurs sorties respectives.

| --- | --- |

console.log('%cUn style personnalisé', 'color: blue; background: green;')
console.log('Hello %cWorld %cKyle', 'color: blue;',' background: green;')
console.log("%cJ'ai mangé une pomme 🍎", "color : white; background-color : rgb(25,25,50); 
padding : 24px; font-weight : bold; font-size : 3em;")

Ce CSS ne sera pas repris si le JS est lancé dans le terminal, mais le programme s’exécute bien par ailleurs

You Can Use CSS To Style console.log!

taper debugger; pour poser un breakpoint = une pause dans l’exécution du code. Utile pour aller voir au cœur d’une fonction

Apprendre le JavaScript : pourquoi (et comment) éviter console.log

4- L’extension pour VSCode Console Ninja

(Introuvable dans VS Codium et le .vsix ne fonctionne pas)

Donne les décomptes dans la ligne correspondante, et des détails en passant la souris dessus

Untitled

Met les messages d’erreur dans la ligne correspondante, et des détails en passant la souris dessus

Untitled

Dans une zone à part sans avoir de navigateur ouvert :

Untitled

5- L’extension pour VSCode Quokka.js

(Introuvable dans VS Codium, mais le .vsix fonctionne)

Permet de voir le résultat des console.log directement dans le code à chaque CTRL S

Pour lancer Quokka.js, lancer l’invite de commande CTRL MAJ P et y taper / sélectionner Quokka.js: Start on Current File

Untitled

Ne marche pas avec console.table (mais montre quand même le tableau dans l’onglet ‘Sortie’ du terminal) - (Console Ninja ne montre rien)

Untitled

Ne montre pas le CSS (mais Console Ninja non plus)

Untitled

Comparaison avec node flie.js

Untitled

L’extension marche aussi avec VSCodium :

Untitled