[{"data":1,"prerenderedAt":27},["ShallowReactive",2],{"doc:en:browser":3},{"title":4,"lede":5,"html":6,"headings":7},"The launch page","When “▶ Test” is ready, the page of the app the agent has just built opens by itself inside Escouade, in the agent’s “Page” view, with its developer tools. You test without switching windows, and each page stays tied to its worktree.","\u003Cp>\u003Cimg src=\"\u002Fimages\u002Fen\u002Fbrowser.jpg\" alt=\"The “Page” view of the pagination-users agent: the address bar, the width selector, the Devtools button, and the page of the app being built\" width=\"1920\" height=\"960\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fp>\n\u003Ch2 id=\"where-the-page-opens\">Where the page opens\u003C\u002Fh2>\n\u003Cp>As soon as the test’s processes answer (see \u003Ca href=\"\u002Fen\u002Fdocs\u002Ftesting\u002F\">Review and approve\u003C\u002Fa>), the address that shows the feature opens where the project says, in Settings › Projects › Launch, “Open the launches’ pages”:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>In the agent\u003C\u002Fstrong> (default): the page opens in the agent’s “Page” view, next to “Escouade” and the terminal view in its conversation header. If you were looking at this agent or at its “Test” window, Escouade shows you the page; otherwise it waits for you, and the process’s line under “Launch” says so.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>In a separate window\u003C\u002Fstrong>: the page opens in the project’s “demo-api · Pages” window, one tab per worktree, which you can put on a second screen.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>In the system browser\u003C\u002Fstrong>: as before, your browser opens on the address.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>There is one page per worktree: running the test again reloads the same page, two worktrees have two pages. The setting stays on your machine; it is never written to the project’s \u003Ccode class=\"key\">.escouade.yml\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2 id=\"the-page-bar\">The page bar\u003C\u002Fh2>\n\u003Cdiv class=\"table\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Button\u003C\u002Fth>\n\u003Cth>What it does\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Back, Forward, Reload\u003C\u002Ftd>\n\u003Ctd>As in a browser.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>The address\u003C\u002Ftd>\n\u003Ctd>Editable: type a path or an address and \u003Ccode class=\"key\">Enter\u003C\u002Fcode>. Without \u003Ccode class=\"key\">http:\u002F\u002F\u003C\u002Fcode>, the address keeps the page’s.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>pagination-users · web\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Whose page it is: the worktree and the process that serves it.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Full width, Tablet, Mobile\u003C\u002Ftd>\n\u003Ctd>The page’s width (see below).\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Devtools\u003C\u002Ftd>\n\u003Ctd>The developer tools of \u003Cstrong>this page\u003C\u002Fstrong>: console, network, elements.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Open in a separate window\u003C\u002Ftd>\n\u003Ctd>The page moves to the project’s “Pages” window, without reloading. The same button brings it back.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Open in the system browser\u003C\u002Ftd>\n\u003Ctd>The same address, in your browser.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>When the view is narrow, Forward, the widths, the separate window and the system browser move into “…”.\u003C\u002Fp>\n\u003Cp>The dot before the address tells the page’s state:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>amber\u003C\u002Fstrong>: it is loading, or the launch is starting again (“The launch is starting… The page opens here as soon as its server answers.”);\u003C\u002Fli>\n\u003Cli>\u003Cstrong>red\u003C\u002Fstrong>: it is not answering (“localhost:4101 is not answering”, after 20 s of a load that does not finish), with “Reload” and “View logs”; or the launch stopped (“The launch stopped”), with “Launch again” and “View logs”;\u003C\u002Fli>\n\u003Cli>\u003Cstrong>green\u003C\u002Fstrong>: it is loaded.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>When a menu, a list, the palette or an Escouade window passes over the page, the page hides while they are open, then comes back.\u003C\u002Fp>\n\u003Ch2 id=\"the-developer-tools\">The developer tools\u003C\u002Fh2>\n\u003Cp>The “Devtools” button, \u003Ccode class=\"key\">F12\u003C\u002Fcode> or \u003Ccode class=\"key\">Ctrl+Shift+I\u003C\u002Fcode> (\u003Ccode class=\"key\">⌥⌘I\u003C\u002Fcode> on macOS) open the page’s developer tools, whether the focus is in the page or in Escouade. They are the system webview’s: Edge’s (WebView2) on Windows and WebKit’s inspector on macOS, each in their own window; WebKit’s inspector on Linux, attached to the page. Escouade’s own developer tools stay closed.\u003C\u002Fp>\n\u003Ch2 id=\"full-width-tablet-mobile\">Full width, tablet, mobile\u003C\u002Fh2>\n\u003Cp>Three buttons next to “Devtools” change the page’s width:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Full width\u003C\u002Fstrong>: the page takes its whole area.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Tablet\u003C\u002Fstrong>: 768 px, centered on a neutral background, the height of the area.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Mobile\u003C\u002Fstrong>: 390 px, likewise.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The width shows next to them (“768 px”). If the area is narrower, the page narrows to the area and says so (“Narrowed to 692 px”). \u003Ccode class=\"key\">Ctrl+Shift+M\u003C\u002Fcode> (\u003Ccode class=\"key\">⇧⌘M\u003C\u002Fcode> on macOS) moves to the next width, from the page or from Escouade. The choice is kept for the page (the worktree and its process): a new launch keeps its width, in the agent as in the separate window.\u003C\u002Fp>\n\u003Cp>Only the width changes: that is what triggers the page’s media queries. What else the site sees does not move:\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>Mobile user agent\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, through the devtools protocol\u003C\u002Ftd>\n\u003Ctd>No\u003C\u002Ftd>\n\u003Ctd>No\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Touch screen\u003C\u002Ftd>\n\u003Ctd>Possible, through the devtools protocol\u003C\u002Ftd>\n\u003Ctd>No\u003C\u002Ftd>\n\u003Ctd>No\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>This is not done yet: to emulate a whole device, use the device mode of the developer tools where they have one (Edge’s, on Windows).\u003C\u002Fp>\n\u003Ch2 id=\"a-page-apart\">A page apart\u003C\u002Fh2>\n\u003Cp>The page is the app you are building: Escouade does not trust it, without exception.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>It runs in a \u003Cstrong>separate\u003C\u002Fstrong> webview with access to \u003Cstrong>no\u003C\u002Fstrong> Escouade command: a call to \u003Ccode class=\"key\">__TAURI__\u003C\u002Fcode> or \u003Ccode class=\"key\">invoke\u003C\u002Fcode> from the page is refused.\u003C\u002Fli>\n\u003Cli>Its cookies and storage (localStorage, IndexedDB…) are the \u003Cstrong>project’s\u003C\u002Fstrong>, never the Escouade window’s: a \u003Ccode class=\"key\">pages\u002F<project>\u003C\u002Fcode> folder in Escouade’s data on Windows and Linux, a separate store on macOS 14 and later (a private session before).\u003C\u002Fli>\n\u003Cli>It stays on its launch’s origin: a link to another origin (another port, \u003Ccode class=\"key\">127.0.0.1\u003C\u002Fcode> instead of \u003Ccode class=\"key\">localhost\u003C\u002Fcode>, another site) opens in your browser, and Escouade says so (“github.com opened in your browser: only localhost:4101 shows here.”); Escouade’s addresses, files and other schemes open nowhere.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"the-pages-window\">The “Pages” window\u003C\u002Fh2>\n\u003Cp>A project’s “demo-api · Pages” window has one tab per detached page (“pagination-users · web”, “refacto-auth · Front”…), and under the tabs the same bar as in the agent. Closing the window closes its pages; “Put back in the agent” brings a page back to its agent’s view without reloading it.\u003C\u002Fp>\n",[8,12,15,18,21,24],{"id":9,"text":10,"depth":11},"where-the-page-opens","Where the page opens",2,{"id":13,"text":14,"depth":11},"the-page-bar","The page bar",{"id":16,"text":17,"depth":11},"the-developer-tools","The developer tools",{"id":19,"text":20,"depth":11},"full-width-tablet-mobile","Full width, tablet, mobile",{"id":22,"text":23,"depth":11},"a-page-apart","A page apart",{"id":25,"text":26,"depth":11},"the-pages-window","The “Pages” window",1793889381258]