はじめに
デプロイしたWEBサイトをスマホ(Android)で表示するとどうしても思ったデザインにならないので
どうにかしてスマホで開いているブラウザをDevtool(F12ツール)で見れないか調べてたらChromeなら見れました。
忘れないようにメモ。
Android 端末のリモート デバッグを行う
https://developers.google.com/web/tools/chrome-devtools/remote-debugging?hl=ja
手順
- スマホの設定から「開発者向けオプション」→「USBデバッグ」を有効にする
- スマホをPCにUSB接続
- chrome://inspect/#devices にアクセス
- 「Device」と「Remote Target#LOCALHOST」が表示される
- 初めての接続の場合はスマホのドライバがPCにインストールされる
- スマホ側にデバッグを許可しますか？的なポップアップが出るので許可を選択
- しばらくすると「Remote Target#LOCALHOST」の下にスマホ側Chromeで表示しているタブの一覧が表示される
気を付けること
手順通りならchrome://inspect/#devices にアクセスすると「Remote Target#LOCALHOST」には接続してるデバイスの情報が表示されるはずですが太字の部分が原因で表示されず戸惑いました。
おわりに
PCからDevtoolでCSSを見てみるとデプロイしたはずのデザインが反映されていませんでした。
結果的にただキャッシュが効いてしまっていただけでした。。
ということでブラウザの閲覧履歴の削除から「Cookieとサイトデータ」と「キャッシュされた画像とファイル」にチェックを入れて削除。
時間かかりそうだったので過去24時間にしましたがそれでも数分かかりました。