Un mini-IDE dans un onglet de navigateur : 8 outils JustZix qui remplacent les DevTools
JustZix a commencé comme une extension d'injection de CSS — mais durant l'année écoulée, elle a grandi en quelque chose de bien plus grand. Aujourd'hui c'est un mini-IDE dans chaque onglet de navigateur — 4 types de fenêtres (panes), 6 types d'actions, 2 namespaces d'API JS, et un système de snap connections pour les disposer tous en un dashboard cohérent par domaine. Pas de F12. Pas de DevTools. Tout dans l'onglet lui-même. Cet article cartographie l'ensemble — quoi utiliser quand, comment ça s'imbrique, par où commencer.
La carte : 4 + 6 + 2 + 1
JustZix se divise en quatre composants principaux que vous pouvez utiliser ensemble ou séparément :
| Composant | Ce qu'il fait | Nombre de types |
|---|---|---|
| Règles CSS/JS | Injecte <style> / <script> au match d'URL — auto-run | 2 (CSS, JS) |
| Actions de barre | Boutons dans une barre flottante — invocation manuelle | 6 (BUTTON, SELECT, INPUT, TEXTAREA, SLIDER, TOGGLE3) |
| Fenêtres du frontend | Panneaux flottants avec leur propre logique par pane | 4 (CSS pane, JS pane, JS Console, Output Console) |
| Helpers JS | Accès programmatique — namespaces du MAIN world | 2 (window.JZ, window.JUSTZIX) |
En plus les snap connections comme « colle » — permettent de disposer les panneaux et la barre d'actions en groupes qui bougent ensemble.
Fenêtres du frontend — 4 types
1. CSS pane — éditeur CSS en direct dans l'onglet
Vous ouvrez un panneau à côté de la page, écrivez du CSS, voyez les changements en direct. Auto-save dans l'onglet. Persistant par onglet via sessionStorage. Aucun commit nulle part, meurt avec l'onglet. Parfait pour « j'ai besoin de voir à quoi ressembleraient les boutons dans une autre couleur, mais je ne le déploie pas encore ».
→ CSS pane : un éditeur CSS en direct sur n'importe quelle page, sans DevTools
2. JS Console — REPL avec historique ↑↓
L'alternative REPL aux DevTools. Eval Ctrl+Enter. Les flèches haut/bas font défiler l'historique (sessionStorage par onglet). La sortie ne capture que le sync — les tâches async atterrissent direct dans les DevTools. Parfait pour les vérifications ad-hoc (« combien d'éléments ont la classe X ? », « que renvoie cette API ? »).
→ JS Console : REPL sur n'importe quelle page, sans DevTools
3. JS pane — scripts Run-on-demand
Code JS persistant avec un bouton ▶. Ctrl+Enter lance. État dirty (indice visuel que vous avez des changements non exécutés). Overlay d'erreur (barre rouge dans le pane sans F12). Parfait pour les scripts destructeurs (« vider le panier », « supprimer le brouillon », « réinitialiser le formulaire ») — vous ne voulez pas qu'ils s'auto-exécutent, vous voulez cliquer ▶ à la demande.
→ JS pane : scripts Run-on-demand, pas d'auto-run à chaque visite
4. Output Console — visualiseur de logs en lecture seule
Le 4e type de fenêtre — écouter, pas écrire. Capture tous les console.log/warn/error/info/debug de la page (sync + async) plus le canal window.JUSTZIX.log() dédié. viewMode [C/J/C+J] bascule la visibilité. Filtres par niveau, champ de recherche. 2000 lignes. Immunisé contre la CSP (privilèges d'extension).
→ Output Console : observer le console.log de la page dans un panneau d'onglet
Types d'actions — 6 dans la barre d'actions
La barre d'actions est une barre flottante de boutons que vous invoquez manuellement. Six types d'actions — tous vivant dans la même barre, chacun avec sa propre sémantique :
| Type | UX | Mémoire de l'état actif |
|---|---|---|
| BUTTON | Clic unique → exécuter le code | Aucune — fire-and-forget |
| SELECT static | Dropdown de 2-N options | Oui (dataset) |
| SELECT js | Dropdown avec options générées par JS | Oui (<select> natif) |
| INPUT | Champ texte une ligne + Entrée→run | Oui (par onglet) |
| TEXTAREA | Texte multi-lignes + blur→run | Oui (par onglet) |
| TOGGLE3 | Segmented control à 3 états | Oui (idx 0/1/2) |
| SLIDER | Slider de plage (events input + change) | Oui (Number) |
TOGGLE3 — segmented control à 3 états
Segmented control avec exactement 3 états. Chaque état reçoit son propre label, value, couleur et code JS. Meilleur cas d'usage : commutateur d'environnement Dev/Staging/Prod (chaque état = sous-domaine différent), override de thème Light/Dark/Auto, feature flag tri-état Off/Default/Force-on. 5 couleurs configurables (bg/texte actif + bg/hover/texte inactif).
→ TOGGLE3 : segmented control à 3 états dans la barre d'actions
SLIDER — un contrôleur de variables CSS au bout des doigts
<input type="range"> natif dans la barre. Drag en direct = sauvegarde la mémoire (sans exécuter le code), relâchement = exécute le code avec value en tant que Number. 4 couleurs séparées (bg, remplissage, texte du label, texte de la value). Cas d'usage : contrôleur de luminosité (filter:brightness 50-150%), taille de police pour l'accessibilité, throttle de la vitesse d'animation pour le debug, n'importe quelle variable CSS que vous voulez tourner comme un fader physique.
→ SLIDER : un contrôleur de variables CSS dans l'onglet
API — deux namespaces, deux rôles
JustZix installe deux namespaces séparés dans le MAIN world. Chacun a son propre but et son cycle de vie — ils ne se mélangent volontairement pas :
window.JUSTZIX(logger) — alias principal depuis v2.13.76. Nom de marque = risque de collision infime avec les scripts de page.JUSTZIX.log/.warn/.error/.info/.debugdispatche vers l'Output Console (kind='jz') ; ne redirige PAS vers la console native. Alias :window.__JUSTZIX__(toujours),window.JZ(seulement quand libre).window.JZ(helpers d'action) — opère sur les élémentsdata-jz-action-iddu DOM.JZ.click(label)/JZ.value(label)/JZ.setValue(label, v)/JZ.action(label). Peut être occupé par la page (Google Ads a son propre window.JZ) → fallback :document.querySelector('[data-jz-action-id="..."]')natif.
→ window.JZ + window.JUSTZIX : API programmatique + logger
Snap connections — disposer en dashboard
Six types d'éléments (4 types de panes + barre d'actions + bouton flottant) vivent dans un espace d'ID partagé. Glissez l'un à ≤20px d'un autre → ils s'aimantent en un groupe. Glissez le groupe → tout bouge ensemble. Le positionnement par anchor (TL/TR/BL/BR) garde la disposition stable lors des redimensionnements de fenêtre. Ça transforme « quelques outils séparés » en « un dashboard configurable par domaine ».
→ Snap connections : groupes de panneaux — un mini-dashboard dans l'onglet
Comment l'assembler — 3 setups pratiques
Setup A : « toolbar QA personnelle »
Haut-droit, anchor TR :
- Barre d'actions : 3-4 BUTTONs pour les flux les plus courants (« Login as test user », « Fill demo data », « Reset cart »)
- JS pane sous la barre : scripts destructeurs / opérations en masse (Run-on-demand, ▶)
- Output Console sous le JS pane : surveiller JUSTZIX.log + la console de la page
- Tout aimanté verticalement. F5 → revient aux mêmes endroits.
Setup B : « éditeur CSS en direct »
Côté gauche, anchor TL :
- CSS pane (étroit, haut) : édition en direct
- Barre d'actions avec un SLIDER « Brightness » + un TOGGLE3 « Theme »
- Snap bord à bord — slider + éditeur CSS dans un seul flux
Setup C : « overlay de debug »
Barre du bas, anchor BL :
- Barre d'actions avec un BUTTON « Capture state » + un TOGGLE3 « Env DEV/STG/PROD »
- Output Console étroite au-dessus de la barre (hauteur ~200px) : logs en streaming non-stop
- Ressemble à un panneau DevTools du navigateur, mais fait partie de l'onglet (ne disparaît pas quand vous minimisez F12)
La première minute — quoi faire juste après l'installation
- Installez JustZix (Téléchargez ici). Cliquez sur l'icône dans la barre d'outils après l'installation.
- Créez votre première règle dans les options (extensions → options JustZix). Choisissez « partout » comme scope.
- Dans l'éditeur CSS tapez :
body { background: lightyellow !important; }— sauvegardez. Visitez n'importe quel site → le fond devient jaune. - Ajoutez une action BUTTON à cette règle : label « 🐛 Debug », code
JUSTZIX.log('debug'); - Ajoutez une Output Console dans la section « Fenêtres » → sauvegardez. Retournez sur la page. Clic « 🐛 Debug » → une ligne dans l'Output Console.
- Glissez l'Output Console sous la barre d'actions, laissez-la s'aimanter. Vous avez votre premier mini-dashboard.
3 minutes de zéro à un setup fonctionnel. Tout persistant — F5 / nouvel onglet / redémarrage du navigateur : le setup revient.
Liste complète des articles par composant
Si vous voulez une connaissance plus approfondie de chaque composant :
- Fenêtres du frontend : CSS pane · JS Console · JS pane · Output Console · Snap connections
- Types d'actions : TOGGLE3 · SLIDER
- API et helpers : window.JZ + JUSTZIX helpers
- Tutoriels pratiques : Masquer les bandeaux de cookies · Mode sombre pour n'importe quel site · Déboguer GTM sans devs · Raccourcis clavier personnalisés · Toolbar QA de zéro · Marqueurs d'environnement
JustZix est une extension open-source, entièrement gratuite, sans compte, sans serveur. Tout s'exécute localement dans le navigateur. Installez-la et construisez votre premier mini-IDE en 3 minutes.
Notez cet article
Aucune note — soyez le premier.