詳しくはモバイルフロントエンドAndroid連調
3056 ワード
どうして連調するの?
A:クレイジーなcodingの时、制品MMが来て、焦って2周间前のページが携帯电话の上で少しずれていることを表示して、しかし小さい本の上で正常に表示します!
B:愛を振り回す原則に基づいて、大先端として、モバイルインターネット時代の基本的なスキルです.
結合の方法:
1:ADB Chrome extension
2:Opera Mobile
3:weinre
4: Adobe Egde Inspect CC
方式一:ADB Chrome extension:具体参考:ここ
ステップ1:ADB extension
ステップ2:携帯電話のドライバをインストールする
手順3:携帯電話のchrome開発者ツール->USBページのデバッグを開始する
ステップ4:ADB->View Inspection Targets
詳細:携帯電話の駆動が探しにくい場合は91かエンドウの莢を入れましょう.
メリットとデメリット:構成が簡単で、迅速に開始できます.しかしADBはかんしゃくを起こし、速くて遅くなる.
最適化:遅い解決はandroidのsdkでローカルにサーバーを作ってみることができます.
基本構成->ダウンロードADT->CMD(adb forward tcp:8888 localadstract:chromedevtoolsremote)->localhost:8888
方式2:Opera Mobile
手順一:Operaデスクトップ版(低バージョン)をダウンロードOperaシミュレータをダウンロードする
手順2:デスクトップ版のDragonflyを開き右上のリモートデバッグ設定ポートをクリック
手順3:シミュレータにopera:debug設定ポート接続を入力します.
詳細:Operaデスクトップ版の高バージョンのデバッガはdragonglyではなく、下の低バージョン(10.52)です.
長所と短所:簡単で便利で、各種機種の表示効果をシミュレートすることをサポートする.しかし、要素の選択方法が友好的ではないことはできません.
方式3:weinre(web in remote)
ステップ1:Nodeをインストールする.js. => インストールweinre(npm install-g weinre)
ステップ2:サーバweinre-httpPort 8080-boundHost-allの起動-
手順3:ターゲットデバッグファイルに次の項目を追加します.
ステップ4:localhost:8080/clientでデバッグ
詳細:導入したscriptラベルにはanonymousが必要です.そうしないと、デバッグ可能なファイルが表示されません.
メリットとデメリット:ハイエンドの上流で、操作が簡単で、ブラウザが持参したデバッガでデバッグすることができ、異なる開発者に適しています.
欠点は、先端開発を容易にすることです.
最適化:毎回jsを手動で導入するのは不快で、効率が極めて低い.ブックマーク形式にし、現在のページにjsを導入するたびに.
締めくくり:
モバイル側のデバッグは面白いが、あまりにも振り回され、効率を保証するには、Bug現象->ローカルデバッグ->位置決めbug->連調するかどうかを決定する最後の宝物としてしか問題に直面しない.
A:クレイジーなcodingの时、制品MMが来て、焦って2周间前のページが携帯电话の上で少しずれていることを表示して、しかし小さい本の上で正常に表示します!
B:愛を振り回す原則に基づいて、大先端として、モバイルインターネット時代の基本的なスキルです.
結合の方法:
1:ADB Chrome extension
2:Opera Mobile
3:weinre
4: Adobe Egde Inspect CC
方式一:ADB Chrome extension:具体参考:ここ
ステップ1:ADB extension
ステップ2:携帯電話のドライバをインストールする
手順3:携帯電話のchrome開発者ツール->USBページのデバッグを開始する
ステップ4:ADB->View Inspection Targets
詳細:携帯電話の駆動が探しにくい場合は91かエンドウの莢を入れましょう.
メリットとデメリット:構成が簡単で、迅速に開始できます.しかしADBはかんしゃくを起こし、速くて遅くなる.
最適化:遅い解決はandroidのsdkでローカルにサーバーを作ってみることができます.
基本構成->ダウンロードADT->CMD(adb forward tcp:8888 localadstract:chromedevtoolsremote)->localhost:8888
方式2:Opera Mobile
手順一:Operaデスクトップ版(低バージョン)をダウンロードOperaシミュレータをダウンロードする
手順2:デスクトップ版のDragonflyを開き右上のリモートデバッグ設定ポートをクリック
手順3:シミュレータにopera:debug設定ポート接続を入力します.
詳細:Operaデスクトップ版の高バージョンのデバッガはdragonglyではなく、下の低バージョン(10.52)です.
長所と短所:簡単で便利で、各種機種の表示効果をシミュレートすることをサポートする.しかし、要素の選択方法が友好的ではないことはできません.
方式3:weinre(web in remote)
ステップ1:Nodeをインストールする.js. => インストールweinre(npm install-g weinre)
ステップ2:サーバweinre-httpPort 8080-boundHost-allの起動-
手順3:ターゲットデバッグファイルに次の項目を追加します.
<script src="http:// ip:8080/target/target-script-min.js#anonymous"></script>
ステップ4:localhost:8080/clientでデバッグ
詳細:導入したscriptラベルにはanonymousが必要です.そうしないと、デバッグ可能なファイルが表示されません.
メリットとデメリット:ハイエンドの上流で、操作が簡単で、ブラウザが持参したデバッガでデバッグすることができ、異なる開発者に適しています.
欠点は、先端開発を容易にすることです.
最適化:毎回jsを手動で導入するのは不快で、効率が極めて低い.ブックマーク形式にし、現在のページにjsを導入するたびに.
javascript:(function(e){
e.setAttribute("src","http://192.168.1.5:8080/target/target-script-min.js#anonymous");
document.getElementsByTagName("body")[0].appendChild(e);
alert('has executed!');
})(document.createElement("script"));
void(0);
締めくくり:
モバイル側のデバッグは面白いが、あまりにも振り回され、効率を保証するには、Bug現象->ローカルデバッグ->位置決めbug->連調するかどうかを決定する最後の宝物としてしか問題に直面しない.