Fenêtres sur la page — CSS, JS et consoles

JustZix vous offre cinq types de fenêtres de dev qui s'affichent directement sur la page visitée — aucun DevTools à ouvrir. Vous les déplacez, les ancrez bord à bord en un mini-tableau de bord, et invoquez une copie éphémère d'un seul raccourci.

Télécharger gratuitement Voir les exemples

Des outils de développement à même la page

JustZix affiche ses fenêtres de développement directement dans la page que vous visitez — pas dans un panneau DevTools, pas dans un onglet séparé. Vous pouvez déplacer chaque fenêtre où vous voulez, ancrer son bord à une autre et en assembler plusieurs en un mini-tableau de bord posé à côté du vrai contenu.

Chaque fenêtre existe en deux variantes : persistante — liée à une règle précise et chargée avec elle — et temporaire (TEMP), invoquée par un raccourci pour un test rapide. C\'est vous qui décidez si une fenêtre reste ou disparaît au rechargement.

Le CSS pane et le JS pane

Le CSS pane est un éditeur de styles en direct : vous tapez une règle et voyez la page changer au même instant — sans enregistrer, sans recharger. Son contenu est conservé séparément par onglet, chaque page a donc son propre brouillon.

Le JS pane est un éditeur JavaScript exécuté à la demande. Le code ne démarre pas tout seul — vous l\'exécutez avec le bouton Run ou le raccourci Ctrl+Enter quand il est prêt. Au-dessus des deux éditeurs, une barre de recherche fonctionne avec un compteur de résultats, un surlignage et des sauts Ctrl+Alt+←/→.

La JS Console et l'Output Console

La JS Console est un REPL sur la page : vous tapez une expression, appuyez sur Entrée, obtenez un résultat, et utilisez les flèches haut et bas pour rappeler les commandes précédentes — comme dans un terminal.

L\'Output Console est un visualiseur de logs de la page à six onglets comptés : All, JZconsole, console.*, Network, erreurs et pushes dataLayer. L\'onglet Network rassemble les requêtes réseau et permet de les filtrer par domaine, taille et temps.

L'AI Helper

L\'AI Helper est un assistant IA intégré qui se connecte à OpenAI, Anthropic ou Gemini. Il inspecte la structure de la page, teste lui-même le code dans des fenêtres TEMP et — seulement après votre accord — transforme la solution fonctionnelle en une règle CSS ou JS prête à l\'emploi.

Fenêtres TEMP

Les versions TEMP sont les mêmes fenêtres, mais éphémères. Vous les invoquez par des raccourcis : Ctrl+Alt+G ouvre le TEMP CSS pane, Ctrl+Alt+H le TEMP JS pane, Ctrl+Alt+J la TEMP JS Console et Ctrl+Alt+K l\'Output Console TEMP.

Vous pouvez déplacer, ancrer et redimensionner les fenêtres TEMP exactement comme les persistantes. Chaque type de fenêtre se souvient séparément de sa dernière taille (par appareil) — un double-clic sur la barre de titre bascule entre cette taille mémorisée et la taille par défaut 380×240. La couleur, la police et la taille de chaque fenêtre se règlent depuis le menu du clic droit.

Fermer avec × n\'efface plus le contenu — la fenêtre est simplement masquée, et son état (code, log, géométrie) attend dans la session jusqu\'à ce que vous rouvriez une fenêtre du même type. Quand vous voulez vraiment repartir de zéro, les en-têtes de TEMP CSS et TEMP JS portent un bouton « effacer » (icône poubelle, l\'effacement va dans l\'historique d\'annulation). Les données des fenêtres TEMP ne disparaissent qu\'à la fermeture de l\'onglet — c\'est la portée naturelle de la session.

Panneau d\'édition dans une fenêtre séparée

Parfois, il est plus pratique d\'avoir le panneau d\'édition à côté de la page plutôt qu\'à sa place. Le raccourci Ctrl+Alt+I ouvre le panneau dans une fenêtre de navigateur séparée, sélectionne automatiquement la première règle active qui correspond à la page courante et se positionne sur l\'onglet CSS. Ctrl+Alt+O fait de même pour l\'onglet JS, et Ctrl+Alt+P pour l\'onglet Actions. Si aucune règle ne correspond à la page, le panneau s\'ouvre vide, prêt à en créer une nouvelle.

