Guides

Emulate a device & environment

Set the viewport, device pixel ratio, color scheme, and geolocation to reproduce a specific environment.

To reproduce how a page behaves on a phone, in dark mode, or from a particular location, override the browser's environment before you interact or capture. browserlane exposes each axis as its own command.

Viewport size (and Retina)

The viewport is the page's rendering area — the size CSS media queries and responsive layouts react to. Set it before capturing or testing a breakpoint:

bl viewport               # print current size, e.g. {"width":1280,"height":720,...}
bl viewport 1280 720      # set the viewport
bl viewport 375 812 --dpr 3   # simulate a high-density phone viewport

--dpr sets the device pixel ratio — use 2 or 3 to emulate Retina / mobile displays, which affects how images and @media (resolution) queries resolve.

Viewport, not OS window

The viewport is the page's rendering area — the size CSS responds to — and it is independent of the OS browser window around it. For layout testing and screenshots, the viewport is what you want. Agents that specifically need to read or place the OS window itself have the browser_get_window / browser_set_window MCP tools.

Color scheme & other media features

bl media overrides CSS media features so you can render a page as if the user had a particular preference — most commonly dark mode:

bl media --color-scheme dark        # force prefers-color-scheme: dark
bl media --reduced-motion reduce    # force prefers-reduced-motion: reduce
bl media --media print              # render as for printing
bl media --color-scheme light --forced-colors active   # override several at once

Supported features: --color-scheme (light/dark/no-preference), --reduced-motion (reduce/no-preference), --forced-colors (active/none), --contrast (more/less/no-preference), and --media (screen/print).

This pairs naturally with capture — force dark mode, then screenshot:

bl open https://example.com
bl media --color-scheme dark
bl screenshot -o dark.png

Geolocation

Override the browser's reported location to test location-aware pages:

bl geolocation 40.7128 -74.006              # latitude, longitude (New York City)
bl geolocation 51.5074 -0.1278 --accuracy 10   # London, with 10m accuracy

The page's navigator.geolocation calls now resolve to the coordinates you set. --accuracy (in meters) controls the reported precision.

On this page