【iphone/Android】スマホしかない環境でコンソール(開発者ツール)を開く方法

スマホ(iphone/Android)のみでブラウザで表示しているページのコンソールを開いて、HTML構造やCSS、スクリプトの詳細などの要素/エレメントを調べる方法をご紹介します。

パソコンだと検証やデベロッパーツールで簡単に調べられますが、スマホだと簡単に表示することができませんので、ちょっとしたテクニックが必要です。

また、iPhoneやAndroidのサイトをパソコンからデバッグするという方法はたくさんのサイトで説明があり、アンドロイドやiPhoneのサイトのデバッグやアプリを開発するときに有効な手段です。ここではこの方法は紹介しません。

今回はあまり機会はないかと思いますが、スマホしかない状況でコンソールを調べたい時に役立つ方法になります。

スマホでコンソール(開発者ツール)を開いて要素を調べる方法について

有料アプリもご紹介しますが、今回は無料でできる方法を紹介したいと思います。

iPhoneの場合

iPhoneの場合は少しややこしい手順を踏む必要があります。

ショートカットを許可する

まずiPhoneの設定でショートカットを選択します。

「信頼されていないショートカットを許可」をオンにします。一度もショートカットを使ったことがないとオンにすることができずボタンが押せません。

だから、何でもよいのでショートカットを作成して起動すると、灰色になっていて押せないボタンが動かすことができるようになります。

ショートカット許可して、以下のアプリを取得します。

ショートカット：https://apps.apple.com/app/shortcuts/id915249334

ショートカットをダウンロードする(console)

以下のリンクからコンソール(開発者ツール)を表示させるための、Consoleショートカットの入手をクリックしてショートカットを追加します。

コンソール(Console) : https://www.icloud.com/shortcuts/65ca85740764416c837449518011d051

ショートカットを追加すると以下のようになります。erudaというJavascriptがショートカットで実行できるようになります。

ショートカットが追加されるとマイショートカットにConsoleが追加されていることが確認できます。

iPhoneのコンソール(開発者ツール)の使い方

iPhoneでのコンソール(開発者ツール)について説明します。

safariなどのブラウザで開き、お気に入りから登録したショートカット「Console」をクリックします。

真ん中の矢印が出ているアイコンをクリックします。

上の画像と下の画像がちょっと違いますが、タップすると「Console」というメニューが追加されています。

許可の要求がでたら許可してあげます。

すると右下に歯車のようなアイコンが表示されます。PCで扱うように調べたい要素を、指でタッチして選択することもできます。

もちろん何も選ばなくてもいいですが、調べたい要素を選んで右下のアイコンをクリックするとその要素のCSSなどを調べることができます。

コンソール(開発者ツール)が開くと、パソコンで開いたときのようなメニューが表示されます。

Elementを開くと以下のように要素のCSSを見ることができます。

Sourcesを選ぶとHTMLのソースコード見ることができます。正直スマホでみると小さくて見れてどうするの？レベルですが…。

Androidのコンソール(開発者ツール)の使い方

Androidスマートフォンの場合は、iPhoneより幾分簡単です。というかかなり。

Androidの場合、HTMLやCSSなどを調べることができるたくさんのアプリがありますが、iPhoneやPC版Chromeと同じような形で使用できるアプリをご紹介します。

☆の評価は低いんですけど、見やすいと思うんですよね。

Droid Web Inspectorを利用する

インストールはこちら →　Droid Web Inspector

Droid Web InspectorをGoogle Playアプリからインストールします。

アプリを起動します。

何も表示されないブラウザが起動するので、「Enter Url」の部分にHTMLやCSSを調べたいURLを入力します。試しに、このホームページの「ラップトップレナー(https://laptopreneur.net)」を入力してみます。

ちなみに、このURLは推測や履歴などに対応していませんので、ちゃんとURLを入力しないとだめです。

Droid Web Inspectorを使うとわかりますが、上で紹介したiPhoneのスタイルとPC版ChromeやEdgeと同じ感じで使えます。

スマホだとだいぶスペースが小さいですが、上部にホームページ、下部にインスペクタが表示されます。

Droid Web Inspectorでもパソコンと同じようなスタイルでホームページの要素を閲覧することができます。

ただしストリーミング動画のサイトの時に、PCで閲覧するとNetworkで読み込む動画などがわかりますが、このDroid Web Inspectorではうまく動作がしないようです。このサイトでもm3u8などのストリーミング動画のダウンロードURLを作成する方法などを解説していますがスマホだけでは少し難しいようです。

まとめ：

iPhoneとAndroidのスマホでブラウザの開発者ツールやデベロッパーツールと呼ばれるコンソールを開く方法を解説しました。

Google Chromeはあってもスマホ版とPC版では違うので同じコマンドやメニューがないんですよね。今回紹介した方法はあくまでPC版と同じような表示で調べることができるアプリを紹介しました。