How to Use Browserling's Screen Capture and Annotation Feature

Updated

Browserling's screen capture feature lets you take a screenshot of any region of a remote browser session, then annotate it with a pen, rectangle, text, or eraser tool. You reach it through the new unified menu, which groups screen capture with other popular features below the platform, browser, and URL controls. The workflow is: open a browser session, select the region you want, edit the resulting screenshot, and copy it out. The steps below follow the feature as described in catonmat.net's announcement of Browserling's new user interface.

Step 1: Open a browser session

Screen capture works on a live Browserling session, so you first need a browser running.

  1. Open the menu and pick your operating system and browser version from the platform and browser selectors. The announcement notes this takes "a click or two" to load the version you need.
  2. Enter the address of the site you want to test in the URL navigation field and click the go button. A browser opens and loads that site.

If you want to follow along with the same page the announcement used, the quick link browserling.com/chrome/110/catonmat.net/new-browserling-ui opens that blog post in Chrome 110.

Step 2: Capture a region of the screen

  1. Open the menu and select Capture screen from the feature list at the bottom.
  2. Select the browser region you want to capture.

Once you select the region, Browserling opens a screenshot of that region and presents the editing tools. This is the point where the capture becomes an editable image rather than a live page.

Step 3: Annotate the screenshot

The editor gives you four tools:

Tool What it's for
Pen Freehand drawing or circling something on the page
Rectangle Boxing off an element or area you want to call out
Text annotation Adding a written note directly on the screenshot
Eraser Removing parts of your annotations

Use these to mark up layout bugs, highlight a specific element, or leave notes for whoever receives the screenshot.

Step 4: Get the screenshot out

The announcement states you can quickly copy screenshots to the clipboard, and that the feature has additional capabilities beyond the four editing tools. That makes the copy-to-clipboard path the fastest way to move a capture into a bug report, chat message, or document without saving a file first.

Practical notes

  • Capture is region-based, not full-page by default. You choose the browser region you want, so you can grab just the part that matters instead of the whole viewport.
  • Screen capture sits alongside related testing features. The same menu section also holds display options (zoom and resolution changes for responsive testing), local testing via an SSH tunnel to localhost or your local network, an on-screen keyboard for non-English computers and mobile devices, share-a-browser links, and feedback. If your goal is checking how a site looks at different sizes, display options and capture screen are often used together.
  • The announcement promises a more detailed article on this feature. catonmat.net says a follow-up post will cover the screen capture feature's other capabilities in more depth, so treat the four tools above as the documented baseline rather than the full extent of what's available.

If you only need a quick annotated image of one part of a remote browser session, the four steps above are enough: open a session, capture a region, mark it up, copy it out.