Console Logger capture toute la sortie console (console.log, console.warn, console.error, console.info) et l'affiche dans un panneau flottant directement sur la page. Observez les erreurs JavaScript, les messages de débogage et les avertissements en temps réel sans ouvrir les DevTools du navigateur. Les messages sont colorés par type et incluent des horodatages ainsi que des stack traces pour les erreurs.
Ouvrir les DevTools du navigateur juste pour vérifier la sortie console occupe un espace précieux à l'écran — surtout sur les petits écrans ou lorsque vous devez voir la page entière tout en surveillant les logs. Console Logger offre une alternative légère : un panneau flottant qui affiche toute la sortie console au fil des événements, superposé à la page. Le panneau capture console.log, console.warn, console.error, console.info et les exceptions non interceptées avec leurs stack traces complètes. Les messages sont colorés (erreurs en rouge, avertissements en jaune, informations en bleu, logs en blanc/gris) et incluent des horodatages pour suivre quand les événements se produisent. Des boutons de filtre permettent d'afficher uniquement certains types de messages — afficher seulement les erreurs lors du débogage d'un crash, ou seulement les avertissements pour rechercher des notices de dépréciation. Le panneau est déplaçable, redimensionnable et semi-transparent pour ne pas trop masquer le contenu de la page.
Les messages console apparaissent en temps réel au fur et à mesure qu'ils sont enregistrés. Observez les logs d'initialisation de page, la gestion des réponses API, les événements d'interaction utilisateur et les messages d'erreur — tous diffusés en direct dans le panneau flottant.
Erreurs en rouge, avertissements en ambre/jaune, informations en bleu et logs standard en blanc/gris. Distinguez instantanément une erreur critique d'un message de log courant rien qu'à la couleur.
Les erreurs JavaScript incluent le stack trace complet avec les noms de fichiers, les noms de fonctions et les numéros de ligne. Cliquez sur la référence de fichier pour identifier précisément l'origine de l'erreur sans ouvrir DevTools.
Des boutons de filtre en haut permettent d'afficher ou masquer des types de messages spécifiques : Tous, Erreurs uniquement, Avertissements uniquement, Informations uniquement, Logs uniquement. Le badge de comptage sur chaque filtre indique le nombre de messages de ce type.
Chaque message affiche l'heure à laquelle il a été enregistré (format HH:MM:SS). Suivez la séquence des événements, identifiez les problèmes de performance (temps entre l'appel API et la réponse) et corrèlez les messages avec les actions utilisateur.
Effacez tous les messages pour repartir à zéro, ou continuez à les accumuler au fil de votre interaction avec la page. Le panneau affiche le nombre total de messages et peut être réduit lorsqu'il n'est pas nécessaire.
Besoin de voir la sortie console tout en gardant la page entière visible ? Console Logger vous permet de surveiller les logs sans que le panneau DevTools n'occupe de l'espace à l'écran. Idéal sur les petits écrans ou lors de présentations.
Si votre JavaScript enregistre des réponses API, Console Logger les affiche en temps réel. Consultez les données requête/réponse sans basculer entre la page et DevTools.
Certaines erreurs JavaScript échouent silencieusement — aucun changement visible dans l'interface, mais une erreur dans la console. Console Logger les rend visibles sur la page afin que vous les remarquiez lors de la navigation normale.
Lors d'une démo en direct, gardez le panneau Console Logger visible dans un coin. En cas de problème, vous pouvez immédiatement voir le message d'erreur sans interrompre la démo pour ouvrir DevTools.
Les scripts tiers (analytics, widgets de chat, réseaux publicitaires) génèrent souvent des erreurs ou des avertissements. Console Logger les capture pour vous permettre de surveiller l'état de santé des dépendances externes.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Console Logger. Un panneau flottant apparaît et commence immédiatement à capturer la sortie console.
Utilisez la page normalement — cliquez sur des boutons, naviguez, soumettez des formulaires. Les messages console apparaissent dans le panneau au fur et à mesure qu'ils sont enregistrés par le JavaScript de la page.
Utilisez les boutons de filtre pour n'afficher que les erreurs, les avertissements ou les logs. Les badges de comptage indiquent le nombre de messages pour chaque type.
Pour les messages d'erreur, développez le stack trace pour voir le fichier et le numéro de ligne où l'erreur s'est produite. Utilisez cela pour identifier la source du bug.
Cliquez sur "Effacer" pour réinitialiser le panneau, ou désactivez l'outil pour le fermer. Aucune trace n'est laissée sur la page.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
