概要
やり方をよく忘れるので、ついでにここにメモメモ。
たまに モバイル のページを作っていて、実際に表示させるとちょっと崩れていたりする場合
ChromeだとDevToolsでデバッグしたいですよね。iOSの場合だと Safari で。
どちらもリモートデバッグをサポートしていますので、やり方さえ覚えておけばサクッとできます。
Android (Google Chrome)
以下の手順でリモートデバッグを有効にします。
- Android端末でUSBデバッグを有効にする (設定でビルド番号を７回タップ）
- Android端末とPCをUSBで接続
- PC側のChromeでURL欄に
chrome://inspect/#devicesを入力 Discover USB devicesにチェックをつける（多分デフォルトで付いているかも）- Android 側のChromeでページを開く
- PC側の方にAndroid側のページが一覧表示されるので
inspectというリンクをクリック
これで DevTools が表示されます。あとはいつもと同じ感覚で使えます。
モバイル側で表示されているWebページが左側に表示されるのでわかりやすいです。
iOS (Safari)
以下の手順でリモートデバッグを有効にします。
- iPhoneをUSBで接続
- PC側のSafariを起動して設定メニューを表示
- 詳細タブの一番下に開発メニューを表示するチェックボックスがあるのでチェックをつける
- iPhoneの設定アプリを開いてSafariの設定を表示
- WebインスペクタをONにする
- iPhone側のSafariでページを開く
- PC側のSafariで開発メニューの中に対象のiPhoneが見えるのでそのサブメニューからデバッグしたいURLを選択
これで Safariの開発ツールが表示されます。後はいつもと同じ感覚で使えます。
参考情報
過去の記事については、以下のページからご参照下さい。
- いろいろ備忘録日記まとめ
サンプルコードは、以下の場所で公開しています。
- いろいろ備忘録日記サンプルソース置き場
