皆さんこんにちはFascodeNetworkのブログスケジュール管理などを行っているなおこです。
先月から始めたウェブエンジニアの仕事が忙しすぎてやばいのですが今回もブログを書いていきたいと思います!
そんな私がウェブアプリのデバック時に便利だったパソコンのGoogle ChromeとAndroidスマホを利用した機能Inspect with Chrome Developer Toolsをお伝えしたいと思います。
特にlocalhostのみしか接続できないような制約があるときなどにめっちゃ活躍します！
今回のブログで使うスマートフォン
今回の検証などに使うスマートフォンは以前レビューした中華スマホ、OPPO Reno 3Aを使用します。
バッテリー性能が良くて安いスマホなのでおすすめですよ～
今回使うPCスペックや実行環境
- OS : Alter Linux(実質Arch Linux)とWindows10Proデュアルブート
- MB : B450M Steel Legend
- CPU : AMD Ryzen 5 5600x
- GPU : NVIDIA GTX 960
- RAM : 32GB
- HDD : 4TB
- SSD : 256GB m.2 (２０２２/９/１５以降のブログには搭載)
事前にadbコマンドを導入しておく
事前に下記の方法でadbコマンドをインストールしておきます
USBデバックを有効にする
スマートフォンのUSBデバックを有効にするには開発者オプションを有効にする必要があります。
一般的なAndroidやAndroid派生のOSではビルド番号を連打すると開発者オプションを有効化することができます。
Color OSの場合はAndroid派生のOSなので端末情報→バージョン→ビルド番号を連打で開発者オプションをオンにできます。
開発者オプションを有効にできたら、設定に戻り→その他の設定→開発者オプション→USBデバックをオンにする。これでUSBデバックを有効にすることができました。
chrome://inspect/#devicesにアクセスして使ってみる
次にパソコンの Chromeで chrome://inspect/#devices にアクセスします。↓コピペ用
chrome://inspect/#devices
ページを開くと上記のような画面になります。スマホとパソコンをデータ通信対応ケーブルでつなげてPort ForwardingをクリックするとUSBデバックの許可を求められるので許可を押します。
そうするとポートフォワーディングができスマホ側からアクセスする際にlocalhostとしてアクセスすることができます。
このlocalhostとしてアクセスできるのはvueのwebアプリ開発などにかなり便利です！
vue.config.jsでdisableHostCheckを入れるのもいいかもしれませんが推奨はされてないので
Inspect with Chrome Developer Toolsを使うメリットやデメリット
Inspect with Chrome Developer Toolsを数日デバックで使って感じたメリットやデメリットをまとめたいと思います。
メリット
- ポートフォワーディングを行うことができる
- localhostでアクセスできる
デメリット
- USB繋がないデバックが安定せずしずらい
adbには同じネットワークであればUSBに繋がずに接続できる機能がありますが私の環境では安定せずUSBを繋いでいないときつい感じでした。
実機からlocalhostでアクセスできるのは割とガチで助かったのでlocalhostでアクセスしたいんじゃって人は使ってみてはいかがでしょうか？
最後に
そんなかんじで今回はInspect with Chrome Developer Toolsを使ってデバックを行う機会があったのでやり方の手順をメモ代わりにBlogにしてみたよという話でした。
それでは次の担当ブログでお会いしましょうばいばい～
コメント