F12 | Inspect Element, Console

F12 Browserを作ったのは、ちょっとしたモバイルレイアウトやAPI呼び出しを確認するたびに、いちいちスマホをケーブルでPCに接続しなければならないのが面倒だったからです。

念のため申し上げておきますが、これは趣味のプロジェクトで、ちょっとした確認や学習、遊びで使うためのものです。デスクトップ版のChrome DevToolsや、職場での本格的なリモートデバッグの代わりになるものでは決してありません。

F12 Browserでできること：

ページ上でJavaScriptコードを実行して、動作を確認できます。

HTMLツリーをクリックして、クラスやスタイルを確認したり、要素をハイライト表示したりできます。

リアルタイムのfetchやXHR呼び出しを監視して、ステータスコードを確認したり、JSONデータを読み取ったりできます。

ネットワークリクエストを開いて、ヘッダーやクエリパラメータを確認できます。

ページに読み込まれた画像や動画などのメディアリンクを表示できます。

コンソールログやエラーを確認できます。

あなたが学生の方、モバイルサイトの内部動作に興味がある方、あるいはデスクを離れている間にAPIの簡単な動作確認をしたい方であれば、このツールがお役に立てば幸いです。