【導入実績300社以上】AWS 構築・運用保守サービス

【導入実績300社以上】AWS 構築・運用保守サービス

【サーバー管理不要】WordPress専用クラウド『WebSpeed』

【サーバー管理不要】WordPress専用クラウド『WebSpeed』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【コミュニケーションアプリ開発】LINE アプリ開発サービス

【コミュニケーションアプリ開発】LINE アプリ開発サービス

【ECサイト構築】Shopify カスタムアプリ開発サービス

【ECサイト構築】Shopify カスタムアプリ開発サービス

【音声アプリ開発】Twilio アプリ開発サービス

【音声アプリ開発】Twilio アプリ開発サービス

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【CPU】AMD EPYC 技術検証(PoC)サービス

【CPU】AMD EPYC 技術検証(PoC)サービス

【Webシステム / サービス開発】SAKARAKU Lab(セカラクラボ)

【Webシステム / サービス開発】SAKARAKU Lab(セカラクラボ)

【取材記事】サーバー系企業ビヨンドが サーバーサイドエンジニアを募集中

【取材記事】サーバー系企業ビヨンドが サーバーサイドエンジニアを募集中

【対談記事】「やっぱクラウド移設っていいですよね」マイネット × ビヨンド エンジニア対談

【対談記事】「やっぱクラウド移設っていいですよね」マイネット × ビヨンド エンジニア対談

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

Androidのブラウザ(Chrome)をPCで表示させる方法

開発の長谷です。

今回はChrome Developper Toolsを使用して、Android端末のブラウザ(Chrome)をPCで表示させ、
デバッグなどを行う方法についてご紹介していきたいと思います。

前準備

Android端末の設定

1.「設定」を起動

2.「開発者向けオプション」をタップ

3.「開発者向けオプション」をONにし、「USBデバッグ」にチェックを入れる。

Androidの設定は以上になります。

接続方法

1. PCでChromeを起動しchrome://inspectを開く

↓こんな画面になります

2. 先ほど設定したAndroid端末をPCに接続する

3. Android端末でChromeを起動し、デバッグしたいURLを開く

↓するとRemote Targetの下に開いているURLが表示されました。

4. 「inspect」をクリック

↓新しいウィンドウが開き、Androidの画面が表示されました。

デベロッパーツールなので、HTML,CSS,JavaScriptの編集も可能です。

また表示されているAndroid画面をクリックやドラッグすることで、
AndroidのブラウザをPCから操作することもできるのですごく使いやすいです。

スマホでしか表示できないサイトなどをデバッグしたいときに、
このツールは大変便利なのでぜひ使ってみてはいかがでしょうか。

以上です。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
0
読み込み中...
0 票, 平均: 0.00 / 10
879
facebook twitter はてなブックマーク

この記事をかいた人

About the author

長谷竜弥

新卒にて株式会社ビヨンドに入社。

Webシステム開発(Webサービス・デジタルコンテンツ・業務管理システム などのブラウザで動くサービス、システムの開発)や、ゲームAPI(アプリゲームとの通信部分のプログラム開発)を行っている。

また、Shopify のプライベート / カスタムアプリの開発も行っている。

元々は大阪オフィスに勤めていたが、2019年に横浜オフィスに転勤。
趣味は野球 / カラオケ / アニメ