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@latestthen run it
framesNow 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.
NOTE: Cloudflare Tunnels can be spun up without having an account!
To use cloudflare tunnesl as they have a generous free tier you can follow this docs page. Cloudflare earns a lot of money on being a huge backbone of the internet, that’s why they can offer such extensive free tiers.
On mac to install cloudflared and expose localhost:3000:
brew install cloudflaredcloudflared tunnel --url http://localhost:3000
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.
On mobile this order may be flipped! You want to use the section where you can change splash screen too, else it likely uses your production domain unless you changed the manifest too!
TODO: Mobile debugging