L'Output Console repensée : 6 onglets, sans DevTools

16 mai 2026 · par JustZix Team

Ouvrir les DevTools juste pour lire un log est un changement de contexte que vous faites cent fois par jour sans même y penser. L'Output Console repensée supprime entièrement ce changement : un visualiseur de logs en lecture seule qui vit à l'intérieur de la page, avec six onglets couvrant la sortie console, le trafic réseau, les erreurs non capturées et le dataLayer GTM. Pas de F12. Plus d'excuse de machine verrouillée. Voici la présentation complète.

Ce qu'est réellement l'Output Console

L'Output Console est l'une des fenêtres développeur de JustZix intégrées à l'onglet — un « pane » rendu directement dans le DOM de la page par l'extension. Elle est en lecture seule : vous n'y tapez rien. Contrairement à la JS Console (un REPL où vous exécutez du code), les logs affluent dans l'Output Console tout seuls. Vous l'ouvrez, et elle se remplit.

Il y a deux façons de l'ouvrir :

Depuis le menu du bouton flottant de JustZix — une fenêtre persistante liée à la règle.
Avec le raccourci clavier Ctrl+Alt+K — une fenêtre TEMP que vous invoquez sur le moment et que vous fermez une fois terminé.

C'est une fenêtre comme n'importe quel autre pane JustZix : déplacez-la, redimensionnez-la, écartez-la du chemin. Elle ne bloque pas la page en dessous.

Pourquoi une fenêtre de logs dans l'onglet vaut mieux que les DevTools

Les DevTools sont excellents. Ils ne sont pas non plus toujours disponibles, ni toujours pratiques. Des raisons concrètes pour lesquelles la console dans l'onglet l'emporte :

Machines verrouillées. Politique d'entreprise, mode kiosque, un profil Chrome géré — de nombreux environnements désactivent ou masquent les DevTools. L'Output Console fait simplement partie de la page ; rien à déverrouiller.
Pas de changement de contexte. Le log se trouve à côté du contenu que vous déboguez, dans la même fenêtre d'affichage. Vous ne divisez pas votre écran et ne couvrez pas la moitié de la page avec un panneau ancré.
Elle survit à une configuration minimale. Pas de source maps, pas d'extensions qu'un collègue a oublié d'installer, pas de rituel « ouvrir les DevTools, basculer sur le bon onglet, effacer le filtre ». C'est un seul clic.
Elle est livrée avec une règle. Un paquet de règles JustZix est partageable. Donnez à un collègue une règle qui ouvre l'Output Console sur un motif d'URL précis, et il obtient la même surface de débogage que vous — zéro configuration de son côté.

Ce n'est pas un remplacement des DevTools pour le travail en profondeur. C'est le bon outil quand vous voulez voir ce qu'une page est en train de faire sans cérémonie.

Six onglets, chacun avec un badge de comptage en direct

La fenêtre est organisée en six onglets. Chaque onglet porte un badge indiquant le nombre d'entrées qu'il contient actuellement, mis à jour en direct au fur et à mesure que la page s'exécute :

Onglet	Ce qu'il affiche
All	Chaque entrée de chaque source, par ordre chronologique.
JZconsole	Uniquement la sortie de votre propre logger `window.JUSTZIX.*`.
Console	Uniquement les `console.log/info/warn/error/debug` standards de la page.
Network	Les requêtes réseau de la page, capturées via `chrome.webRequest`.
Errors	Les exceptions non capturées et les rejets de promesses non gérés, chacun dépliable.
DataLayer	Les pushes de `window.dataLayer` (GTM) plus une vue en direct de l'objet.

La séparation entre JZconsole et Console est délibérée. Votre propre logging de débogage ne devrait pas se noyer dans le bruit de la page, et le bruit de la page ne devrait pas noyer votre logging. Gardez-les séparés, ou lisez-les fusionnés sous All.

La barre de filtres contextuelle

Entre les onglets et la zone de recherche se trouve une barre de filtres qui change selon l'onglet actif. Il n'y a pas de filtre global unique — chaque type de données reçoit les contrôles qui lui conviennent :

All — pas de filtres supplémentaires. C'est le flot complet.
JZconsole / Console — des cases à cocher de niveau : log, info, warn, error, debug. Décochez un niveau et ces lignes disparaissent. Vous ne voulez que les erreurs et les avertissements ? Décochez les trois autres.
Network — trois rangées de contrôles (type de ressource, classe de statut HTTP, curseurs de taille/durée plus un filtre de domaine). Le plongée approfondie sur l'onglet Network les couvre en détail.
Errors — pas de cases à cocher ; à la place, chaque erreur se déplie pour révéler sa pile et ses détails.
DataLayer — la fenêtre se divise en deux colonnes (plus de détails ci-dessous).

Comme la barre est contextuelle, vous ne faites jamais défiler des contrôles inutiles. L'onglet Console ne vous montre pas de filtre de domaine ; l'onglet Network ne vous montre pas de cases à cocher de niveau de log.

