Nine Lives of Mobile Dev: Why We Built DappKitty

Building dapps sounds glamorous. Blockchains, wallets, Web3 wizardry. But let's be real: sometimes it's just you, a stubborn mobile device, and a console log you can't even see.

This is the story of how DappKitty was born. Not in a sleek product meeting, but in the trenches of real-world Web3 development.

DappKitty on npm | GitHub

Problem 1: The Environment Dance

I was deep in a project that needed to integrate with Phantom wallet. Specifically, its core functionality, which only works over HTTPS.

So there I was, switching between:

• http://localhost for local testing
• https://localhost for mobile tests
• my production endpoint

The result? A lot of:

// TODO: remove before deploy!!!
    const API_URL = 'http://localhost:3000';

And a lot of regrets.

I needed a better way to switch environments. Something fast, flexible, and most importantly, automated.

Solution: A Simple Query Param Switcher

Enter DappKitty. I made it so you can add ?env=local or ?env=dev to your URL and override window variables like API_URL, without ever touching your source code.

But what if someone forgets and this sneaks into production? I added a liveDomain config. If the app loads on that domain, DappKitty quietly does nothing. Problem solved.

Problem 2: Mobile Logging Madness

With Phantom working and my dev environment fully HTTPS, I was ready to test on a real phone.

That's when I hit the mobile console problem.

Safari's developer tools only connect after you've already loaded the page. But Phantom opens new windows via redirects, and the logs are gone before you can even blink.

Desperate, I started doing what any dev-cat hybrid would do. I printed logs directly into the DOM. It was messy. Ugly. But useful.

Solution: LogKitty

I needed something lightweight, stylish, mobile-friendly, and framework-agnostic.

So I built LogKitty, a browser-based console that prints your logs inside a clean collapsible panel. It supports:

• Log levels (debug, info, warn, error)
• Console output mirroring
• window.onerror catching
• fetch request tracking

In short, everything you'd expect from a modern console, but visible on your phone. Naturally, it had to be a cat.

DappKitty: The Wrapper

Now I had two tools. A dev environment switcher, and a mobile-friendly logger. I bundled them into DappKitty, a wrapper that lets you:

• Run fully simulated production on localhost
• Switch environments with a simple query param
• Log mobile browser activity in style
• Avoid risky hardcoded .env values
• Catch bugs without plugging into a debugger

And of course, it's all wrapped up in a clean, cat-themed package.

Extra Features (Because Why Not)

While I was at it, I added a few bonus touches:

• Config-based window overrides, so you can define per-environment globals
• Fetch event tracking, to surface network requests in real time
• Uncaught error reporting via window.onerror
• Light and dark mode themes using clean CSS variables
• Production domain protection, so none of this runs when it shouldn't

Whether you're building in React, Vue, or Vanilla JS, DappKitty just works.

Who It's For

Any developer who's struggled with mobile dapp testing. Any team that's tired of juggling .env files and environment switches. And especially, my own team. Because I know they've felt this pain too.

With DappKitty, you don't just build faster. You build smarter. And yes, a little cuter.

Try It Yourself

• NPM Package
• GitHub Repo