コンピューター上のAndroid用ChromeでWebページをデバッグする方法

ブログの管理者として、Chromeを使用して個人のウェブサイトをデバッグし、テーマとCSSの変更がサーバーに永続的に実装される前に、どのように表示されるかを確認します。 お金を払ったことがないのはずっと前のことです モバイルページへの注意 スマートフォンを使って私のサイトにアクセスした訪問者はごくわずかだったからです。 しかし、今日では、訪問者のかなりの割合がスマートフォンやタブレットで構成されているため、そこでも見た目やプレゼンテーションに注意を払う必要があります。

パソコンのページの場合、Chromeの右クリックコンテキストメニューのオプションを使用して簡単にデバッグできますが、モバイルのページのオプションではありません。 それで、今日私はあなたがどのようにデバッグすることができるかをあなたに示します モバイルウェブページ Chrome forAndroidおよびAndroidSDKを使用しているコンピューター。

Webページのデバッグ

ステップ1： ダウンロードとインストール Android SDK コンピューターで実行します。 Javaがインストールされていない場合、インストーラーはJavaをダウンロードするように要求します。

コンピューターでAndroidSDKを初めて実行すると、いくつかのAPIとツールをダウンロードするように求められます。 Android SDKをインストールする唯一の目的がページのデバッグである場合は、以下を除くすべてのチェックを外してください AndroidSDKプラットフォーム-ツール をクリックします パッケージをインストールする ボタン。

ステップ2： Androidプラットフォームツールをインストールした後、開きます 実行ボックス（Windows + R） 実行します ％userprofile％\ AppData \ Local \ Android \ android-sdk \ platform-tools Androidプラットフォームのツールディレクトリを開きます。

ステップ3： Ctrl + Shiftキーを押しながらフォルダを右クリックして、そこでコマンドプロンプトを開きます。 [ファイル名を指定して実行]ボックスを使用してコマンドプロンプトを開き、手動でフォルダに移動することもできます。

ステップ4： それが終わったら、AndroidスマートフォンでChromeを開き、 設定—>開発者ツール [USBWebデバッグを有効にする]オプションをオンにします。

ステップ5： コマンドプロンプトでコマンドを実行します adb forward tcp：9222 localabstract：chrome_devtools_remote 正常に実行されたら、WindowsでChromeブラウザを開きます。

ステップ6： Android Chromeブラウザーでデバッグするページを開き、URLを開きます ローカルホスト：9222 パソコンのChromeブラウザで。

これで、Androidブラウザで開いているすべてのページがパソコンのサムネイルとして表示されます。 デバッグページを開くには、それぞれのWebサイトのサムネイルをクリックするだけです。 コンピューターで行ったデバッグの変更をAndroidで直接リアルタイムで追跡できます。

結論

このトリックは、多くのWeb開発者がスマートフォン用にWebページを最適化するのに役立つと確信しています。 私は自分のWebページを構成するためにこのトリックを使用しましたが、それは魅力のように機能しました。 ただし、コンピューターでスマートフォンのWebページをデバッグするためのより良い方法を知っている場合は、それを私たちと共有してください。