👷‍♂️

あれ？iPhoneでDevTools使うのどうやるんだっけ？

に公開
iPhone
Test
DevTools
tech

iPhoneでDevToolsを使うために

なぜ必要だったのか？

Staging環境にデプロイ後、実機上でconsoleを使いたかったから

ググるまたはAIに投げる

ちなみにググったのはなんかGPTの調子が悪かったから
結果、調子悪かったの治ったあとに聞いた回答が近道だったw
やはり、AIツールは頭脳明晰なアシスタントって立ち位置ですね

やり方は３種類あった

  1. Mac+iPhoneをケーブルで接続してSafariWebInspectorを使う

https://developer.apple.com/documentation/safari-developer-tools/develop-menu

  1. iPhoneのブラウザ拡張機能で対象のインストールして使う

https://apps.apple.com/us/app/web-inspector/id1584825745?utm_source=chatgpt.com

  1. クラウド実機サービス（BrowserStack）を使う

https://www.browserstack.com/guide/use-safari-devtools-to-view-mobile-web-pages?utm_source=chatgpt.com

なんのためにこれを実現させたいか？を元に選定する
技術者の端くれ者として全て試したい思いが込み上げるが
それは時間の無駄なので必要最低限で進むことを言い聞かせる

採用したのは１番

理由として
Appleが提供している機能なので安定、信頼が高い
また、普段使っているChromeDevToolsとほぼ同じインターフェイス（これって大事よね）

2番はiPhone上で見えるようだけど、画面小さすぎて開発に向かないと思った
iPadくらいのサイズならいいかもしれないがケースバイケースですね

3番は無料で始められる、結果使いたいところが有料になったりとか嫌だった
ちなみに3番はPlaywright/Cypress/Autifyなどとは毛色の違うもので、BrowserStackが手動テストやデバッグに強みがあるのに対し、Playwright/Cypress/Autifyは自動テストフレームワークという理解です
双方を組み合わせるとより強力なQAツールとして機能するらしいのでいつか使ってみたいと思う

前提環境

  • iPhone(iOS26.0.1)
  • Mac(macOS Tahoe ver26.0)
  • Safari(Version 26.0 (21622.1.22.11.14))
  • CtoCケーブル （有線接続が安定）

https://support.apple.com/guide/deployment/about-software-updates-depc4c80847a/web

https://www.engadget.com/apps/ios-26-is-official-apple-changes-from-version-numbers-to-years-for-its-os-names-172129166.html

https://www.macworld.com/article/1659017/ios-versions-list.html

HowTo

  1. iPhone側の設定

    • 設定 → Safari → 「詳細」へ

    • 「Webインスペクタ」を オン にする

  2. Mac側の設定

    • Safari → 設定 → 詳細 →「メニューバーに“開発”メニューを表示」をオンにする

  3. iPhoneをMacにCtoCケーブルで接続

    • iPhoneでSafariを開き、調べたいWebページを開く

  4. Mac側でSafariを開く

    • メニューバーの「開発」→「あなたのiPhone名」→該当ページを選択
    • チェックをいれるとMacのSafariにiPhoneのWebページがDevToolsとして表示

やりたいことが実現!

実機上でDevToolsを使うことができました!

おしまい

アウトプットの重要性を日々感じつつも後回しにしていたので
少しずつ、吐き出していこうと思い書きました

しかし、書き出すの時間かかるw
でも、アクティブリコールってことですね

また、誰かの助けになったらとても嬉しいです
ではでは

Discussion