← Tous les articles

Fenêtres sur le frontend

Output Console : observer le console.log de la page dans un panneau d'onglet — sans DevTools

15 mai 2026 · par JustZix Team

La console des DevTools fonctionne très bien — quand elle est ouverte. La plupart du temps, elle ne l'est pas. Et pire : la console des DevTools affiche les logs de chaque page que vous utilisez actuellement. Difficile de repêcher « mes logs de ce flux précis » dans l'avalanche de bruit. L'Output Console (depuis v2.13.66) est un visualiseur de logs en lecture seule dans l'onglet lui-même — vous voyez les logs de cet onglet, limités à ce domaine, toujours disponibles comme les autres panneaux JustZix.

Quatre types de fenêtres — où s'insère l'Output Console

Les trois premiers types font quelque chose à la page. L'Output Console écoute. Chaque appel console.log/warn/error/info/debug de la page (et d'autres scripts JustZix) arrive comme une ligne colorée. En plus — un canal window.JUSTZIX.log() dédié (depuis v2.13.73 ; alias principal depuis v2.13.76, au nom de marque avec un risque de collision infime) qui n'est PAS redirigé vers la console native, seulement vers l'Output Console — vos scripts peuvent logger sans polluer les DevTools.

Architecture — hook de page + diffusion vers les sinks

L'Output Console fonctionne en deux étapes :

1. Hook de page (MAIN world) — Injecté via chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) (immunisé contre la CSP depuis v2.13.74). Enveloppe console.log/warn/error/info/debug en conservant le passthrough vers l'original (les DevTools ne perdent rien), mais chaque appel poste aussi window.postMessage({source:'jz-output-console', kind:'console', level, text, t}).
2. Diffusion vers les sinks (ISOLATED world) — Le content script de JustZix écoute window.message et diffuse les entrées vers tous les panneaux Output Console actuellement rendus via la Map _outputConsoleSinks. Chaque panneau ajoute sa ligne à son propre log (état par instance).

En plus stringifyArg — un transformateur d'arguments conscient des types :

• string/number/bool → littéral
• Error → .stack (trace de pile complète, pas seulement le message)
• objet → JSON.stringify avec une protection contre les cycles (WeakSet, pour que JSON.stringify(window) ne bloque pas)
• fonction → sentinelle [Function: name]
• undefined → littéral undefined (ne disparaît pas dans JSON.stringify)

viewMode : [C+J] / [C] / [J] — deux canaux, un panneau

Depuis v2.13.73, l'Output Console a un bouton viewMode cyclique dans l'en-tête. Trois états :

Implémentation : zéro overhead JS par ligne. Chaque entrée reçoit une classe jz-output-line-{kind}, et le mode ajoute une classe jz-output-mode-{mode} sur le pane. Les règles CSS de masquage font le reste :

.jz-output-mode-standard .jz-output-line-jz { display: none; }
.jz-output-mode-jz       .jz-output-line-console { display: none; }
/* .jz-output-mode-both affiche tout */

Filtres par niveau + recherche — fonctionnalités power-user

Sous le bouton ⚙ s'ouvre un popover avec 5 cases : log / info / warn / error / debug. Toutes cochées par défaut sauf debug (par défaut désactivé — les pages abusent de console.debug pour du spam). Même mécanisme que le viewMode — classe jz-output-hide-{level} + règle CSS, zéro overhead JS.

En plus un toggle de recherche 🔍 au-dessus du log. Filtre en direct par sous-chaîne, insensible à la casse. Échap efface. Persisté dans sessionStorage par onglet — filtres/recherche survivent au rechargement.

// Tapez dans la JS Console :
for (let i = 0; i < 5; i++) console.log(`Action de l'utilisateur ${i}`);
for (let i = 0; i < 5; i++) console.warn(`Avertissement utilisateur ${i}`);
JUSTZIX.log('Log de mon script');

// L'Output Console affichera 11 lignes.
// Basculer [J] → seulement 1 (JUSTZIX.log).
// Basculer [C] + filtre « warn » uniquement → 5 (console.warn).
// Recherche « utilisateur 3 » → attrape « Action de l'utilisateur 3 » + « Avertissement utilisateur 3 ».

Cas d'usage 1 — surveiller dataLayer.push (debug GTM)

Problème GTM classique : vous voulez savoir ce que chaque tag envoie au dataLayer. Console des DevTools = se frayer un chemin à travers des dizaines d'autres logs. Output Console :

// Règle JS (s'exécute automatiquement sur le site) :
const origPush = window.dataLayer.push;
window.dataLayer.push = function(event) {
  JUSTZIX.log('[dataLayer]', JSON.stringify(event));
  return origPush.call(this, event);
};
JUSTZIX.log('Hook dataLayer installé.');

L'Output Console en mode [J] affiche seulement vos lignes JUSTZIX.log — chaque tag GTM = une ligne colorée. Filtre « purchase » → seulement l'e-commerce. Filtre « ga4 » → seulement les events GA. Pas de F12, pas de Tag Assistant, pas de panneau Network.

Cas d'usage 2 — surveillance d'un flux QA long

