移動端H5デバッグツールガイド

開発とバグのデバッグのプロセスで使いやすいモバイルデバッグツールを持つことは、開発効率と問題の特定能力を迅速に向上させることができます。

序文#

モバイル Web 開発プロジェクトでは、モバイルデバイスの多様性、iOS システムの互換性、異なる Android デバイスの Webview の互換性の違いにより、PC ブラウザの開発者ツールでは問題を再現するのが難しいです。開発とバグのデバッグのプロセスで使いやすいモバイルデバッグツールを持つことは、開発効率と問題の特定能力を迅速に向上させることができます。以下は私が開発プロセスで使用したいくつかのデバッグツールです。

vConsole#

vConsole は、WeChat 公式プラットフォームのフロントエンドチームによってオープンソース化された、軽量で拡張可能なモバイルウェブページ向けのフロントエンド開発者デバッグパネルです。console ログの表示、開発、デバッグを容易にするために使用できます。

Github: https://github.com/Tencent/vConsole

オンラインデモ: http://wechatfe.github.io/vconsole/demo.html

特徴：

console ログの表示
ネットワークリクエストの表示
ページの要素構造の表示
Cookies、localStorage、SessionStorage の表示
JavaScript コマンドラインの手動実行
カスタムプラグイン

クイックスタート：

スクリプトのインポート：

<head>
  <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js"></script>
  <script>
    var vConsole = new VConsole();
  </script>
</head>

将来の拡張性のために、内でインポートすることをお勧めします：

npm install vconsole

import vConsole from "vconsole";

const vConsole = new VConsole();

eruda#

Eruda は、モバイルウェブページのフロントエンド向けに設計されたデバッグパネルで、DevTools のミニバージョンです。主な機能には、console ログのキャプチャ、要素の状態のチェック、XHR リクエストのキャプチャ、ローカルストレージと Cookie 情報の表示などがあります。

Github:https://github.com/liriliri/eruda

オンラインデモ: https://eruda.liriliri.io/

特徴：

ボタンのドラッグ、パネルの透明度の設定。
Console パネル：console ログのキャプチャ、log、error、info、warn、dir、time/timeEnd、clear、count、assert、table をサポート；プレースホルダーをサポート（% c カスタムスタイル出力を含む）；ログのタイプと正規表現によるフィルタリングをサポート；JavaScript スクリプトの実行をサポート。
Elements パネル：タグの内容と属性の表示；Dom に適用されるスタイルの表示；ページ要素のハイライトをサポート；画面を直接クリックして選択することができる；Dom にバインドされたさまざまなイベントを表示する。
Network パネル：リクエストのキャプチャ、送信データ、レスポンスヘッダ、レスポンス内容などの情報を表示する。
Resources パネル：localStorage、sessionStorage、Cookie の表示とクリア；ページの読み込みスクリプトとスタイルファイルの表示；ページの読み込み画像の表示。
Sources パネル：ページのソースコードの表示；HTML、CSS、JS コード、JSON データのフォーマット。
Info パネル：URL と User Agent の出力；カスタム出力内容をサポート。
Snippets パネル：ページ要素に枠を追加；タイムスタンプでページをリフレッシュ；カスタムコードスニペットをサポート。

クイックスタート：

CDN を使用する場合：

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

npm install eruda --save

<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>

vConsole と eruda は機能が似ており、モバイルウェブページに console パネルを組み込むものですが、使用方法は便利ではありません。たとえば、特定の要素をデバッグする場合、モバイルデバイスの画面の制約のため、操作が簡単ではありません。以下では、最も代表的なリモートデバッグツール 2 つを紹介します。

Weinre#

Weinre は、Web Inspector Remote の略で、リモートデバッグツールです。

Weinre は、リモートデバッグツールとして、次の 3 つのレイヤーに分かれています：

ターゲットページ（target）：デバッグ対象のページで、ページには weinre のリモート JS が埋め込まれています。
デバッグクライアント（client）：ローカルの Web Inspector デバッグクライアント。
デバッグサーバー（agent）：目標ページとデバッグクライアントの間で通信を確立するための HTTP サーバー。

クイックスタート：

インストール：

npm install -g weinre

コマンドラインで起動：

weinre --httpPort 8080 --boundHost -all-

Google Chrome（WebKit エンジン）を開き、http://127.0.0.1:8080/ を入力します。

次に、デバッグターゲットを追加します：

デバッグするページに以下のスクリプト（ip）を追加します：

<script src="http://your_ip:8080/target/target-script-min.js#anonymous" type="text/javascript"></script>

最後に、モバイルデバイスでデバッグページを開きます。モバイルデバイスはコンピュータと同じ WIFI に接続する必要があります。

最初に開いたhttp://127.0.0.1:8080 に戻り、「debug client user interface:」をクリックします。問題がなければ、デバッグターゲットが正常に追加されました。

注意：私はまだこのツールを使用したことがありませんので、詳細な使用ガイドについては、https://github.com/nupthale/weinre を参照してください。

Chii#

Chii は、Weinre と同様のリモートデバッグツールであり、最新の Chrome DevTools フロントエンドで Web Inspector を置き換えるものです。

Github：https://github.com/liriliri/chii

Chii は Weinre と比較して、デバッグインターフェースが Chrome の開発者ツールに変更され、より使いやすくなりました。

クイックスタート：

インストール：

npm install chii -g

起動：

chii start -p 8080

デバッグするページに以下のスクリプトを注入します：

<script src="//your_ip:8080/target.js"></script>

その後、localhost:8080 にアクセスしてページのデバッグを開始できます。

簡単ですね。モバイルで操作し、PC のデバッグパネルで要素とログの出力を確認できます。

まとめ#

以上がモバイルデバッグツールに関する情報です。同様のツールは他にもたくさんありますが、最も有名なものは上記のいくつかです。また、以下のような類似のツールもあります：https://github.com/wuchangming/spy-debugger ですが、まだ使用したことがありませんので、より使いやすいものがあれば、また共有します。