← Tous les articles

Fenêtres sur le frontend

TEMP panes — fenêtres de dev jetables sous un raccourci Ctrl+Alt

15 mai 2026 · par JustZix Team

Tout changement ne mérite pas une règle permanente. Vous atterrissez sur la page de quelqu'un d'autre, vous avez une question pour le DOM, ou vous voulez glisser un peu de CSS pour une minute — c'est tout. C'est à ça que servent les TEMP panes : des fenêtres invoquées par un raccourci sur n'importe quelle page, utilisées un instant, disparues au rechargement. Zéro config, zéro trace dans vos règles.

En quoi TEMP diffère d'une fenêtre normale

JustZix a quatre types de fenêtres dans la page — CSS pane, JS pane, JS Console et Output Console. Normalement, vous les créez dans le panneau de l'extension et elles appartiennent à une règle : elles s'enregistrent, reviennent après rechargement, se synchronisent entre appareils. Idéal pour ce que vous utilisez quotidiennement.

Un TEMP pane est le même type de fenêtre, mais éphémère. Il ne naît pas d'une règle — il naît d'un raccourci clavier. Il vit dans le sessionStorage de l'onglet, donc :

• Il apparaît instantanément, sur n'importe quelle page, sans règle à créer.
• Il disparaît au rechargement de la page ou à la fermeture de l'onglet.
• Il n'atteint jamais la synchro ni la sauvegarde — il n'encombre pas votre configuration.

Quatre raccourcis

Les raccourcis fonctionnent globalement — pas besoin de cliquer d'abord dans l'extension. Vous l'appuyez sur la page et la fenêtre est là.

Appuyer de nouveau pour fermer — bascule

Le raccourci est une bascule. La première pression crée la fenêtre, la seconde la ferme. Aucun risque d'empiler accidentellement cinq fenêtres TEMP CSS les unes sur les autres — il y a au plus une fenêtre TEMP par type à la fois.

Vous pouvez aussi la fermer avec le × dans l'en-tête de la fenêtre, ou par clic droit sur la barre et « Fermer ». Depuis la v3.2.2, les deux méthodes ne font que masquer la fenêtre — le contenu, le journal et la géométrie attendent dans le sessionStorage jusqu'à ce que vous rouvriez une fenêtre du même type ou que vous fermiez l'onglet. Cela corrige un ancien problème de perte de données sur un clic accidentel sur le ×.

Le bouton « clear » de l'en-tête — vidage contrôlé (v3.2.3)

Quand vous voulez réellement vider une fenêtre TEMP CSS ou TEMP JS, l'en-tête porte un bouton avec une icône de corbeille — « clear » — juste à côté du bouton ×. Le vidage entre dans l'historique undo (Ctrl+Z le ramène) et, pour la TEMP CSS, il met à jour immédiatement le <style> en direct sur la page. Cela sépare deux intentions : masquer la fenêtre (×) et vider son contenu (corbeille).

Disparue au rechargement — et c'est tout l'intérêt

Ce n'est pas une limitation, c'est toute l'idée. Un TEMP pane existe pour que vous puissiez vérifier quelque chose vite et ne laisser aucun désordre. Vous avez ouvert la page d'un client, appuyé sur Ctrl+Alt+J, vérifié document.querySelectorAll('.price').length, appuyé sur F5 — et la page est de nouveau propre, comme si vous n'aviez jamais été là.

Si vous vous surprenez à taper le même code TEMP pour la troisième fois — c'est le signal d'en faire une règle permanente.

Une couleur différente — vous ne la confondrez pas avec une fenêtre enregistrée

Les fenêtres persistantes sont colorées par type (vert, ambre, violet, émeraude). Les fenêtres TEMP reçoivent une palette distincte — orange, rouge, rose, cyan — sur toute la bordure de la fenêtre, l'accent de l'en-tête et le point de statut. Un coup d'œil et vous savez que c'est une fenêtre éphémère, pas votre configuration enregistrée.

Cas d'usage 1 — déboguer la page d'autrui sans laisser de trace

Un classique. Vous tombez sur une page qui se comporte bizarrement. Ctrl+Alt+K ouvre l'Output Console — vous voyez ce que la page journalise et quelles erreurs elle lance. Ctrl+Alt+J ouvre une JS Console pour interroger le DOM. Fini — rechargez, disparu.

Cas d'usage 2 — un CSS ponctuel sans encombrer vos règles

Vous voulez tuer un en-tête sticky pendant cinq minutes parce qu'il couvre ce que vous lisez. Ctrl+Alt+G, tapez header{position:static!important}, lisez tranquillement, fermez. Aucune règle n'a été créée que vous auriez à nettoyer plus tard.

Cas d'usage 3 — un REPL en production

Vous voulez vérifier le comportement de l'API sur une page en direct. Ctrl+Alt+H ouvre un TEMP JS pane — collez fetch('/api/...').then(r=>r.json()).then(console.log), exécutez avec le bouton Run, le résultat atterrit dans la console. Après rechargement, le code a disparu — il ne reste dans aucune règle que quelqu'un pourrait déclencher par accident plus tard.

Pourquoi G/H/J/K précisément

Ce sont des touches adjacentes de la main droite, style cluster Vim — confortables sous les doigts. Ctrl+Alt+H/J/K/L serait plus naturel, mais Ctrl+Alt+L sous Linux (GNOME) verrouille l'écran — l'OS capte le raccourci avant que l'extension ne le voie. On a donc décalé tout le cluster d'une touche vers la gauche. G/H/J/K sont libres sur tous les navigateurs et systèmes courants.

Pièges

• Le rechargement vide la fenêtre. Par conception — si vous avez besoin de persistance, faites une règle.
• Une fenêtre par type. Besoin de deux consoles à la fois ? Faites la seconde en pane persistant.
• Par onglet. Un TEMP pane vit uniquement dans l'onglet où vous l'avez ouvert — un autre onglet de la même page ne l'a pas.

À voir aussi

• TEMP vs fenêtre persistante — un modèle de décision
• Mini-IDE dans un onglet de navigateur — un aperçu de toutes les fenêtres
• Output Console — observer les logs de la page

Installez JustZix — et gardez quatre fenêtres de dev à un raccourci de distance sur chaque page.