【自分用まとめ】Chrome+HTML5 Developers Live Japan #6

taknb2nch @taknb2nch

今日は「モバイルブラウザ デバッグベストプラクティス」らしい。

taknb2nch @taknb2nch

今日はツールの使い方

taknb2nch @taknb2nch

iOS Safari、Android Browser、Firefox for Android、Chrome for Android

taknb2nch @taknb2nch

WebInspector

taknb2nch @taknb2nch

ほー、WebInspectorの画面がデスクトップ側に出るとな。

taknb2nch @taknb2nch

基本的にはChromeのDeveloper Tools同じ。

taknb2nch @taknb2nch

次はAndroid Browser。

taknb2nch @taknb2nch

今日の資料はココ。https://t.co/rNcwfAr3fT

taknb2nch @taknb2nch

Android標準ブラウザ←レガシーブラウザ

taknb2nch @taknb2nch

上の所で about:debug、、、動かいないことが、サイトによって動いたり動かなかったり。

taknb2nch @taknb2nch

上のところの show JavaScript Console をクリック。

taknb2nch @taknb2nch

ショボイw、CSSのデバッグが出来ない。

taknb2nch @taknb2nch

黒い画面w。

taknb2nch @taknb2nch

$ npm install -g weinre

taknb2nch @taknb2nch

Android Browser のデバッグはネットワーク経由で、ケーブル不要。

taknb2nch @taknb2nch

同じネットワークに置いといて、 $ weinre --boundHost PCのIP

taknb2nch @taknb2nch

でURLを開く。

taknb2nch @taknb2nch

weinre と WebSocket で通信するためにサイトにスクリプトを埋め込み必要がある。あるいはブックマークレット。 サイトに手を入れないといけないのか。

taknb2nch @taknb2nch

「ソースを出してブレークポイントを置いて」は出来ません。

taknb2nch @taknb2nch

Adobe Edge Inspect もネットワーク越しにやります。

taknb2nch @taknb2nch

でも有料じゃーねー。

taknb2nch @taknb2nch

Edge Inspect はWebViewのデバッグも出来る！？

taknb2nch @taknb2nch

無償メンバーシップでで1台はデバッグできる・・・。複数の端末も1台でデバッグしよう！

taknb2nch @taknb2nch

次Firefox。まずPC。about:configからdebugger.remote-enabled → true

taknb2nch @taknb2nch

端末側も about:config→debugger→force-local→false→remote-enabled → true