How to test & debug Farcaster Mini Apps
We assume you already know what Mini Apps are, else learn what Mini Apps are here.
How to locally test and debug Farcaster 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 Mini Apps 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/
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 cloudflared
cloudflared tunnel --url http://localhost:3000
When looking at the Warpcast debugger below you see that there’s a Preview of your Mini App where you can see how it will look when the link is shared.
Then you can click the button and see the Mini App in action. There are also Demos which you can check out to see how Mini Apps can be used.
At the bottom the “Launch Mini App” 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 Mini App 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