USB接続したAndroid端末内のページをPCのDevToolsでデバッグする（なおRemote Devicesパネルはなくなりました）（ひとり DevTools Advent Calendar 2020 – 03日目） | Ginpen.com
3 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 最近は DevTools のエミュレート機能も強くなってはきましたが、まだまだ実機で確認する必要性は高いことと思います。PC と Android 端末を繋げて、端末内のウェブページを DevTools でデバッグできます。 DevTools で Android 内のページを開いた様子。画面も表示され、実機のものと連動する。 Android で開いているページをデバッグする 以下の手順で行います。 Android 側でデバッグ機能を許可する（初回） 端末を接続 対象を選択してデバッグを開始 Android 側でデバッグ機能を許可する（初回） 最初に 1 度だけ必要。 開発者モードを設定 Android 端末の設定で「ビルド番号」を表示 Android OS のバージョンによって場所が違
Chromeのリモートデバッギング / Virtual boxのローカル開発環境にあるアプリを確認する
Virtual Boxのローカル開発環境で動くアプリを、Google Chromeを通してAndroidの実機で見る&デバッグする方法。なんかややこしい…ので適当にイメージ図にしました。個人的にはVagrant使ってますが、使ってなくても同じです。 すでにVirtual boxで開発環境が構築されていて、アプリがブラウザで確認できる状態を前提としています。 また、Mac/PCとAndroidが同じWifiに接続されている必要があります。 また、開発中のアプリへは dev.your-app.com で接続すると過程します。 で、こんなことができて便利。 USB接続 普通にMac/PCとAndroidを繋ぎます。 パソコンのChromeを立ち上げて、chrome://inspect/#devicesにいきます。 AndroidのChromeも立ち上げると、下のようになってるはず。 プロキシの設
知らないと損!?Remote Debuggingが個人的にすごかった件。
小ネタです。 Androidを使いこなしている人や制作者にとっては知ってて当然らしいのですが、Androidを使い始めて1ヶ月半の自分にとっては目からウロコでしたよ。 ChromeでAndroidのデバッグができるモバイルをベースに制作する案件が多い方でこの設定を行っていない人はやった方が良いです。 Remote Debugging on Android with Chrome Googleがちゃんと紹介してくれていました。USBをつないで設定すれば、Androidのchromeで開いているページをPCのChromeと同期してDevelopper Toolsで表示してくれるようになります。以下のようなイメージです。 右がPCで少し切れていますが、Developper Toolsが開いているのがわかります。 設定は簡単まず、以下の条件が必要です。 Chrome 32以上Android 4.0
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
