linuxBean14.04(130)weinreでiOSのブラウザのJavaScriptをデバッグする

Blogger:ページビュー設定(9)myPageView_Bloggerモジュールの作成でiOSのブラウザだけで動かないJavaScriptがあって困ったことがあったので、iOSのブラウザのJavaScriptをデバッグできる環境を構築できないが調べてみました。

前の関連記事:linuxBean14.04(129)pythonコマンドにはpython2.7を割り当てておく


Node.js v7.2.0にweinreをインストール


MacOSがあればiOS SafariのWebインスペクタ機能が使えるようですが、私はMacOSをもっていないのでweinreを使うことにしました。

weinreでiOSのブラウザのデバッグを行う手順 - zephiransasのチラシの裏

これを参考にlinuxBeans14.04で設定します。

weinreを使うにはNode.jsが必要です。

Node.jsはnvmでバージョン管理していますので、linuxBean14.04(122)NetBeans8.1でSyntaxHighlighter v4のビルドで設定している通りになっています。

linuxBean14.04(117)NetBeans8.1でnvmのNode.jsを使うための工夫でnode、npm、express、bower、node-sass、lessc、grunt、gulp、karmaの9個のコマンドをupdate-alternativesで切り替えるようにしました。

sudo update-alternatives --config node_bin

これでnodeのバージョンを切り替えられるようにしています。
pq@pq-VirtualBox:~$ sudo update-alternatives --config node_bin
[sudo] password for pq: 
alternative node_bin (/home/pq/.nvm/node_bin を提供) には 3 個の選択肢があります。

  選択肢    パス                                   優先度  状態
------------------------------------------------------------
* 0            /home/pq/.nvm/versions/node/v6.3.0/bin    60300     自動モード
  1            /home/pq/.nvm/versions/node/v5.11.1/bin   51101     手動モード
  2            /home/pq/.nvm/versions/node/v6.2.0/bin    60200     手動モード
  3            /home/pq/.nvm/versions/node/v6.3.0/bin    60300     手動モード

現在の選択 [*] を保持するには Enter、さもなければ選択肢の番号のキーを押してください: 
どのバージョンのnodeを使おうか、、、

nvm ls-remoteで確認すると最新のnodeはv7.2.0になっています。

とりあえず新たな環境でweinreをインストールすることにしました。
pq@pq-VirtualBox:~$ nvm install stable
Downloading https://nodejs.org/dist/v7.2.0/node-v7.2.0-linux-x86.tar.xz...
######################################################################## 100.0%
Now using node v7.2.0 (npm v3.10.9)
pq@pq-VirtualBox:~$ which npm
/home/pq/.nvm/versions/node/v7.2.0/bin/npm
stableバージョンをインストールするとnode v7.2.0がインストールされました。

whichで確認するとnpmもv7.2.0のものにちゃんとなっています。

weinreのnpmパッケージをグローバルインストールします。

nvmを使っているのでsudoは不要でした。

npm -g install weinre
pq@pq-VirtualBox:~$ npm -g install weinre
/home/pq/.nvm/versions/node/v7.2.0/bin/weinre -> /home/pq/.nvm/versions/node/v7.2.0/lib/node_modules/weinre/weinre
/home/pq/.nvm/versions/node/v7.2.0/lib
└─┬ weinre@2.0.0-pre-I0Z7U9OV 
  ├─┬ express@2.5.11 
  │ ├─┬ connect@1.9.2 
  │ │ └── formidable@1.0.17 
  │ ├── mime@1.2.4 
  │ ├── mkdirp@0.3.0 
  │ └── qs@0.4.2 
  ├─┬ nopt@3.0.6 
  │ └── abbrev@1.0.9 
  └── underscore@1.7.0 
これでインストール完了です。

weinreサーバを起動とファイアウォールのポートを開ける


iOSからネットワーク越しにweinreに接続するのでまずサーバーのIPアドレスを決めないといけません。

weinre - Runningを読むとこれはホストマシンのIPアドレスのようなのでlinuxBeanのIPアドレスをifconfigで確認します。
pq@pq-VirtualBox:~$ ifconfig
eth0      Link encap:イーサネット  ハードウェアアドレス 08:00:27:29:54:37  
          inetアドレス:192.168.10.102  ブロードキャスト:192.168.10.255  マスク:255.255.255.0
192.168.10.102ですね。

ちなみにVirtualBoxのゲストOSのlinuxBeanでネットワークはブリッジアダプターにしています。

weinre --boundHost 192.168.10.102
pq@pq-VirtualBox:~$ weinre --boundHost 192.168.10.102
2016-12-02T01:54:34.579Z weinre: starting server at http://192.168.10.102:8080
サーバーが起動しました。

linuxBeanのブラウザでhttp://192.168.10.102:8080にアクセスするとweinreの画面が表示されました。

