Web tiles and the inspector

Open a page#

• Pick Web tile on the left rail and click the board, right-click and choose Insert web, or say open localhost 3000.
• An empty tile shows a localhost dial with ports 3000, 3001, 4200, 5173, 8000 and 8080. A green dot means something answers on that port.
• Below it are quick links (Google, GitHub, YouTube, MDN, npm, Hacker News). Any other address goes in the address bar at the top of the tile. Only http and https pages load.

Toolbar, tabs and device sizes#

Toolbar

Back, Forward, Reload or Stop, the address bar, {} for the inspector, and a More menu with page zoom from 50 to 250 percent in 10 percent steps, Inspect on board, Hard reload (skip cache), Copy URL and Open in Browser. When the zoom is not 100 percent, the toolbar shows it; click it to reset.

Tabs

+ opens a tab. Pop-ups open as tabs, up to 12. Closing the last tab leaves a fresh start tab.

Device sizes

The header switches the page to Fit tile, a 24, 27 or 32 inch monitor, iPhone SE, iPhone 14 Pro, iPhone 14 Pro Max, Pixel 7 or Galaxy S8+. Phone sizes also present the page as iPhone Safari.

Waiting for your dev server#

• If nothing listens yet on a localhost address, the tile retries ten times, one second apart, and shows Waiting for the dev server with Retry now.
• Other failures show Couldn't load this page with Retry and Open in Browser.
• Self-signed certificates are accepted on localhost only.

Previews that open on their own#

When a console prints a local web address starting with http:// or https:// (localhost, 127.0.0.1, 0.0.0.0 or [::1]) and something answers there, a web tile opens beside that console with a cyan wire to it. It happens once per console and address. An automatic preview that still only shows that server is not restored when the board reopens; if you browsed elsewhere in it, it comes back like any tile.

The Web Inspector#

{} docks Safari's Web Inspector as a card wired to its tile, one per tile; pressing it again takes you to the existing card. The card inspects the tab that was open when it docked, and offers Re-attach if that tab closes. If it cannot dock, the card says so and offers Open in window. Deleting the tile deletes its inspector.

Permissions, downloads and pop-ups#

• A page that wants the camera or the microphone always asks you first.
• Downloads go to your Downloads folder. A download you start with a click in the page itself, not in a frame embedded in it, saves directly; other downloads from the visible tab ask first, and downloads from background tabs are cancelled.
• A link you click in the page itself that opens a new window becomes a tab. Other pop-ups, including links in embedded frames and ones a script opens after your click, wait behind a Pop-up blocked banner with Open and Dismiss.
• Pages cannot play sound before you click them.

Keep going#