XcodeのInstrumentsでHTTP通信をデバッグする方法


## はじめに

こんにちは。
今回は、Xcodeに同梱されているInstrumentsを使用してネットワークデバッグの方法、とくに開発時によくチェックするヘッダーやボディの確認手順を紹介します。

この記事を書こうと思ったきっかけは、Instrumentsでネットワークデバッグが可能なことを知っていましたが、具体的な使用方法、とくにヘッダーやボディの確認手順がすぐに分からなかったためです。[^1]

この記事がInstrumentsでネットワークデバッグを行いたい方の参考になれば幸いです。

[^1]: ネットワークデバッグを行うためのツールやライブラリはいくつかありますが、個人的にはツールでもライブラリでもできる限り公式が提供しているもので行い、基本的にサードパーティ製のものは必要最低限にしたいと思っています！

:::note warn
記事執筆時点で、この方法は物理デバイスのみで使用可能です。
シミュレーターでネットワークデバッグをしたい場合は、CharlesやProxymanなどのツールを試していただければと思います。（Instrumentsでもデバッグできればいいのですが…）
:::

## Instrumentsとは

[Wikipedia](https://en.wikipedia.org/wiki/Instruments_(software))によると、Instrumentsとは以下のように説明されています。

- Appleによって開発されたアプリケーションパフォーマンスアナライザー

- アプリ上で発生したイベント（CPUアクティビティやメモリ割り当てなど）をタイムラインで表示

- 計測したイベントは保存でき、何度も再生（エミュレート）できる

## 手順

今回は、Apple公式が提供している以下のサンプルアプリを使用して、ネットワークデバッグを行います。

<!-- markdownlint-disable MD034 -->
https://developer.apple.com/tutorials/sample-apps/memecreator
<!-- markdownlint-enable MD034 -->

:::note info
動作環境は以下のとおりです  

- macOS 15.1
- Xcode 16.1
:::

### 1. 対象のアプリをRun

:::note warn
前述の通り、以下のようにインストール先を物理デバイスにする必要があります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646568/94f45bd3-b90a-03b8-a935-37c9ecfcfd00.png" width="500">
:::

### 2. Network Activity Reportを開く

- XcodeのDebug Navigatorを開き、Networkをクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646568/e998c476-7e1b-7bee-a728-11b55c71a0d9.png" width="400">

### 3. Profileを開始する

1. 右上にあるProfile in Instrumentボタンをクリック
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646568/106a3001-9401-0d51-5330-4e362a655edf.png" width="600">

1. ProfileまたはRestartをクリック
    - 現在のセッションでデバッグしたい場合はProfile
    - 新しいセッションでデバッグしたい場合はRestart
      <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646568/76e0b548-3143-6eeb-649f-bf523474918b.png" width="300">

1. 以下のような警告が表示された場合、Record Anywayをクリック
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646568/9d1dd7be-6c02-d90a-d65f-87a78a319687.png" width="500">

### 4. 計測を停止する

- デバッグしたい通信を行った後、左上にある停止ボタン（■ボタン）をクリック

以下は停止後の画面です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646568/63a72438-123e-7e1a-1ebc-d1e0de3fdbfe.png" width="600">

### 5 Detail Areaの内容を切り替える

- Detail Areaの左下にある「Summary: Task Durations」を「List：HTTP Transactions」に変更する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646568/e7212c52-9aa3-2451-249e-27fbadf86ad3.png" width="500">

以下のように、Detail Area（Xcode下部）にHTTPメソッドやステータスコード、通信先などが表示されます
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646568/ff46c109-b8ff-6d9d-69f5-417bd5262ead.png" width="600">

:::note warn
もしDetail Areaが表示されない場合は、Xcode右上にあるDetail Areaの表示切り替えボタン<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646568/fee9b66a-4d83-a862-683d-f720886afa45.png" width="16">をクリックしてください

:::

### 6. 詳細の表示

- 5で表示されたリストから詳細を確認したい通信をクリック

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646568/310e20ee-525a-129a-ebb2-adfdc3348b35.png" width="600">

Detail Areaの右側にリクエストヘッダーやレスポンスヘッダーなどが表示されました！！

:::note warn
もしDetail Areaの右側に何も表示されない場合は、Detail Area右上にある表示切り替えボタン<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646568/72fc0f58-ef8d-b6ee-a74d-d6d49f9faed9.png" width="16">が青くなっているか確認してください
:::

## 参考資料

<!-- markdownlint-disable MD034 -->
https://developer.apple.com/tutorials/instruments?changes=__2

https://developer.apple.com/documentation/foundation/url_loading_system/analyzing_http_traffic_with_instruments?changes=__2
<!-- markdownlint-enable MD034 -->