With our Session Live View, you can easily display your running browser sessions with a few simple API calls.

Browserbase provides Session Live URLs allowing you to:

​
Getting a Session Live URL

Request a Session Live URL using the Session Live URLs endpoint or SDKs:

1

Start a Session

Use the Session API to create a new session.

2

Request a Session Live URL

Then, use the Session API Live URLs endpoint to get the debuggerFullscreenUrl for your session.

​
Debug a running Session

Once a Session Live URL is retrieved (ex: debuggerFullscreenUrl), open it with Chrome to start taking action.

​
Give control over the Session to your end users

While Browserbase helps deal with common web automation problems, such as (anti-bot mechanisms, captchas, and downloading files reliably), some scenarios remain challenging to automate for technical or data-privacy reasons:

  • iframes can be difficult to work with as the loaded content might be external and could change without notice, potentially leading to error conditions. iframes can be delegated to the end user by forwarding the remote control URL.

  • Working with user credentials can be another tricky scenario. The end-user might prefer to fill out their credentials directly on the website instead of storing them elsewhere.

These code samples below show how to use a Session Live URL to hand control of the Session to the user:

​
Integrate a live Session iframe within your application

Session Live URLs can be used to integrate a live view of ongoing automation within your application.

A use case for this is an application enabling users to configure advanced health checks based on page content can benefit from allowing the users to see the health check recording in case of false positives.

Below is an example of how to integrate a live Session iframe within your application:

1

Store the Session ID of each automation run

Store the Session ID of each running Session by creating a Session using the Browserbase SDK to store it and pass it to the connect URL as follows:

2

Request a debug connection URL by using the Session ID

If a user tries to access the live view of a running automation, retrieve the Session Live URLs as follows:

This returns the debug URL for the first page only. If your session has multiple tabs and you need a Session Live View for each tab, please use the Sessions API.

Let’s forward the debugConnectionURL to the front end to create the final live view with an iFrame.

3

Integrate an iframe within your front-end

The front end will display a live running Session by loading the debugConnectionURL in a read-only iframe:

<iframe
  src="{debugConnectionURL}"
  sandbox="allow-same-origin allow-scripts"
  allow="clipboard-read; clipboard-write"
  style="pointer-events: none;"
/>
To enable your end users to interact with the live Session, remove the style='pointer-events: none;' line.

​
Disabling the navbar in the debug URL

By default, the debug view includes a navbar at the top, providing additional context and controls.

If you want to remove this navbar from the debug view, you can add the navbar=false query parameter to the debugConnectionURL.

const debugUrlWithoutNavbar = `${debugConnectionURL}&navbar=false`;

Disabling the navbar can be useful when you want to maximize the visible area of the debug view or when you’re integrating it into your own UI that already provides context for the session.

​
Handling disconnections

If the Session Live View loses its connection to the browser, the iframe will post a message to the window for you to handle the new state.

window.addEventListener("message", function (event) {
  if (event.data === "browserbase-disconnected") {
    console.log("Message received from iframe:", event.data);
    // Handle the disconnection logic here
  }
});

Was this page helpful?

Session InspectorBrowser Extensions