VebA page served from your own Mac, on localhost, 127.0.0.1 or a .test or .localhost name, shows its port on its tab. The first time one loads, Veb offers to turn on Developer Mode for it.
In Developer Mode#
- The page always has an address band with its whole address, in a fixed-width face.
- Errors show on the band in red as they happen: 3 errors. Click them, or press ⌥⌘K, for the page’s errors and network requests.
- ⌥⌘U turns on Measure, with rulers on the page. Point at anything for its box and size; a click picks it and shows its padding, margins and gaps. Hold ⌥ to measure to another box, ⌥S keeps a measurement, N writes a note on the box, and X shows every box at once. A picture of the design dropped on the page lies over it, to see what is off.
- Measure’s words are in a dock at the page’s foot: Space opens Details, where values can be edited in the page’s own rules, and Copy for Agent ⌘C copies the box, your changes and notes for an agent.
- Each error or request can be copied for an agent, and a request as cURL.
Turn it on or off for a server from its tab’s right-click menu, or with Developer Mode in Site Controls (⌘E, or the lock).
Settings › Developers lists every server you chose for, each with its switch; right-click one to forget it, and its next page asks again. Turn off Offer on local pages and Veb stops asking. The same page sets where the developer tools dock and whether the rulers count in pixels or rems.
Developer tools#
On any page, ⌥⌘I opens the developer tools in a card beside or under the page, which makes room rather than covering it. Its row is laid out as Chrome’s, so everything is where your hand expects it: the element picker and device mode first, then Elements, Console, Sources, Network, Performance, Memory, Application and Security, then More with Audit, Recorder and any tab that doesn’t fit, and at the right, only while the page has errors or warnings, their count, then Ask in Chat, Settings and the ⋯ menu.
- Device mode shows the page at a phone’s or a tablet’s size, from Chrome’s list or any size you type, fitted to the room, and tells the site it’s a phone from the next load. Drag the page’s edges or corner to any size, as in Chrome’s Responsive mode; with ⇧ it moves a tenth as far.
- Security says how the page’s connection is made, its certificate, whether everything on it came over HTTPS, and what the site may use on your Mac.
- Recorder writes down your clicks, what you type and Return as steps, plays them back, and copies them as Chrome’s recording or as steps for an agent. Passwords are never written down.
- The ⋯ menu docks the card left, under or right of the page, opens it in a window of its own, and has search in all files, the console drawer and WebKit’s device settings.
- The count includes what the page said before you opened the tools. Click it to open Console.
- The issues count in Console’s bar, or ⌥⌘K, lists the page’s errors, warnings and failed requests, drawn like Chrome’s console. Pick rows with a click, ⇧-click or ⌘A, then ⌘C copies them for an agent: each error with its stack and how often, each failed request with what the server said, keys and tokens taken out. Copy for Agent without a pick copies the whole list, or the whole console from its menu.
- WebKit’s own console has Copy for Agent too: in its bar, on a message, and in a message’s right-click menu.