Many use cases require direct interaction with the running Session or can benefit from direct debugging from the local Browser. This guide covers getting a debuggerFullscreenUrl to add a human in the loop of an AI Agent’s flow.

​
Getting Session Live Debug URLs

Getting Session Live Debug URLs is achieved by using the Session Live Debug URLs endpoint:

1

Start a Session

Use the Session API to create a new session.

2

Request a debug connection URL

Then, use the Session API debug endpoint to get the debuggerFullscreenUrl.

3

Open the Session from your local Chrome browser

Finally, open the debuggerFullscreenUrl URL in Chrome to start taking action on the session.

​
Unblock complex UI scenarios by giving control to the end-user

While Browserbase helps deal with common scraping problems (anti-bot mechanism, captchas, reliably download files), some scenarios remain hard to automate for technical or data privacy reasons.

Dealing with iframe can be challenging as the loaded content might be external and could change without notice, adding another fold of scraping complexity. Interacting with iframes can be delegated to the end user by forwarding the remote control URL.

Dealing with user credentials is another complex scenario as the end-user might prefer to fill out its credentials directly on the website instead of storing them elsewhere.

Let’s look at the last scenario with an AI Agent for Amazon wishlists.

​
Pause our automation while the user enters its credentials

Our AI Agent tries to find the best prices for items on a user’s Amazon wishlist; below is the retrieveAmazonWishlistItems() function responsible to gather the items:

async function retrieveDebugConnectionURL(sessionId) {
  const response = await fetch(
    `https://www.browserbase.com/v1/sessions/${sessionId}/debug`,
    {
      method: "GET",
      headers: {
        'x-bb-api-key': `${process.env.BROWSERBASE_API_KEY}`,
      },
    }
  );
  const json = await response.json();
  return json.debuggerFullscreenUrl;
}

async function retrieveAmazonWishlistItems(sessionId, page) {
  await page.goto(
    `https://www.amazon.com/ap/signin?openid.pape.max_auth_age=0&openid.return_to=https%3A%2F%2Fwww.amazon.com%2F%3Fref_%3Dnav_signin&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.assoc_handle=usflex&openid.mode=checkid_setup&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0`,
    {
      // let's make sure the page is fully loaded before asking for the live debug URL
      waitUntil: "domcontentloaded",
    }
  );

  const debugRemoteURL = await retrieveDebugConnectionURL(sessionId)

  await sendCredentialsPageUrlToUser(debugRemoteURL)

  // now, let's wait for the user to complete the credential flow

  await page.waitForSelector('#nav-flyout-wl-items > div > a:nth-child(2) > span', {
    timeout: 300000 // give 5 minutes,
    visible: false
  })

  // Once we are here:
  // 1. navigate to https://www.amazon.com/hz/wishlist/ls
  // 2. collect items and navigates pagination
}

Was this page helpful?