ブラウザが提供する開発者ツールは、多くの Web 開発者が常に使用するものです。 それらを使用して、コードを検査したり、エラーについて教えたり、さまざまな監査を実行したりすることができます。 また、Chrome の DevTools は、モバイル デバイスに合わせて表示サイズを調整する方法を提供することができます。 この機能は、多くの開発者が頻繁に使用しています。 この機能の便利な点は、人気のあるモバイルデバイスの中から選択すると、DevToolsがそのデバイスと全く同じ画面サイズに調整してくれることです。 このようにして、モバイル デバイスのサイズで Web ページをテストおよびデバッグできます。

Chrome DevTools は DOM 要素と CSS 属性を調べるだけでなく、DOM 属性も調べることができるようになっています。 ネットワーク リクエストの検査や、アクセス ストレージ関連のパラメーターにも使用することができます。 さらに、JavaScript コードを直接実行し、コンソールからメッセージを確認することも可能です。 すごいと思いませんか。

さて、あなたが携帯電話を手にしていて、特にこのデバイスで特定の問題が起こり、DevTools と上に例示した方法では問題を再現できないとします。 あるいは、モバイルブラウザに特定のAPIがあり、それをデバッグしたい状況を想像してください。 この場合、携帯電話で DevTools が必要になります。

DevTools を使用して、Android デバイス上の Blink ベースのブラウザー (Samsung Internet など) をデバッグできることをご存知ないようですが、デスクトップ DevTools も同様に使用できることをご存知でしょうか。

これを行うには、まず、Android デバイスで「USB デバッグ」を有効にし、コンピューターに接続します。

さて、ここからが本題です。 “chrome://inspect “のURLにアクセスし、”Devices “をクリックします。 万歳! モバイル デバイスのアクティブなブラウザー セッションのリストが表示されます。

[検査] をクリックすると、コンピューターでのブラウザー ビューが表示されます。 これで、DevTools を使用して任意の操作を行うことができます。

DevTools メニューからリモート デバイスを使用しても、モバイル デバイスのリストにアクセスすることが可能です。