このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

weinreでiPhone/Androidをリモートデバック

スマートフォン

2013.01.27

この記事は最終更新日から1年以上が経過しています。

Mac SafariのWebインスペクタでのデバック

iOS6になり、iPhoneで開いているページをMacのsafariからwebインスペクタによるデバックが可能になりました。

MacのSafariのバージョンが古い方はこちらからアップデートを行えます。

iPhoneの設定も必要となります。

iPhoneの設定は

設定>Safari>詳細 でWebインスペクタをON

設定完了致しましたら、iPhoneをMacにUSB等で接続しましょう。

接続しましたら、Safariの開発メニューを選択。開発メニューが表示されてない方は以下の手順で

※メニューで「Safari → 環境設定」で設定メニューを開きます。

※設定メニューで「詳細タブ」を開き、「メニューバーに”開発”メニューを表示」にチェックを入れます。

開発メニューを開きますと、以下の様に接続したiPhone名が出てきます。(一応名前を隠しました。)

すると開いているページが表示されますので、クリックしwebインスペクタで確認ができます。

すごい便利です!

ですが、接続すら面倒だ!とか

今、USBを持ちあわせていないんだ。。。って方は以下の方法があります。

weinreでiPhone/Androidをリモートデバック

ここからが本題となります。

上記で行った様なデバックを接続もせず、またAndroid端末でも行いましょう。

その為には、weinre(Web Inspector Remote の略)というリモートでのWebインスペクタをサポートするツールを利用するのですが、探した探した。。。

※PhoneGap 2.0.0 リリース時に、weinre は node.js に移行されました。

とのこと。。。こちらの記事を参考にしました。m(_ _)m

http://hijiriworld.com/web/weinre/

という訳でnode.jsをインストールしましょう!

node.jsのインストール、詳細などに関しては以下の記事

サーバーサイドJavascript 『node.js』 macにインストール・使用方法

サーバーサイドJavascript node.js expressやらnpmやら

を参照して頂ければと思います。

インストールされたなら、npm コマンドでインストールしましょう。

ターミナルを起ち上げて以下のコマンドを入力。

npm install weinre

色々と文字列がバーと表示して、最後に以下の表示になれば完了(バージョン等は異なります)。

coffee-script、express、npot、underscore も同時にインストールされちゃいます。

続いてmacのIPアドレスを確認しましょう。

IPアドレスの詳細は

システム環境設定>ネットワーク 

から確認出来るかと思います。

Eternetで接続するとここに表示致します。Wi-Fiの場合はWi-Fiのメニューに表示します。

weinreを起動

再びコマンドラインで

./node_modules/weinre/weinre -–boundHost 192.xxx.xx.x

と入力で起動。

xxxの箇所は、先ほど確認したIPアドレス「192.xxx.xx.xxx」を入力。

最後に上記の様に表示しますので http://localhost:8080をGoogle Chromeで開き以下の様に表示すれば起動成功!

デバックを行う端末にブックマークレットを登録

デバックを行う端末にブックマークレットを登録します。

iPhone,AndroidはもちろんiPhoneシュミレーターなどでも行えます。

登録するURLはweinre のメイン画面の Target Bookmarklet > bookmarklet url in a textarea: に記述されているスクリプトとなります。

ページ下部あたりの赤く囲んだ場所のテキストとなります。

登録方法はiPhoneなどのブラウザで適当にページのブックマークを行います。

ブックマーク登録後、上記の赤く囲んだテキストへURLの編集を行い完了です。

デバック方法

それでは、デバックを行います。

まず、weinre のメイン画面の debug client user interface から選択して、デバッグ画面を開きます。

こちらリンクをクリックし開いておきましょう。

そしてデバックを行いたいページを行いたい端末で開きましょう。

開いた後、先ほどブックマークしたurlを叩きます。

すると、Targetsの値が変化しますので、上にある、Elementsをクリック。

このようにPCで行っている様なデバックをスマートフォン端末でも行えます。

いやー便利ですねー。

weinreを停止したい場合はコマンドライン(ターミナル)で control + cを押してください。

Comment

Related Article

「Band’s」スマートフォン版リリースしました!

2015.06.24

スマートフォンサイト制作における SCSSディレクトリ構成、Class命名について

2014.06.01

ドラクエモンスターズ スーパーライト ジェム 50,000円分 無料GET!! と謳っている【manekin】(マネキン)をやってみた!

2014.05.24

HTML5 WebビューApp ソーシャルゲーム制作時のまとめ

2013.08.17

スマートフォン タッチイベント、距離、速さ等確認ページ

2013.03.07

weinreでiPhone/Androidをリモートデバック

2013.01.27

translateプロパティでAndroid,iPhone端末で画像がちらつく件

2012.09.13

CSS3 アイコン作成 背景指定1つ 光彩グラデーションの表現

2012.05.19

スマートフォン JavaScript タッチ、フリックイベント実装その2 「ボールを投げる」

2012.02.18

スマートフォン JavaScript タッチ、フリックイベント実装

2012.02.18

CATEGORY LIST

LATEST NEWS

kindleストア7周年記念セール中!技術書なども40%OFF以上でお買い得!(11/7まで)

イベント

2019.10.28

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

JavaScript

2019.10.21

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US