How to test & debug Farcaster Frames

We assume you already know what Frames are, else learn what Frames are here.

How to locally test and debug Farcaster Frames aka Mini Apps

Install your local debugger:

npm install -g @frames.js/debugger@latest

then run it

frames

Now in your browser you should see the debugger at http://localhost:3010

In case you have errors and bugs in your Farcaster Framee you can use the local debugger to see what’s going on.

The following image shows the local debugger in action with the right side showing an error in our fc:meta metadata:

Warpcast Debugger

https://warpcast.com/~/developers/frames

Use cloudflare tunnels to get your localhost to the internet allowing you to test in Warpcast.

Hinweis

You can of course also use the Warpcast debugger for your production domains. On mobile the same link works in app to debug! Please debug on both web and mobile.

When looking at the Warpcast debugger below you see that there’s a Preview of your Frame where you can see how it will look when the link is shared.

Then you can click the button and see the Frame in action. There are also Demos which you can check out to see how Frames can be used.

At the bottom the “Launch Frame” section you can use to see different Splash Screens by changing the splash image url and splash background colors. Be aware that not setting these two means your Frame won’t show them when it loads, so test these with the preview -> clicking the button.