[{"data":1,"prerenderedAt":27},["ShallowReactive",2],{"doc:fr:browser":3},{"title":4,"lede":5,"html":6,"headings":7},"La page du lancement","Quand « ▶ Tester » est prêt, la page de l’app que l’agent vient de développer s’ouvre toute seule dans Escouade, dans la vue « Page » de l’agent, avec ses outils de développement. Tu testes sans changer de fenêtre, et chaque page reste rattachée à son worktree.","\u003Cp>\u003Cimg src=\"\u002Fimages\u002Fbrowser.jpg\" alt=\"La vue « Page » de l’agent pagination-users : la barre d’adresse, le sélecteur de largeur, le bouton Devtools, et la page de l’app développée\" width=\"1920\" height=\"960\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fp>\n\u003Ch2 id=\"ou-s-ouvre-la-page\">Où s’ouvre la page\u003C\u002Fh2>\n\u003Cp>Dès que les processus du test répondent (voir \u003Ca href=\"\u002Fdocs\u002Ftesting\u002F\">Tester et valider\u003C\u002Fa>), l’adresse qui montre la fonctionnalité s’ouvre là où le projet le dit, dans Réglages › Projets › Lancement, « Ouvrir les pages des lancements » :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Dans l’agent\u003C\u002Fstrong> (par défaut) : la page s’ouvre dans la vue « Page » de l’agent, à côté de « Escouade » et de la vue terminal dans l’en-tête de sa conversation. Si tu regardais cet agent ou sa fenêtre « Tester », Escouade te montre la page ; sinon elle t’attend, et la ligne du processus dans « Lancement » le dit.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Dans une fenêtre à part\u003C\u002Fstrong> : la page s’ouvre dans la fenêtre « demo-api · Pages » du projet, un onglet par worktree, que tu peux mettre sur un second écran.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Dans le navigateur du système\u003C\u002Fstrong> : comme avant, ton navigateur s’ouvre sur l’adresse.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Il y a une page par worktree : relancer le test recharge la même page, deux worktrees ont deux pages. Le réglage reste sur ta machine, il n’est jamais écrit dans le \u003Ccode class=\"key\">.escouade.yml\u003C\u002Fcode> du projet.\u003C\u002Fp>\n\u003Ch2 id=\"la-barre-de-la-page\">La barre de la page\u003C\u002Fh2>\n\u003Cdiv class=\"table\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Bouton\u003C\u002Fth>\n\u003Cth>Ce qu’il fait\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Retour, Avancer, Recharger\u003C\u002Ftd>\n\u003Ctd>Comme dans un navigateur.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>L’adresse\u003C\u002Ftd>\n\u003Ctd>Modifiable : tape un chemin ou une adresse et \u003Ccode class=\"key\">Entrée\u003C\u002Fcode>. Sans \u003Ccode class=\"key\">http:\u002F\u002F\u003C\u002Fcode>, l’adresse garde celui de la page.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>pagination-users · web\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>À qui est la page : le worktree et le processus qui la sert.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Pleine largeur, Tablette, Mobile\u003C\u002Ftd>\n\u003Ctd>La largeur de la page (voir plus bas).\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Devtools\u003C\u002Ftd>\n\u003Ctd>Les outils de développement de \u003Cstrong>cette page\u003C\u002Fstrong> : console, réseau, éléments.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Ouvrir dans une fenêtre à part\u003C\u002Ftd>\n\u003Ctd>La page passe dans la fenêtre « Pages » du projet, sans être rechargée. Le même bouton l’y reprend.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Ouvrir dans le navigateur du système\u003C\u002Ftd>\n\u003Ctd>La même adresse, dans ton navigateur.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>Quand la vue est étroite, Avancer, les largeurs, la fenêtre à part et le navigateur du système passent dans « … ».\u003C\u002Fp>\n\u003Cp>Le point devant l’adresse dit l’état de la page :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>ambre\u003C\u002Fstrong> : elle charge, ou le lancement redémarre (« Le lancement démarre… La page s’ouvre ici dès que son serveur répond. ») ;\u003C\u002Fli>\n\u003Cli>\u003Cstrong>rouge\u003C\u002Fstrong> : elle ne répond pas (« localhost:4101 ne répond pas », après 20 s d’un chargement qui ne finit pas), avec « Recharger » et « Voir les logs » ; ou le lancement s’est arrêté (« Le lancement s’est arrêté »), avec « Relancer » et « Voir les logs » ;\u003C\u002Fli>\n\u003Cli>\u003Cstrong>vert\u003C\u002Fstrong> : elle est chargée.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Quand un menu, une liste, la palette ou une fenêtre d’Escouade passe sur la page, elle s’efface le temps qu’ils soient ouverts, puis revient.\u003C\u002Fp>\n\u003Ch2 id=\"les-outils-de-developpement\">Les outils de développement\u003C\u002Fh2>\n\u003Cp>Le bouton « Devtools », \u003Ccode class=\"key\">F12\u003C\u002Fcode> ou \u003Ccode class=\"key\">Ctrl+Maj+I\u003C\u002Fcode> (\u003Ccode class=\"key\">⌥⌘I\u003C\u002Fcode> sous macOS) ouvrent les outils de développement de la page, que le focus soit dans la page ou dans Escouade. Ce sont ceux de la webview du système : ceux d’Edge (WebView2) sous Windows et l’inspecteur de WebKit sous macOS, chacun dans sa propre fenêtre ; l’inspecteur de WebKit sous Linux, attaché à la page. Les outils de développement d’Escouade elle-même restent fermés.\u003C\u002Fp>\n\u003Ch2 id=\"pleine-largeur-tablette-mobile\">Pleine largeur, tablette, mobile\u003C\u002Fh2>\n\u003Cp>Trois boutons, à côté de « Devtools », changent la largeur de la page :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Pleine largeur\u003C\u002Fstrong> : la page prend toute sa zone.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Tablette\u003C\u002Fstrong> : 768 px, centrée sur un fond neutre, la hauteur de la zone.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Mobile\u003C\u002Fstrong> : 390 px, de même.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>La largeur s’affiche à côté (« 768 px »). Si la zone est plus étroite, la page rétrécit à la zone et le dit (« Rétréci à 692 px »). \u003Ccode class=\"key\">Ctrl+Maj+M\u003C\u002Fcode> (\u003Ccode class=\"key\">⇧⌘M\u003C\u002Fcode> sous macOS) passe à la largeur suivante, depuis la page ou depuis Escouade. Le choix est gardé pour la page (le worktree et son processus) : une relance garde sa largeur, dans l’agent comme dans la fenêtre à part.\u003C\u002Fp>\n\u003Cp>Seule la largeur change : c’est elle qui déclenche les media queries de la page. Ce que le site voit d’autre ne bouge pas :\u003C\u002Fp>\n\u003Cdiv class=\"table\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003C\u002Fth>\n\u003Cth>Windows (WebView2)\u003C\u002Fth>\n\u003Cth>macOS (WKWebView)\u003C\u002Fth>\n\u003Cth>Linux (WebKitGTK)\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>User agent mobile\u003C\u002Ftd>\n\u003Ctd>Possible\u003C\u002Ftd>\n\u003Ctd>Possible\u003C\u002Ftd>\n\u003Ctd>Possible\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode class=\"key\">devicePixelRatio\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Possible, par le protocole des devtools\u003C\u002Ftd>\n\u003Ctd>Non\u003C\u002Ftd>\n\u003Ctd>Non\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Écran tactile\u003C\u002Ftd>\n\u003Ctd>Possible, par le protocole des devtools\u003C\u002Ftd>\n\u003Ctd>Non\u003C\u002Ftd>\n\u003Ctd>Non\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>Ce n’est pas encore fait : pour émuler un appareil complet, utilise le mode appareil des outils de développement là où ils en ont un (celui d’Edge sous Windows).\u003C\u002Fp>\n\u003Ch2 id=\"une-page-a-part\">Une page à part\u003C\u002Fh2>\n\u003Cp>La page est l’app que tu développes : Escouade ne lui fait pas confiance, sans exception.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Elle tourne dans une webview \u003Cstrong>à part\u003C\u002Fstrong>, qui n’a accès à \u003Cstrong>aucune\u003C\u002Fstrong> commande d’Escouade : un appel à \u003Ccode class=\"key\">__TAURI__\u003C\u002Fcode> ou \u003Ccode class=\"key\">invoke\u003C\u002Fcode> depuis la page est refusé.\u003C\u002Fli>\n\u003Cli>Ses cookies et son stockage (localStorage, IndexedDB…) sont ceux du \u003Cstrong>projet\u003C\u002Fstrong>, jamais ceux de la fenêtre d’Escouade : un dossier \u003Ccode class=\"key\">pages\u002F<projet>\u003C\u002Fcode> dans les données d’Escouade sous Windows et Linux, un magasin à part sous macOS 14 et plus (une session privée avant).\u003C\u002Fli>\n\u003Cli>Elle reste sur l’origine de son lancement : un lien vers une autre origine (un autre port, \u003Ccode class=\"key\">127.0.0.1\u003C\u002Fcode> au lieu de \u003Ccode class=\"key\">localhost\u003C\u002Fcode>, un autre site) s’ouvre dans ton navigateur, et Escouade le dit (« github.com s’est ouvert dans ton navigateur : ici, seul localhost:4101 s’affiche. ») ; les adresses d’Escouade, les fichiers et les autres schémas ne s’ouvrent nulle part.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"la-fenetre-pages\">La fenêtre « Pages »\u003C\u002Fh2>\n\u003Cp>La fenêtre « demo-api · Pages » d’un projet a un onglet par page détachée (« pagination-users · web », « refacto-auth · Front »…), et sous les onglets la même barre que dans l’agent. Fermer la fenêtre ferme ses pages ; « Remettre dans l’agent » reprend une page dans la vue de son agent sans la recharger.\u003C\u002Fp>\n",[8,12,15,18,21,24],{"id":9,"text":10,"depth":11},"ou-s-ouvre-la-page","Où s’ouvre la page",2,{"id":13,"text":14,"depth":11},"la-barre-de-la-page","La barre de la page",{"id":16,"text":17,"depth":11},"les-outils-de-developpement","Les outils de développement",{"id":19,"text":20,"depth":11},"pleine-largeur-tablette-mobile","Pleine largeur, tablette, mobile",{"id":22,"text":23,"depth":11},"une-page-a-part","Une page à part",{"id":25,"text":26,"depth":11},"la-fenetre-pages","La fenêtre « Pages »",1793889377769]