Debugging actors run directly on the Apify platform can sometimes be a frustrating experience. No debugger support, no breakpoints and no chance to see what the actor is actually doing. This is especially true when crawling websites, where a quick glance over the website's UI could answer a lot of debugging questions.

Is your crawler failing to click on a button because it can't find it? Perhaps your browser is blocked and you're being served an 'Access Denied' page. But you can't be sure, because you don't really see what's going on and are just getting a cryptic error message.

Earlier, you probably would've gone back to the Source tab of the actor, added some console.log  and page.screenshot statements, rebuilt and rerun the actor. Fortunately, there is a better way! We're introducing Live View.

Live View

Live View aims to solve a common pain point of running actors in a cloud environment that could be summarized like this:

I have no idea what's going on, because I can't see what the actor is actually doing!

We've decided to tackle this problem head-on, by providing our users with a way to actually see right into the actor's operation. Let's look at an example.

Looking good so far, but that still doesn't help much with debugging. Let's explore further.

Now that you've seen it in action, we're going to explore how you can use this feature in your actors.

Implementation

Whether you're developing actors on the Apify platform or locally with the Apify SDK, the steps necessary to enable Live View in your actors are the same.

First, we need an actor. I will use the same one as in the examples above. You can find it here: https://www.apify.com/apify/example-live-view

There's nothing out of the ordinary in the actor, except this one line:

// Create crawler.
    const crawler = new Apify.PuppeteerCrawler({
        requestQueue,
        launchPuppeteerOptions: { liveView: true }, <--- THIS ONE
...

Yes! It's that easy. If you are using PuppeteerCrawler , all you need to do to make use of Live View is to add the liveView: true key, to launchPuppeteerOptions . You can read more about the options in the docs here: https://www.apify.com/docs/sdk/apify-runtime-js/latest#PuppeteerCrawler

If you're not using PuppeteerCrawler to launch Puppeteer, no worries, we've got you covered too.

const browser = await Apify.launchPuppeteer({ liveView: true });

If you would like to dig deeper, check out the PuppeteerLiveViewServer and PuppeteerLiveViewBrowser documentation.

How to use it

Okay, we've added Live View to our actor, but how would we actually use it. On the Apify platform, it's rather simple. Just start the actor and from the tabs below, select the last one, "Live View". If you're using the SDK, you will need to open a new browser tab and go to http://localhost:4321while the actor is running.

Once you see the client dashboard, notice the table. For each browser started with the liveView: true option, there will be a table listing all active pages, their URL and status.

By clicking on the looking glass icon, you will be brought to the page's details. A screenshot will be made and the page's HTML will be collected. You can inspect both using the available tabs. To get back to the dashboard, just click on the back icon in the top-left corner of Live View.

You might be wondering if the actor stops processing requests when you visit a details page and the answer is no, the actor will continue to work as usual under the hood, without blocking.

What's next?

While we believe Live View is a huge upgrade for actor inspection and debugging, it is still just a glimpse of what we have in store for you. We are planning to provide a full Chrome DevTools experience in Live View in the future, so stay tuned!

Did this answer your question?