スマホ(Android)をPCにつないでブラウザの要素の検証をする
はじめに
デプロイした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時間にしましたがそれでも数分かかりました。
Author And Source
この問題について(スマホ(Android)をPCにつないでブラウザの要素の検証をする), 我々は、より多くの情報をここで見つけました https://qiita.com/atmospheri/items/125c8c8772d32242eb38著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .