YabA 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, Yab 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 puts rulers on the page. Point at anything for its box, click to pin it and point at another for the distance; click a value to change it live.
- 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, the lock, or Developer Mode in the View menu.
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 Yab 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, Security, Audit and Recorder, and at the right, only while the page has errors or warnings, their count, then Ask in Chat, Settings and the ⋯ menu. Tabs that don’t fit go under More.
- 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.