La zone de recherche

Sous la barre de filtres, toujours visible, se trouve une zone de recherche. C'est un filtre de sous-chaîne en direct, insensible à la casse sur les entrées de l'onglet actif. Tapez checkout et la liste se restreint au fur et à mesure que vous tapez. Appuyez sur Échap pour l'effacer instantanément.

La recherche et les filtres contextuels se cumulent. Sur l'onglet Network, vous pouvez tout décocher sauf le statut 4xx/5xx, puis taper un fragment de chemin dans la zone de recherche pour cibler un point de terminaison défaillant.

Logs de console repliables

Les appels console.* du monde réel enregistrent des objets, des tableaux, de grosses charges utiles. Affichés bruts, vingt de ces lignes rendent l'onglet illisible. Donc les entrées console.* sont repliées par défaut — chacune affiche une courte ligne d'aperçu, quelque chose comme :

[Checkout][14:22:07] EVENT: {…}

Cliquez sur la ligne et elle se déplie en une arborescence JSON complète de chaque argument, à la manière des DevTools — explorez les objets imbriqués, dépliez les tableaux, lisez toute la charge utile. Repliez-la à nouveau une fois terminé. Vous obtenez une liste parcourable et tout le détail à la demande, pas l'un ou l'autre.

L'onglet Errors

L'onglet Errors collecte ce qui a réellement cassé : les exceptions non capturées et les rejets de promesses non gérés. Chaque entrée se déplie pour montrer la trace de pile et les détails, vous pouvez ainsi passer de « quelque chose a échoué » à « cette ligne dans ce fichier » sans quitter la page.

Une mise en garde honnête qu'il vaut mieux connaître d'emblée : un fetch ou XHR échoué — une API renvoyant 404 ou 500 — n'est pas une exception JavaScript. Il n'apparaîtra pas dans l'onglet Errors. Pour ceux-là, vous allez sur l'onglet Network et filtrez par statut 4xx/5xx. L'onglet Errors est pour le code qui a levé une exception, pas pour les requêtes qui ont échoué.

L'onglet DataLayer

Si la page utilise Google Tag Manager, l'onglet DataLayer est le moyen le plus rapide de voir ce que GTM reçoit. La fenêtre se divise en deux colonnes :

Gauche — « Nouveaux pushes » : le flux des appels dataLayer.push(...) dans l'ordre des événements. Chaque push que fait la page apparaît ici au moment où il se produit.
Droite — « État actuel » : l'objet window.dataLayer en direct sous forme d'arborescence JSON dépliable indexée (0:, 1:, …). L'instantané se rafraîchit après chaque push, et l'en-tête de colonne dispose de boutons tout déplier / tout replier.

Vous voyez à la fois les événements au moment où ils se déclenchent et l'état accumulé en même temps — pas besoin de deviner si un push a abouti, pas besoin d'ouvrir une extension de débogage de balises.

Le logger window.JUSTZIX

L'Output Console n'est pas qu'un visualiseur passif — elle est livrée avec une API de logging pour votre propre code. Tout ce que vous écrivez dans le pane JS, dans une action de règle ou dans le code de la page peut logger directement dans l'onglet JZconsole :

JUSTZIX.log('cart loaded', cart);
JUSTZIX.info('user is logged in');
JUSTZIX.warn('coupon field empty');
JUSTZIX.error('checkout API failed', err);
JUSTZIX.debug('raw payload', payload);

Les cinq méthodes correspondent aux cinq niveaux que contrôlent les cases à cocher du filtre JZconsole. Des alias gardent le tout pratique et sûr :

window.__JUSTZIX__ — toujours disponible.
window.JZ — disponible uniquement si la page ne possède pas déjà window.JZ, ainsi JustZix n'écrase jamais la variable globale propre à un site.

Comme vos logs atterrissent dans leur propre onglet, ils restent lisibles peu importe à quel point la console native de la page est bavarde.

Une première session pratique

Appuyez sur Ctrl+Alt+K sur la page que vous voulez inspecter — l'Output Console s'ouvre en fenêtre TEMP.
Commencez sur All pour avoir une vue d'ensemble, puis passez à l'onglet qui compte.
Vous déboguez votre propre règle ? Parsemez des appels JUSTZIX.log(...) et observez JZconsole.
La page se comporte mal ? Vérifiez Errors pour le code qui a levé une exception, Network pour les requêtes échouées.
Vous auditez l'analytique ? Ouvrez DataLayer et déclenchez le parcours utilisateur.
Affinez n'importe quoi avec les cases à cocher de niveau et la zone de recherche ; Échap efface la recherche.

À voir aussi

L'Output Console repensée transforme « ouvrir les DevTools et fouiller » en « jeter un œil à l'onglet à côté de la page ». Téléchargez JustZix — c'est gratuit, ça fonctionne sur Chrome 100+, et l'installation prend environ deux minutes.

Notez cet article

Aucune note — soyez le premier.