From pixel to element.
Pick on the page, explore its DOM, and inspect rules, computed values, layout, and the box model.
THE BROWSER, OPENED UP.
Small details.
Serious possibilities.
Follow a request. Trace a value. Put four pages in view.
Bew brings the whole development loop into focus.
01 MAKE ROOM FOR THE WHOLE IDEA
More than tabs.
A space to work.
Two pages. Four pages. Your own arrangement.
Live views that keep their state
when you move them around.
Four perspectives. One workspace.
Nest horizontal and vertical splits to put your app, reference, inspiration, and another page in view. Resize the boundaries or focus one pane when it needs your full attention.
02 THE DETAILS ARE RIGHT HERE
Go beneath
the surface.
Firefox’s developer tools, built in.
Elements, Console, Network, Sources, Storage, and Flow.
Keep the page and the explanation together.
A closer conversation.
Read and filter output, evaluate JavaScript in the page, set breakpoints, and step through your sources.
Closer to the code.
Component details for Vue, Nuxt, React, and Next.js pages, and local source editing for the project folders you allow.
Also within reach
Responsive mode with ⌃⌘M · Storage and cookies · Style sheets · Performance · Per-tab developer panels
03 EVERY REQUEST HAS A STORY
See what happened.
Change what happens next.
Firefox’s Network panel is the beginning.
Bew adds rules that override, block, and report.
Made for the debugging loop.
LIVE API RESPONSE creavit.studio / api / pricing
Find the request.
Filter by type, search URLs, and keep the waterfall in view. Bew adds an Overridden filter and a count of the rules that are active right now.
Read the whole exchange.
Open headers, cookies, payloads, responses, timings, and the stack trace behind a call, without losing the page above.
Try a different outcome.
Edit a captured response and keep it as a rule: status, headers, body, and an optional delay. Or always block a URL. Rules answer before any connection is made.
Take the evidence with you.
Copy as cURL or fetch, save a HAR, or copy a bug report with secrets redacted, ready for the issue tracker.
Override Response… · Always Block in Bew · Copy Bug Report · Overridden filterGet into the workflow
04 CONNECT THE DOTS
There’s a story
between the requests.
Flow turns a browsing session into a map.
See pages, actions, and API calls
as connected moments.
Page Action API call Next page
What led to this?
Start recording from the developer tools and Flow connects navigation and actions with the calls they caused.
Zoom out. Find the pattern.
Filter calls and domains, sort requests, and fit the whole graph into view.
A map you can share.
Export the map as a PNG, or copy it as Mermaid for your notes and pull requests.
05 FOLLOW THE DATA HOME
Where did
this value come from?
Press ⌃⌘T and click a value on a Vue or Nuxt
development page. Lineage walks it back,
step by step, to the line that made it.
- Upstream requestruntime
GET /api/pricing - Nuxt server routesource
server/api/pricing.ts - useFetchmatched
composables/usePlans.ts - Propsruntime
PlanCard.vue · plan - Templateruntime
{{ plan.price }} - DOM
$29 / month
Know what is confirmed.
Each step says whether the running page confirmed it, the project matched it, or it comes from source alone.
From the response to the line.
Props, setup bindings, Pinia, useState, useAsyncData, server routes, and the captured JSON, read without touching the page.
Catch the write.
Watch a value and see the call stack that changed it, mapped through source maps and opened in your editor.
The trail above is an illustration of the steps Lineage shows.
06 SAME APP, EVERY STAGE
Local. Staging.
Production.
Group the origins one app runs on. A colored badge in the address bar shows where you are, and its menu opens the same path, query, and fragment on another environment. ⌃⌘E jumps to the next one.
Stagingstaging.example.com/pricing?plan=pro
- Local
localhost:3000/pricing?plan=pro - Staging
staging.example.com/pricing?plan=pro - Production
example.com/pricing?plan=pro
Env adds the site you are on to an app.
07 FINISH THE LOOP
From “let me try”
to “look at this.”
A REAL TERMINAL
Your shell. Already here.
Start the server. Run the command. Keep processes alive while you browse, with terminal tabs and split panes right inside Bew.
⌘J Bring the terminal into view.SCREENSHOT STUDIO
Make the result worth sharing.
Capture the visible area, an element, or a region. Add a gradient, padding, rounded corners, a shadow, or a little tilt. Copy it or export a PNG.
The backgrounds here? Made in Bew.Captured in Bew’s current Gecko interface with live public pages and an isolated demo profile. Check the changelog for release details.
THE EVERYDAY DETAILS, TOO
Your workspace.
Your rules.
RESPONSIVE PREVIEW
Try it at every size.
Check your layout at phone and tablet sizes with responsive mode, a press of ⌃⌘M away.
WORKSPACES & CONTAINERS
A workspace for each headspace.
Separate projects into named, colored workspaces. Use containers when you need different website logins side by side.
BROWSER IMPORT
Move in without starting over.
Import bookmarks, history, passwords, and cookies from Safari, Chrome, Arc, Brave, Edge, Firefox, or Zen, or bring a password CSV.
FIREFOX SYNC
Your Firefox data, too.
Sign in with a Mozilla account to sync bookmarks, history, and passwords with Firefox on your other devices. It is optional.
CUSTOMIZE
Make it feel like yours.
Tint each workspace, set the sidebar’s opacity and grain, rearrange toolbar buttons, and find any tab or command with ⌘K.
SITE CONTROLS
Site permissions, in your hands.
Manage camera, microphone, location, and site data per website. Private windows keep their workspaces in memory only.
Closer to the component.
Bew shows component details for Vue, Nuxt, React, and Next.js pages, and Lineage traces values on Vue and Nuxt development pages. Both depend on metadata exposed by the development build, and source links and local editing need the project folder you allow Bew to read. Production builds often strip that metadata.
MAKE YOURSELF AT HOME
Your next idea.
Its new favorite browser.
Keep your tools close. Give your ideas some room.
Get Bew for Mac macOS 14+ · Apple Silicon & Intel