モバイル向けWebページのデバッグについて

| コメントをどうぞ

スマートフォンやタブレットにもSafari、 Android Browser(Android 標準ブラウザ)、Chorme、IE、FireFoxなどたくさんのブラウザがあります。作成するWebページをそれらのブラウザに対応させるとなると、ブラウザ間でのCSSの動作や表示の違いを修正するために何かと実機でのデバッグ作業が必要な場合がでてくるかと思います。しかし、実際にiOSのSafariでデバッグするのにMacを利用できる環境でなかったり、デバッグツールがないAndroid Browserでデバッグしたい場合などがあると思います。そのような場合には「weinre」というリモートデバッグツールが有用かと思います。
weinreを利用することにより、 Chromeを使ってデバイス上のWebページのリモードデバッグが可能になります。

weinreのセットアップ手順

1.node.jsのインストール

以下のサイトからnode.jsのインストーラをダウンロードしてインストールします。
http://nodejs.jp/nodejs.org_ja/

2.weinreのインストール

npmを使用してweinreをインストールします。

npm install weinre

nodo_modules以下にweinreディレクトリが作成されればインストール成功です。

デバッグの準備

1.weinreの起動

以下のコマンドを実行しweinreを起動します。

./node_modules/weinre/weinre

起動オプションについての詳細は以下のページをご参照ください。

http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

2.スクリプトの埋め込み

デバッグしたいページに以下のスクリプトを埋め込みます。

<script src="[ホスト名]:8080/target/target-script-min.js#dev1"></script>
  • ホスト名にはweinreが起動しているPCのホスト名、IPアドレスを指定します。
  • #以降は任意の文字列を指定します。

3.デバッグコンソールの起動

Chromeで以下のURLを開きます。

http://localhost:8080/client/#dev1
  • #以降は2で指定した文字列と同じものを指定します。

weinre-console-1

デバッグ

実機で先ほどのスクリプトを埋め込んだWebページを開き、コンソール画面を見ると以下のようにターゲットに追加されます。URLが緑色になっていればデバッグ可能な状態です。
target-list

では、実際にコンソールを操作してみます。
Consoleボタンを選択し、コンソールを開き以下のスクリプトを実行してみると実機の情報が出力されます。

console.log(window.navigator.userAgent);

debug-js

Elementsタブを開けばCSSもデバッグできます。サポートしていないCSSのクラスやプロパティを指定しようすると警告表示となります。
debug-css

おわりに

以上のように、weinreを利用することで、PCから各デバイスのブラウザ上のWebページをデバッグすることができます。
専用のデバッグツールほど高機能ではありませんが、手っ取り早くCSSのサポート状態を確認したり、作成したCSSの動作確認をする時などに利用できるのではないかと思います。
また、クラウド上の検証サービスで実機をレンタルしてリモートデバッグしたり、ハイブリッドアプリケーションのデバッグも可能かと思います。

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>