MOBILE_DEV_TIPS

Ver en Git

---

Mobile Development Tips & Tricks

Keyboard Shortcuts

Android Emulator

• Cmd+M / Ctrl+M - Open dev menu
• Cmd+R / Ctrl+R - Reload (from dev menu)
• Cmd+D / Ctrl+D - Toggle debug mode

iOS Simulator

• Cmd+R - Reload app
• Cmd+K - Toggle keyboard
• Cmd+Shift+H - Home button
• Cmd+Shift+H+H - App switcher

Fast Development Workflow

1. First time setup:

   npm run dev:mobile -- --platform=android --config=auravantbeta
   • Wait for Android Studio/Xcode to open
   • Click "Run" once
   • Keep IDE open

2. Make changes:

   • Edit code in your editor
   • Save file
   • App reloads automatically (2-5 seconds)

3. If auto-reload fails:

   • Press Cmd+M → Reload (Android)
   • Press Cmd+R (iOS)

Performance Tips

Faster Rebuilds

• Only edit files in src/ - native changes require full rebuild
• Use eval-source-map for faster webpack builds (already configured)
• Close unused apps to free memory

Network Issues

• Ensure device and computer are on same WiFi
• Check firewall allows port 8080
• Use USB debugging if WiFi is unstable

Memory Management

• Restart emulator if it becomes slow
• Close other Android Studio/Xcode projects
• Use npm run build:mobile for final testing

Common Issues

"Cannot connect to dev server"

# Check your local IP
ifconfig | grep "inet " | grep -v 127.0.0.1

# Verify webpack is running
curl http://YOUR_IP:8080

# Restart with fresh config
Ctrl+C
npm run dev:mobile -- --platform=android --config=auravantbeta

"App crashes on launch"

# Clear app data
adb shell pm clear com.auravantbeta  # Android
xcrun simctl uninstall booted com.auravantbeta  # iOS

# Reinstall
npx cap sync android
npx cap sync ios

"Changes not reflecting"

1. Check webpack console for errors
2. Hard refresh: Cmd+M → Reload
3. Clear cache and restart:

   rm -rf node_modules/.cache
   npm start

"Module not found after adding dependency"

# Stop dev server (Ctrl+C)
npm install
npx cap sync android  # or ios
npm run dev:mobile -- --platform=android

Pro Tips

Multiple Configs

Switch between configs without rebuilding:

# Development
npm run dev:mobile -- --platform=android --config=auravantbeta

# Testing another config
Ctrl+C
npm run dev:mobile -- --platform=android --config=ag

Specific Device

# List devices
npm run list:devices

# Target specific device
npm run dev:mobile -- --platform=android --device=emulator-5554

Debug Console

• Android: adb logcat | grep -i "chromium"
• iOS: Safari → Develop → Simulator → Your App

Quick Reset

# Full reset (if things are broken)
Ctrl+C  # Stop dev server
rm -rf dist android/app/build ios/App/output
npm run dev:mobile -- --platform=android --config=auravantbeta

Comparison: Dev vs Build

Action	Dev Mode	Build Mode
Initial setup	~30s	~5-10min
Code change	2-5s	5-10min
Asset change	2-5s	5-10min
Config change	30s	5-10min
Native change	Full rebuild	Full rebuild

Best Practices

1. Keep dev server running - Don't restart unless necessary
2. Use version control - Commit before major changes
3. Test on real device - Emulators don't catch everything
4. Monitor console - Watch for errors in webpack output
5. Clean builds periodically - rm -rf dist once a day

Need Help?

• Check webpack console for build errors
• Check device console for runtime errors
• Verify capacitor.config.json has correct server URL
• Ensure all dependencies are installed: npm install