PCからAndroid(実機)のデベロッパーツールを開く方法!

PCからAndroid(実機)のデベロッパーツールを開く方法!

この記事からわかること

  • PCからAndroid実機デベロッパーツール起動する方法
  • Chromeのデベロッパーツールとは?
  • KotlinアプリWebView表示するには?

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Chromeのデベロッパーツールとは?

Chromeに備わっているデベロッパーツールとは開発者向け機能の一つで、Webページを構成時のコンソール画面や、HTMLやCSS、JavaScriptなどのソースコード、ネットワーク状況などを表示することができるツールです。

Safariでは「Webインスペクタ」として提供されています。

デベロッパーツールの起動方法

デベロッパーツールを起動させるにはいくつか方法がありmす。

方法1

ブラウザで[F12]を押す

方法2

ブラウザで右クリック→検証をクリック

方法3

ブラウザメニュー(右上部)→その他のツール→デベロッパーツール

これで以下のような画面に切り替わりHTMLのコードやCSSのスタイルなどが確認できるようになります。

【PC】Chromeのキャッシュ削除方法

そのままHTMLやCSSの値を修正することも可能であり、変更した内容は表示されているページにすぐに反映されます。しかしこれは一時的なもので画面を再読み込みすると元に戻るため、デバッグ時やデザインの変更などを試験的な変更の際に活用できます。

またブラウザのキャッシュも「キャッシュの消去とハード再読み込み」をクリックすることで削除することができます。

AndroidのWebインスペクタを開く

Androidの実機がSafariやChromeで開いているページのデベロッパーツールをPCから開くことも可能です。そのためには実機が「開発者向けオプション」を有効にしている必要があります。有効にする方法は以下の記事を参考にしてください。

開発者向けオプション」の設定が済んだら実機とPCをUSBで接続した状態でブラウザからchrome://inspect/#devicesへアクセスするだけです。

PCからAndroid(実機)のデベロッパーツールを開く方法!

うまく接続されると端末名が表示され、実機で開いているタブの一覧が表示されます。その一覧の「inspect」をクリックすることでデベロッパーツールが起動します。

KotlinのWKWebViewを開く

Kotlinで開発したアプリでWebViewを使用している場合でも、同様の方法でデベロッパーツールを表示させることもできるようです。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index