Developer tools

Build with an AI agent beside your page, inspect the details and check the result in the browser.

A little less setup. A lot more building.

Your next idea.
Already in good hands.

The tools you need to build for the web, right where you browse it.

01 / Preview

Big ideas.
Every screen.

Put any page in a phone frame. Pick a device, rotate it, or resize the viewport to find the details that need a little more care.

Explore phone view
02 / Inspect

A familiar engine.
A clearer workflow.

Chromium DevTools are one shortcut away. Inspect a layout, debug JavaScript, or see what happens when a connection slows down.

Meet your developer tools
03 / Focus

A space for work.
A space for everything else.

Developer windows have their own session. Try a test account alongside your everyday browsing, with cookies and storage cleared when you close the last developer window.

Discover developer windows
Keep this part handy

Every tool, one place.

A closer look at what is built in and how to use it.

Yalqen runs on Chromium, so pages render and debug the way they do in Chrome. On top of that it builds in the tools web developers usually add with extensions. Open the command bar with ⌘L and type > to see every developer command.

Yalqen AI: build beside your page

Open the AI panel with ⇧⌘A and choose Claude, Codex or Gemini. Select a project folder to explore and edit its code, or ask about a page without choosing a project. Agent setup and authentication depend on the provider you choose.

Attach open tabs or pick an element to give the agent context. In Verify mode, it checks changes in the browser; Review mode investigates without editing files, and Design mode focuses on the interface with screenshots before and after. Browser checks can run a user flow or scan responsive layouts.

Using AI sends your prompts and attached page content to the selected provider. Browsing itself does not require an AI session. Provider usage limits and charges are separate from Yalqen.

Phone view and device presets

Press ⌥⌘M to show the page inside a device frame, and ⇧⌥⌘M to rotate it. Responsive mode lets you drag the frame to any size, or focus its handle and resize with the arrow keys.

Device presets
DeviceViewport (CSS pixels)
iPhone 15393 × 852
iPhone 15 Pro Max430 × 932
iPhone 16 Pro402 × 874
iPhone SE375 × 667
Pixel 8412 × 915
Pixel 9412 × 924
Galaxy S24360 × 780
iPad mini744 × 1133

Network throttling

Test loading states and slow connections per tab: Offline, Slow 3G, Fast 3G or Fast 4G. Turn throttling off again with one command.

Request rules

Match requests by URL pattern and decide what happens to them, without a proxy or a local server. Each rule can:

  • Block the request, to see how the page copes with a missing script or API.
  • Mock the response with your own status code, content type and body.
  • Redirect it to another URL, for example a local build of a script.
  • Rewrite request headers: add, replace or remove them before the request goes out.

Rules are saved, can be edited from the command bar, and are switched on per tab.

Emulation

  • Force dark or light mode to test prefers-color-scheme, then go back to the system theme.
  • Turn on reduced motion to test prefers-reduced-motion.
  • Show the print stylesheet without opening the print dialog.
  • Switch the user agent to Firefox or Safari on macOS, Edge on Windows, iPhone, Android or Googlebot.

One command resets every override on the page.

Reloading and caching

  • Reload ignoring the cache with ⇧⌘R.
  • Turn the cache off for a single tab.
  • Reload a tab automatically every 5, 10, 30 or 60 seconds while you work on something else.

Screenshots, PDF and links

  • Capture the visible area or the full page as an image.
  • Save the page as a PDF with ⇧⌘S.
  • Copy the address as a Markdown link or as a ready-to-run curl command.

Developer windows

Choose Developer in the sidebar’s session switcher to open a developer window. It runs in its own session, apart from your everyday browsing, so you can sign in to a test account without logging out of your real one. Ad blocking and third-party cookie blocking are off there, closer to what most visitors’ browsers do. Cookies, storage and cache are wiped when the last developer window closes.

Chromium DevTools and page source

The full Chromium DevTools open with ⌥⌘I, and the page source with ⌥⌘U. Every other shortcut is on the keyboard shortcuts page.

Choose your testing browsers

Use the Mac developer browser guide to try a responsive form, a failing API and the same flow across Chromium, WebKit and Gecko before choosing your setup.