mobile-app-debugging について
mobile-app-debuggingは、iOS、Android、クロスプラットフォームのアプリを調査するためのリファレンススキルです。各プラットフォームのデバッグツールに加え、メモリ、ネットワーク、性能、一般的な問題の確認方法を扱います。
主な機能
- 01XcodeとLLDBによるiOSのデバッグ
- 02Androidのログとレイアウトの診断
- 03React Nativeのデバッグ手順
- 04メモリとネットワークの調査方法
- 05端末、性能、オフライン動作の確認
活用シーン
- 01iOSのクラッシュやメモリ問題の調査
- 02AndroidのANRやレイアウト異常の診断
- 03React Nativeの動作問題の調査
- 04アプリの性能とオフライン動作の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ secondsky/ claude-skills --skill mobile-app-debuggingインストール後、Claude Code で/mobile-app-debuggingを入力して読み込まれたか確認します。
詳細
モバイルアプリのデバッグ
iOS、Android、クロスプラットフォームフレームワークでモバイルアプリケーションをデバッグします。
iOS のデバッグ(Xcode)
// Breakpoint with condition
// Right-click breakpoint > Edit > Condition: userId == "123"
// LLDB commands
po variable // Print object
p expression // Evaluate expression
bt // Backtrace
メモリのデバッグ
- Memory Graph Debugger を使用して、保持サイクルを見つけます
- 解放後使用のバグを見つけるには、Zombie Objects を有効にします
- Instruments > Leaks でプロファイリングします
Android のデバッグ(Android Studio)
// Logcat filtering
Log.d("TAG", "Debug message")
Log.e("TAG", "Error", exception)
// Filter: tag:MyApp level:error
よくある問題
- ANR:メインスレッドのブロッキングを確認します
- OOM:Memory Profiler でプロファイリングします
- レイアウトの問題:Layout Inspector を使用します
React Native
// Remote debugging
// Shake device > Debug JS Remotely
// Console logging
console.log('Debug:', variable);
console.warn('Warning');
console.error('Error');
// Performance Monitor
// Shake > Show Perf Monitor
// Target: 60 FPS, <16ms per frame
ネットワークのデバッグ
// Intercept requests
XMLHttpRequest.prototype._send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
console.log('Request:', this._url);
this._send.apply(this, arguments);
};
デバッグチェックリスト
- シミュレーターだけでなく、実機でもテストします
- 古い機種でもテストします
- 低速な 3G ネットワークをシミュレートします
- オフラインモードをテストします
- 高負荷時のメモリ使用量を確認します
- 画面の回転とセーフエリアをテストします
- 60 FPS の目標を達成していることを確認します
パフォーマンス目標
| 指標 | 目標 |
|---|---|
| フレームレート | 60 FPS(16ms/フレーム) |
| メモリ | <100MB |
| アプリの起動 | <2 秒 |
コメント
Markdown 対応