しかし他のデバイスのWindowsやiOSのブラウザからは接続できませんでした。

これはファイアウォールの設定をしないといけません。

豆ボタン→設定→ファイアウォール設定ツール。

ファイアフォールのStatusをオフにするとiOS Safariからも接続できました。


とりあえずポート8080を開けるルールを追加したらファイアウォールをオンでもhttp://192.168.10.102:8080にアクセスできまるようになりました。


iOS Safariにブックマークレットを登録する


今度はiOS Safariの設定です。

ブックマークレットの登録方法はiOS SafariでHTMLソースをみる方法と同じです。

iOSのSafariでこのページを開き、まず下の「コードを表示」ボタンをクリックします。

コードが表示された以下の枠内でタッチ→キーボードがでてきたら長タッチ→「全選択」→「コピー」。


weinreサーバのURLを入力:

Safariの画面下のをタッチします。を選択。

ブックマーク追加画面となりますが、ここではアドレスは変更できないのでタイトルを適宜変更して「保存」します。

元の画面に戻ったら今度はをタッチして登録したブックマーク一覧を出して、右下のをタッチ。


先ほど登録したブックマークレット名をタッチしてブックマーク編集画面にします。

今度はアドレスが編集できるのでアドレスの部分をタッチして右端のをタッチして、アドレス欄を空欄にしたあと空欄を長タッチして先ほどコピーしたブックマークレットのコードをペーストします。

これでiOS Safariの設定は完了です。

HTTPのウェブページをリモートデバッグする


weinreサーバを起動しているlinuxBeanのブラウザでweinreのページを開きます。

今回はhttp://192.168.10.102:8080をFirefoxで開きました。


Access Pointsのdebug client user interfaceのリンクをクリックします。


この状態にしておいて、リモートデバッグしたいページをiOS Safariで開きます。

HTTPSのページはうまくデバッグできませんのでHTTPのページを開きます。

先ほど表示させたweinreのページもHTTPなので試しにそのページをデバッグします。

そのページを表示させたまま先ほどのブックマークレットをブックマークから選択します。


するとlinuxBeanのFirefoxで表示させていたページが即座に変化します。



上の「Elements」ボタンをクリックするとiOS Safariで表示させているページのHTMLがみれます。

マウスをタグに乗せるとiOS Safariで表示させているページの該当部分がハイライトされます。


ChromeデバッガのようにデバッガでCSSを編集すると即座に反映されます。

Bloggerの投稿部分はHTMLのタグがたくさん入れ子になっていて該当部分のHTMLを探すのは大変です。


Scriptsボタンをクリックするとパネルを有効にするか確認されます。

有効にすると動きが遅くなると忠告されています。

「Enable Debugging」をクリックしましたが一向に表示が変化しません。

違うページでやってみてもScriptsパネルを有効にすることはできませんでした。

ConsoleからJavaScriptを実行することはできました。

alert("テスト");と入力するとiOS Safariの画面に「テスト」というダイアログを表示させることができました。

モバイル Web アプリをデバッグする - Weinre,JSConsole からRemote Webkit へを読むとブレークポイントは設定できないようです。

weinreサーバは起動したTerminalでCtrl+Cで停止しました。

ngrokを使ってHTTPSのウェブページをリモートデバッグする


Remote debugging localhost with weinre ( and HTTPS too )

これを読むとHTTPSのページもリモートデバッグできるようにですのでやってみます。

npm install -g ngrok

ngrokパッケージをインストールします。

インストールが完了したら先ほどと同様にweinreサーバを起動します。

別のTerminalを起動してそこからngrokを起動します。

ngrok http 192.168.10.102:8080

引数はweinreサーバのURLにします。


しばらくするとTerminalの画面がこのように変化しました。

Forwardingで表示されているhttps://6a8cb82a.ngrok.ioのアドレスを使って先ほどと同様にiOS Safariのブックマークレットを作成します。

そしてリモートデバッグしたいHTTPSのページを開いて、ブックマークレットを実行します。

するとHTTPのページと同様にリモートデバッグできました。

いちいちブックマークレットを作り直さないといけないのが面倒ですね。

Scriptsパネルが使えれば使うかもしれませんが、そうでなければChromeでデバイス偽装してのデバッグで用足りそうです。

参考にしたサイト


weinre - Home
iOS SafariをlinuxBeanからリモートデバッグします。

weinreでiOSのブラウザのデバッグを行う手順 - zephiransasのチラシの裏
weinreの解説。

モバイル Web アプリをデバッグする - Weinre,JSConsole からRemote Webkit へ
weinreではJavaScriptのブレークポイントは設定できないようです。

Remote debugging localhost with weinre ( and HTTPS too )
HTTPSのページでもweinreを使う方法。

次の関連記事: linuxBean14.04(131)LibreOfiice5.2のインストール
PR

0 件のコメント:

コメントを投稿