Un testeur QA journalise un flux de 30 minutes. La console des DevTools se remplit après 5 minutes (maximum par défaut ~1000 lignes). Output Console :

• maxLines 2000 (depuis v2.13.73, c'était 500) — assez pour une longue session.
• sessionStorage par onglet — un rechargement ne vide pas le log (seule la fermeture de l'onglet le fait).
• Toggle d'auto-scroll dans l'en-tête — désactivez-le pour vous arrêter sur une ligne précise ; le défilement arrière ne saute pas en bas à chaque nouveau log.
• Bouton Clear avec runColor personnalisable (depuis v2.13.71) — videz le log avant la prochaine étape QA.

Cas d'usage 3 — suivi des erreurs asynchrones

L'overlay d'erreur du JS pane (barre rouge) n'attrape PAS les erreurs asynchrones — setTimeout(() => { throw err }, 100) n'apparaît pas dans le pane. L'Output Console les attrape BIEN — parce que console.error est aussi invoqué par le gestionnaire d'erreurs global :

// Règle JS :
window.addEventListener('error', (e) => {
  JUSTZIX.error('[unhandled]', e.message, '@', e.filename + ':' + e.lineno);
});
window.addEventListener('unhandledrejection', (e) => {
  JUSTZIX.error('[promise reject]', e.reason);
});

L'Output Console en mode [J] + filtre « error uniquement » — chaque erreur globale dans une liste lisible. Pratique quand une SPA journalise 50 erreurs par minute et que vous ne voulez que les vôtres.

Cas d'usage 4 — moniteur de réponses API

Une page a des fetches qui n'apparaissent pas dans la vue (sync en arrière-plan). Vérifiez ce que le serveur répond :

// Règle JS — proxy de fetch :
const origFetch = window.fetch;
window.fetch = async function(...args) {
  const res = await origFetch.apply(this, args);
  const clone = res.clone();
  clone.json().then(data => {
    JUSTZIX.log('[fetch]', args[0], '→', JSON.stringify(data).slice(0, 200));
  }).catch(() => {});
  return res;
};

L'Output Console affiche l'URL + les 200 premiers caractères de la réponse JSON. Recherche par URL → voir un seul endpoint. Génial pour déboguer des fetches instables sans le panneau Network de F12.

Pages à CSP stricte — pourquoi le script inline échouait (correctif v2.13.74)

Jusqu'à v2.13.73, le hook de page était injecté comme un élément <script> avec textContent. Fonctionnait sur ~99 % des pages — mais une CSP stricte (script-src 'self' sans 'unsafe-inline', p. ex. GitHub, le checkout Stripe, les banques) bloquait l'exécution en silence. appendChild réussissait (mutation DOM OK), mais le script ne s'exécutait pas, aucune erreur lancée.

Symptôme : window.JUSTZIX.log is not a function + console.log n'apparaît pas dans l'Output Console. Correctif (v2.13.74) : le hook a migré vers chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) — les privilèges de l'extension l'emportent sur la CSP de la page. Après la première installation, l'Output Console reçoit un message de bienvenue (depuis v2.13.76 il liste les alias actifs) : [JustZix] Output Console hook ready. API: window.JUSTZIX (or JZ / __JUSTZIX__).log/.warn/.error/.info/.debug.

Pièges

• Lecture seule. Vous ne pouvez pas taper 2+2 ici et obtenir 4. C'est une vue de flux, pas un REPL. Pour un REPL, utilisez la JS Console.
• console.debug est DÉSACTIVÉ par défaut dans les filtres. La première fois, vous ne verrez pas les logs debug — c'est intentionnel (le spam de debug est un gouffre de productivité). Activez-le dans le popover ⚙ si vous en avez besoin.
• Le hook de page doit arriver tôt. Le hook s'injecte au premier rendu d'un panneau Output Console. Les logs avant ce moment sont perdus. Bonne pratique : panneau attaché à une règle parente avec un match d'URL — alors le hook s'installe dès le chargement de la page.
• Le logger fonctionne toujours, même quand la page occupe window.JZ. Depuis v2.13.76, l'alias principal est window.JUSTZIX (nom de marque, risque de collision infime) plus window.__JUSTZIX__ toujours défini. Le plus court window.JZ est un alias UNIQUEMENT quand il est libre — en cas de conflit avec la page (p. ex. Google Ads), il reste à la page. Utilisez JUSTZIX.log() quand vous n'êtes pas sûr du domaine.
• Plafond de 2000 lignes. Flux plus long → les anciennes lignes sont évincées (FIFO). Sauvegardez le log dans un fichier via le bouton Clear (export JSON prévu pour v2.13.75 ; pour l'instant copier-coller depuis le DOM).

La suite

L'Output Console clôt le mini-IDE dans l'onglet — un canal en lecture seule à côté des trois canaux d'écriture (CSS pane / JS pane / JS Console). Ensemble, c'est une « alternative à Chrome DevTools pour 80 % des cas » — pas de F12, limité par domaine, avec une UI personnalisable. Voyez aussi window.JZ helpers pour le canal de logging dédié et déboguer GTM dataLayer.push comme application concrète.

Installez JustZix — entièrement gratuit, sans compte, sans serveur.