Utilisés dans un panneau déjà ouvert, les mêmes raccourcis ne créent pas une seconde fenêtre — ils changent l\'onglet de la règle active. La correspondance se fait sur la touche physique, les raccourcis fonctionnent donc sur tous les agencements, y compris le polonais Programmers (AltGr ne casse plus Ctrl+Alt+O).

Articles de blog liés

Des articles qui approfondissent ce sujet.

Fenêtres sur le frontend L'Output Console repensée : 6 onglets, sans DevTools L'Output Console de JustZix est un visualiseur de logs en lecture seule dans l'onglet — 6 onglets pour la console, le réseau, les erreurs et le dataLayer, avec filtres et recherche en direct. Fenêtres sur le frontend Filtrez le trafic réseau dans l'Output Console L'onglet Network de l'Output Console dispose d'un jeu complet de filtres : par domaine (Domaines+/Domaines-), par taille et par durée — plus l'ajout de domaines en un clic. Fenêtres sur le frontend Un panneau réseau sans DevTools — l'onglet Network de JustZix L'Output Console de JustZix dispose d'un onglet Network qui capture les requêtes via chrome.webRequest — dans l'onglet, avec un buffer d'arrière-plan, des filtres et des curseurs. Fenêtres sur le frontend CSS pane : un éditeur CSS en direct sur n'importe quelle page, sans DevTools Une textarea flottante injectée sur la page avec injection <style> en direct (debounce 200ms). Persistance par onglet, multi-pane, hiérarchie de scope. Ce qu'elle fait et comment démarrer en 30 secondes. Fenêtres sur le frontend JS pane : scripts Run-on-demand, pas d'auto-exécution à chaque visite Du code JS persistant avec Ctrl+Enter / clic sur ▶ pour l'exécuter. Pas d'auto-exécution au chargement. État dirty, overlay d'erreur, sessionStorage par onglet. Cas d'usage : scripts destructifs + opérations en masse. Fenêtres sur le frontend TEMP panes — fenêtres de dev jetables sous un raccourci Ctrl+Alt Invoquez une fenêtre CSS, JS, REPL ou Output sur n'importe quelle page avec un raccourci Ctrl+Alt. Les TEMP panes disparaissent au rechargement — zéro config, zéro trace dans vos règles.

Autres fonctionnalités

{ } Injection de CSS et JavaScriptCréez des règles CSS et JavaScript pour tout domaine ou chemin d'URL. Masquez des éléments, corrigez la mise en page, ajoutez votre logique. ⊞ Organisation hiérarchiqueDossiers, groupes, jeux de règles et actions forment une arborescence qui garde l'ordre, d'une correction CSS à des centaines de règles. ◉ Motifs d'URL avec jokersAssociez des règles à une adresse exacte, un site entier ou tous les sous-domaines. Le joker * couvre tout fragment, les motifs d'exclusion gardent la règle à sa place. ◐ Le bouton flottantUn petit bouton rond sur la page indique l'état des règles par la couleur et bascule tout d'un clic. Le clic droit ouvre un panneau par règle. ⚡ Le panneau d'actions — 6 types de contrôlesUne barre interactive sur la page avec six types de contrôles : bouton, liste, champ, curseur, bloc-notes et interrupteur à trois états. Chaque action exécute du code. ⌨ APIs programmatiques — JZ et JUSTZIXDeux objets globaux — JZ et JUSTZIX — permettent à vos règles de déclencher des boutons d'action et de journaliser dans l'Output Console, sans DevTools. ⇄ Synchronisation multi-appareilsUne seule clé relie tous les navigateurs. Règles, dossiers et paramètres se propagent avec résolution de conflit par entité, sans écrasement en masse. ⇗ Partages et sauvegardesPartagez un dossier, un groupe ou une règle via un lien court qui expire après 1 à 48 h, et protégez vos données par des sauvegardes cloud automatiques.

Toutes les fonctionnalités →