Help us understand the problem. What is going on with this article?

[Xcode] PonyDebuggerを使って快適デバッグ

More than 5 years have passed since last update.

PonyDebuggerというのを見つけました。
これ、導入したらとても捗りそう。

ざっくりとどんなものかと言うと、Google ChromeのDevToolsがiOSで使える、と考えると分かりやすいです。
Githubで掲載されている画像を見てもらうと分かると思います↓

イメージ

Viewがどういう状況にあるのかをDOMのように表示してくれます。
また、選択した要素をハイライトしてくれるので分かりやすいです。
(画像の右側の薄いブルーが乗ってるところ)

さらに便利機能として、出力されたHTMLにはviewの種類やクラス名などの他にframeも含まれています。
そして、なんとこれを編集すると実際にiOS側の状態もしっかりとアップデートされます。
なので細かい位置とかを調整するのにも使えそうです。

サーバのインストール

まず、サーバのインストールを行います。

curl -sk https://cloud.github.com/downloads/square/PonyDebugger/bootstrap-ponyd.py | \
  python - --ponyd-symlink=/usr/local/bin/ponyd ~/Library/PonyDebugger

ただ、自分の環境では途中で怒られました。その場合は以下のように手動でpipモジュールをインストールします。

pip install -U -e git+https://github.com/square/PonyDebugger.git#egg=ponydebugger --allow-external pybonjour --allow-unverified pybonjour

(おそらく)devtoolsのupdateも必要なので、ponydをインストールしたディレクトリに移動し、以下のコマンドでdevtoolsをupdateします。

ponyd update-devtools

これらについてはこちらのissuesを参考にしました。

サーバの起動

無事、サーバとクライアントの準備が整ったら、サーバを起動し、iOS側からサーバに接続します。
サーバの起動は以下のようにします。

ponyd serve --listen-interface=127.0.0.1

ちなみにIPアドレスを0.0.0.0にし、クライアントからの接続先をPCのものにすると実機でも同様のデバッグができるようです。

クライアント側(Objective-C側)の準備 - デバッグ項目を有効化する

いくつか用意されているデバッグの機能は、明示的に有効化する必要があります。
また、有効化した上でいくつかの指定をする必要があります。
#import <PonyDebugger/PonyDebugger.h>でインポートして、以下のようにそれぞれ設定します。

Viewの階層構造を確認する

HTMLのDOMのように、階層構造を表示します。
一緒に表示させるプロパティを指定して出力内容を変えることができます。

PDDebugger *debugger = [PDDebugger defaultInstance];

// 階層構造出力を有効化
[debugger enableViewHierarchyDebugging];
[debugger setDisplayViewAttributeKeyPaths:@[@"frame", @"hidden", @"alpha", @"opaque", @"backgroundColor"];

実際の出力は↓こんな感じ。
スクリーンショット 2014-04-14 22.26.54.png

CoreDataを確認する

PonyDebuggerは、CoreDataの状況を出力する機能も持っています。
今、どんなデータが保存されているのか、とても分かりやすく表示してくれます。

// CoreData Debuggingを有効化
[debugger enableCoreDataDebugging];

// 特定のManagedObjectContextをデバッガに登録
[debugger addManagedObjectContext:self.managedObjectContext withName:@"some name"];

たんに有効化しただけではダメで、最後のaddManagedObjectContext:withName:メソッドを利用して、確認したいCoreDataのコンテキストを登録する必要があります。

実際の表示は↓こんな感じ。
coredata-sample.png

Remote Loggingでオブジェクトの詳細を出力する

Google Chromeのconsoleのように、指定したオブジェクトの詳細をログとして表示する機能があります。
PonyDebuggerのログに出力するにはPDLogPDLogObjectsを利用します。

// テキストを出力
PDLog("Simple string log.");

// オブジェクトの詳細を出力
PDLogObjects(anyObject);

実際に出力された結果は↓こんな感じ。分かりやすい。
スクリーンショット 2014-04-14 22.10.43.png

Networkの状態を可視化する

これについては実際の動作が確認できませんでした。
sendSynchronousRequestを使っているからかもしれません。(デリゲートならうまくいくのかも)
確認できたら追記します。

edo_m18
現在はUnity ARエンジニア。 主にARのコンテンツ制作をしています。 趣味でWebGL/WebXRもいじってます。 Unityに関するブログは別で書いています↓ https://edom18.hateblo.jp/
http://edom18.hateblo.jp/
unity-game-dev-guild
趣味・仕事問わずUnityでゲームを作っている開発者のみで構成されるオンラインコミュニティです。Unityでゲームを開発・運用するにあたって必要なあらゆる知見を共有することを目的とします。
https://unity-game-dev-guild.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした