スマホで開いているWebページでJavaScriptを実行する方法！デベロッパーツール活用術

JavaScript, Web技術

2026.08.17

「パソコンのブラウザならF12キーで開発者ツールを開き、コンソールからJavaScriptを実行できるけれど、スマホ実機で開いているページでも同じようにスクリプトを実行したりデバッグしたりできないだろうか？」と思ったことはないでしょうか。

実は、スマートフォン（iPhone / Android）のブラウザでも、ブックマークレットや仮想インスペクタツールを活用することで、閲覧中のページに対してその場で任意のJavaScriptを実行したり、PCライクなデベロッパーツールを呼び出したりすることが可能です。

本記事では、手軽にスクリプトを実行する方法から、スマホ画面上に本格的な開発者ツールを表示させる方法、PCと連携したリモートデバッグまで分かりやすく徹底解説します。

スマホでスクリプト実行やデバッグが必要になる場面

スマホ実機上でのJavaScript実行やコンソール利用は、Web制作や日常のブラウジングにおいてさまざまなシーンで役立ちます。

スマホ特有の不具合調査：タッチ操作、画面サイズ、iOS Safari固有のレンダリングや挙動の検証
データや要素の確認：ページ内の特定のDOM要素、Cookie、LocalStorageの保持データの確認と書き換え
日常の操作補助・自動化：ログイン中のスマホ画面で特定のアクション（フォーム入力補助や長文テキスト抽出など）を実行
出先でのクイックテスト：PCを開かずにWebページの表示検証やスクリプト動作テストを実施

最も手軽！ブックマークレットでJavaScriptを実行する

専用アプリや機能拡張を導入せず、標準のSafariやChromeですぐにスクリプトを実行できるのが「ブックマークレット（Bookmarklet）」です。

ブラウザのブックマーク機能に、通常のURLではなく javascript: から始まるコードを登録しておくことで、現在開いているページ上でそのスクリプトを直接実行させることができます。

ブックマークレットの登録手順（iPhone / Android共通）

スマホブラウザのブックマーク登録画面では新規作成時にURLを自由入力できない仕様が多いため、以下の手順で登録するのが確実です。

任意のWebページを開き、ブラウザの共有メニューやメニューバーから「ブックマークに追加」を行います。
ブックマーク一覧から、先ほど登録したブックマークの「編集」画面を開きます。
ブックマーク名を分かりやすい名前（例：「JS実行」「タイトル取得」など）に変更します。
URL欄に入力されているアドレスをすべて削除し、実行したいJavaScriptコードを貼り付けて保存します。

基本のブックマークレット例

例えば、現在開いているページのタイトルとURLをアラート表示する基本コードは以下の通りです。

javascript:(function(){
  alert('タイトル: ' + document.title + '\nURL: ' + location.href);
})();

スマホ上での実行方法

登録したブックマークレットを実行する際は、スクリプトを実行したい対象ページを開いた状態で以下の操作を行います。

アドレスバーから実行：アドレスバーをタップし、登録したブックマーク名（例：「JS実行」）を入力すると、候補にブックマークが表示されるのでそれをタップします。
ブックマーク一覧から実行：ブックマークメニューを開き、登録した項目を直接タップします（Safariでは現在のアクティブタブ上で即座に実行されます）。

画面上に仮想デベロッパーツールを召喚する「Eruda」

「パソコンのDevToolsのように、複数行のコードを自由に入力して実行したり、エラーログの確認やHTML要素の検証（Elements）を行いたい」という場合に最適なのが、オープンソースのモバイル向けデバッグツール「Eruda（エルダ）」です。

Erudaを読み込むブックマークレットを実行すると、スマホ画面の右下に小さなフローティングボタンが出現します。タップすると、パソコンの開発者ツールそっくりのパネルが画面下部に展開されます。

Erudaで利用できる主な機能:

Console：JavaScriptコードの入力・即時実行、ログ（log, info, warn, error）の確認
Elements：HTMLツリーのインスペクト、CSSスタイルの確認・リアルタイム書き換え
Network：HTTPリクエスト/レスポンス、非同期通信（Fetch / XHR）のステータス監視
Resources：LocalStorage、SessionStorage、Cookieの閲覧・編集・削除
Info：ユーザーエージェント、画面解像度、パフォーマンス情報の確認

Eruda起動用ブックマークレットの登録

ブックマークのURL欄に以下のコードを登録しておくだけで、いつでもどのWebページ上でもErudaを呼び出せます。

javascript:(function(){var script=document.createElement('script');script.src='https://cdn.jsdelivr.net/npm/eruda';document.body.appendChild(script);script.onload=function(){eruda.init();};})();

使い方

調査・操作したいWebページを開きます。
アドレスバーやブックマークから上記で作成した「Eruda」を実行します。
画面右下に歯車（またはレンチ）のアイコンが現れるのでタップします。
「Console」タブを開き、実行したいスクリプトを入力して「Execute」を押すだけで、PCコンソール同様の操作が可能です。

開発者ツールが使えるモバイルブラウザを活用する

頻繁にスマホ上でスクリプト実行やコード検証を行う場合、最初からデベロッパーツール機能や拡張機能に対応したブラウザアプリを使うのもおすすめです。

Kiwi Browser（Android向け）

ChromiumをベースにしたAndroid用ブラウザです。PC版Chromeとほぼ同等の「開発者ツール」が標準内蔵されており、メニューからワンタップでPC同様のDevTools（Elements, Console, Sources, Networkなど）を開くことができます。また、ChromeウェブストアからPC用の拡張機能を追加することも可能です。

Orion Browser（iOS向け）

iOS向けでありながら、本格的なWebインスペクタ機能を標準搭載しているブラウザです。ChromeやFirefoxの拡張機能（TampermonkeyやViolentmonkeyなど）も動作させることができ、高度なスクリプト実行環境が手に入ります。

Safari機能拡張・Userscripts（iOS Safari向け）

iOS 15以降のSafariではWeb拡張機能がサポートされています。App Storeで入手できる「Userscripts」や「Stay」などの拡張機能を導入すれば、指定したサイト訪問時に自動的、あるいはメニューから手動で任意のユーザースクリプト（JavaScript）を実行させることができます。