← Tous les articles

Fenêtres sur le frontend

JS Console sur n'importe quelle page — REPL avec historique ↑↓, sans DevTools

15 mai 2026 · par JustZix Team

F12 → Console → taper quelque chose → cliquer ailleurs → l'écran se réagence, les DevTools ont disparu. Ou plus souvent : vous ne voulez pas des DevTools ouverts avec un client dans la pièce. JustZix v2.13.66+ a la JS Console — un REPL flottant façon terminal sur la page. Ctrl+Enter, historique ↑/↓, Ctrl+L = effacer, capture tous les console.log depuis le contexte de la page.

En quoi ça diffère de la Console DevTools

Fonctionnellement :

• La JS Console vit sur la page — une fenêtre flottante avec un en-tête et deux sections (log de sortie + textarea d'entrée). Ne disparaît pas au changement de focus, ne se ferme pas au rechargement.
• Persistance par onglet — brouillon d'entrée, log de sortie (jusqu'à 200 lignes), historique des commandes (jusqu'à 100) — tout dans le sessionStorage. Rechargez l'onglet → tout est encore là. Console DevTools — sortie effacée au rechargement.
• Hiérarchie de scope — la Console n'apparaît que sur les pages correspondant au motif d'URL de son dossier/groupe/règle. Configuration différente par projet.
• Sync multi-appareils — vous avez une Console « débogage Stripe » sur votre portable et votre machine de travail. L'historique des commandes ne se synchronise PAS (sessionStorage par onglet), mais la fenêtre elle-même oui.

Ce qui est identique : le contexte de la page. Votre code a accès à window, document, aux globales de la page (p. ex. app.store dans une appli React+Redux). Même moteur d'évaluation, même scope.

Première utilisation en 60 secondes

1. Dans les options JustZix choisissez un dossier/groupe/règle avec un motif d'URL pertinent.
2. Cliquez « Fenêtres » → modale listant les CSS panes + JS panes + JS Consoles. Choisissez « + Console ».
3. Saisissez un nom (« Stripe REPL »), une couleur (violet par défaut #7C3AED).
4. Visitez une URL correspondante — la Console apparaît comme une fenêtre flottante (ancre en haut à droite).
5. Tapez document.title dans l'entrée, appuyez sur Ctrl+Enter. La sortie affiche > document.title (écho de commande) + "Vrai titre de page" (résultat).

Raccourcis clavier

Historique : 100 entrées max, dédup de la dernière commande (pas de répétitions), persisté dans le sessionStorage par onglet. ↑/↓ ne fonctionne que lorsque vous êtes au bord de la textarea — vous permet de naviguer normalement dans du code multiligne.

Capture de console.log/warn/error/info (v2.13.67)

Votre eval peut appeler console.log('x') — il apparaîtra dans la sortie de la Console sous la commande :

> console.log('hello'); 42
[log] hello
  42

D'abord les valeurs loggées, puis le retour. Fonctionne aussi pour console.warn, console.error, console.info — chacun avec son préfixe ([warn], [err], [info]) et sa couleur.

Bonus : si la page elle-même logge quelque chose depuis le contexte de la page pendant votre eval (p. ex. un fetch dans votre code logge une erreur XHR), vous le verrez dans la Console. C'est de l'or pour le débogage — l'analyste voit exactement ce qui se passe sous le capot.

Ce que vous vérifiez vraiment

1. Test fetch rapide avant de l'ajouter à une règle

> fetch('/api/products/12345').then(r => r.json()).then(console.log)
[log] {id: 12345, name: "...", price: 99.99}

Vérifiez que l'endpoint renvoie ce que vous attendez. Sans ouvrir le panneau Network des DevTools.

2. « Qu'y a-t-il dans Redux »

> window.__REDUX_DEVTOOLS_EXTENSION__?.connect?.(); store?.getState?.()
  {user: {...}, cart: {...}, products: [...]}

Dump en un clic de l'état courant, sans installer Redux DevTools.

3. « Combien de h2 sur cette page »

> document.querySelectorAll('h2').length
  47

Vérifications de structure de page, pré-validation de sélecteurs CSS.

4. Override ponctuel

> document.querySelectorAll('.ad').forEach(el => el.remove())
  undefined

Purement destructif, une seule fois. Vous ne voulez pas de règle CSS/JS pour ça — vous voulez l'action une fois. La Console vous donne du JS à coût zéro.

5. Pédagogique

Vous enseignez à un développeur junior ou à quelqu'un sans bagage DevTools. Vous démontrez typeof null, [].map(x => x + 1), Array.from('hello'). Une Console sur la page est moins intimidante que les DevTools.

Hiérarchie de scope — Console « debug GA » seulement sur *shop*

Une JS Console attachée au dossier « E-commerce » apparaît sur chaque page correspondant à shop.com/*. Pas sur YouTube. Pas sur Gmail. Une Console « Stripe Dashboard » sur dashboard.stripe.com/* — inutile ailleurs, donc elle ne s'affiche pas. Chaque projet a son propre REPL.

En plus : hide-for-page (cliquez ✕ sur l'en-tête du pane, ou clic droit → masquer) — la Console disparaît pour l'onglet courant. Recharger l'onglet = restaure (flag sessionStorage réinitialisé).

Pièges

• Eval async — await fetch(...) sans wrapper ne fonctionne pas (pas de top-level await). Enveloppez dans une IIFE : (async () => { const r = await fetch(...); console.log(await r.json()); })(). Ou utilisez .then(...).
• Limite du sessionStorage — les 200 dernières lignes de sortie sont conservées, les plus anciennes coupées (pour que le storage ne grossisse pas sans fin). Historique jusqu'à 100 commandes.
• Recharger l'onglet = ne perd pas la sortie. Fermer l'onglet = la perd. Si vous voulez garder quelque chose — copiez-le dans un fichier externe, ou dans une règle JS permanente.
• Iframes en sandbox — la Console ne s'affiche pas dans le contenu d'une iframe (sauf si l'URL de l'iframe correspond séparément à un motif de scope). Iframe cross-origin = scope distinct.

Et ensuite

La JS Console est le 3e type de « fenêtre sur la page » de JustZix. Le premier (CSS pane) — éditeur CSS en direct. Le deuxième (JS pane) — code JS persistant avec Run-on-demand. Le troisième (Console) — REPL. Le quatrième (Output Console) — logger personnalisé pour le JS utilisateur, prévu.

Installez JustZix et ayez un REPL dans chaque onglet, sans F12.