前の関連記事：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/npmstableバージョンをインストールするとnode v7.2.0がインストールされました。
whichで確認するとnpmもｖ7.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からも接続できました。
iOS Safariにブックマークレットを登録する
今度はiOS Safariの設定です。
ブックマークレットの登録方法はiOS SafariでHTMLソースをみる方法と同じです。
iOSのSafariでこのページを開き、まず下の「コードを表示」ボタンをクリックします。
コードが表示された以下の枠内でタッチ→キーボードがでてきたら長タッチ→「全選択」→「コピー」。
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のインストール
0 件のコメント:
コメントを投稿