• メニュー
  • メニュー

【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版と同じような表示で調べることができるアプリを紹介しました。

iPhoneの場合は、有料ツールなどを使うともうちょっと楽にできたりしますので、今回の方法を試して足りない部分があったら補ってみてください。


有益情報も流しているのでツイッターもぜひフォローお願いします。


参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

2 コメント