Mobile Debugging: slapjs-mobile-debugger

Debugging in mobile browsers is painful. I built a tool to make it less so.

The Problem

Ever tried debugging JavaScript on a phone? No console. No DevTools. Just vibes and prayers.

Testing on simulators helps, but real devices have real quirks. You need to see what's actually happening.

The Solution

slapjs-mobile-debugger injects a visual console into your page.

How It Works

Include the script:

<script src="https://cdn.jsdelivr.net/gh/chrishacia/slapjs-mobile-debugger/debugger.min.js"></script>

Or install via npm:

npm install slapjs-mobile-debugger
import 'slapjs-mobile-debugger';

Now `console.log`, `console.error`, etc. appear in an overlay on the page.

Features

  • **Console output** - Logs, errors, warnings displayed visually
  • **Object inspection** - Expandable objects and arrays
  • **Error catching** - Uncaught errors captured automatically
  • **Minimize/expand** - Stays out of the way until needed
  • **No dependencies** - Vanilla JS, works anywhere

When to Use It

  • Testing hybrid apps (Ionic/Capacitor)
  • Debugging mobile web browsers
  • Client demos where you need to show logs
  • Any environment without DevTools access

Example

console.log('User data:', { name: 'Chris', id: 123 });
console.error('Failed to fetch', error);
console.warn('Deprecated API usage');

Each appears in the debug overlay, color-coded by type.

Not for Production

Remove it before shipping:

if (process.env.NODE_ENV === 'development') {
  import('slapjs-mobile-debugger');
}

Try It

Demo and docs: github.com/chrishacia/slapjs-mobile-debugger

It's a small tool for a specific pain point. Sometimes that's exactly what you need.

Back to Journal