9102、あなたはまだ端末を移動してデバッグすることができませんか?
4709 ワード
モバイル側のデバッグが困難
多くの場合、私たちはモバイル端末の開発を行う時、まずPC端末で携帯電話シミュレータを使ってデバッグを行い、問題がなければ、携帯電話端末のブラウザでテストを行います.この時、問題がなければ、みんな喜んでいます.しかし、問題が発生すると、可視化されたインタフェースが欠けているため、私たちは解決しにくい.PC側ではなく、直感的にスタイルを変更したり、ブレークポイントをデバッグしたりすることができます.モバイル側ではalertを借りてデバッグせざるを得ない場合がありますが、このようなデバッグ方法は効率が極めて低く、経験に頼ったり、排除法に頼ったりすることが多いです.さらに、ブラウザの実装の問題に帰結せざるを得ません.
では、モバイル端末の適合をデバッグするときに、PC端末をデバッグするように直感的に見える方法は何でしょうか.この文書は、モバイル側のデバッグ方法を提供し、新しいドアを開くことを望んでいます.
本文は3種類の本物のデバッグ方法を提供して、あなたは自分の最も好きな1項を選ぶことができます~
モバイル端末のデバッグ方法 chrome本体デバッグ weinreデバッグ spy-debuggerデバッグ それぞれの方法の長所と短所を簡単に説明します.
1つ目:chrome本体のデバッグには、携帯電話側のchromeブラウザしかデバッグできないという大きな限界があります.UC、QQなどのブラウザには適用されません.そのため、互換性の問題をデバッグする際には、あまり役に立ちませんが、最大の利点は、簡単で速いことです.
第二に、weinreデバッグ方式は、インストールと適用が複雑ではなく、プラットフォーム全体のデバッグに適しています.つまり、どの携帯電話のブラウザでもデバッグできますが、携帯電話とパソコンが同じネットワークセグメントの下にある必要があります.
3つ目はspy-debugger、インストールが少し複雑で、spy-debuggerはweinreを統合していますが、バッグをつかむツールも追加されており、最も使いやすいです.
次に、この3つのデバッグ方法について詳しく説明します.
1.chrome本体デバッグ
携帯端末はchromeブラウザをダウンロードして、USBを使ってPCに接続して、携帯電話のUSBデバッグモードを開きます.PC側でchromeブラウザを開き、アドレスバーに入力します.chrome://inspect.「discovery usb device」にチェックマークを付けます.その後、携帯電話側でWebページを閲覧すると、以下のページが表示され、inspectをクリックしてデバッグを行います.(私のパソコンはドメインが入っているので、この方式は使えないので、私と同じ状況の子供靴があれば、他の2つのデバッグ方式を使うことも考えられます)
2.weinre本体のデバッグ
Weinre(WebInspector Remote)は、Web Inspector(Webkit)ベースのリモートデバッグツールで、ネットワークを介してモバイルデバイス上で動作するリモートページをPC上で直接デバッグすることができます.
ローカルサーバ:http-server、tomcatなど、コンパイラ統合サービスも使用できます.
weinreインストール
グローバルインストール:npm install–g weinre
ローカルインストール:npm install weinre
起動:weinre--httpPort 8090--boundHost-all-
ローカルインストールの場合は、前面にnode_を付ける必要がありますmodules/.bin/
先端の子供靴はnpmバッグ管理ツールを使うと信じていますが、このツールについては、私は展開しません.npmをインストールしていない場合は、自分でインストールします.
Weinre起動パラメータの説明: httpPort:Wninreで使用するポート番号を設定します.デフォルトは8080 です. boundHost:[hostname|Ip|-all-]:デフォルトは「localhost」です. debug[true|false]:このオプションは–verboseと同様に、より多くの情報を出力します.デフォルトはfalseです. readTimeout[seconds]:サーバがTarget/Clientに情報を送信するタイムアウト時間.デフォルトは5 sです. deathTimeout[seconds]:デフォルトでは3倍のreadTimeoutで、ページがこの時間を超えても応答がない場合は接続が切断されます.
8080ポートの使用量が多いので、8090ポートの指定を選択しました.
Weinreを起動したら、ブラウザにlocalhost:8090と入力します.起動に成功したことを示すインタフェースが表示されます.
デバッグクライアントインターフェースをクリックし、デバッグページに進みます.
現在のtargetsの内容は空です.
デバッグするページにスクリプトを追加するには、別の操作が必要です.
localhostをIPアドレスに することを えておいてください.
その 、IDE サーバ、http-server、http-serverを するサーバをローカルで します. 、 たちは でデバッグするページにアクセスします.そしてtargetsの に が されていることがわかります.
この 、Elementsをクリックしてデバッグできます.
スタイルを すると、 ですぐに になり、コンソール も できます. 、ブレークポイントのデバッグはできません.
に、デバッグが したら、 め まれたscriptを するのを れないでください.
この のほか、 にJsコードを し、ページをデバッグする がある はJSをクリックして する も されていますが、ブラウザは のため、この はサポートされていません.デフォルトの は ではなく なので、 ましくありません.
3.spy-debugger デバッグ
にspy-debuggerの を します.この では、スクリプトを で したり したりする はありません.
Spy-debuggerの にはweinreが されており、すべてのhtmlがweinreに に するために なjsコードをエージェントによってブロックしています.Weinreは、デバッグされたページごとにjsコードを する があることを します.spy-debuggerの は、すべてのhtmlページ がweinreに されるために なjsコードをブロックすることである.ページのデバッグをより にします.
:ページデバッグ+スナップ はHTTPSをサポートします. spy-debuggerの にはweinre、node-mitmproxy、AnyProxyが されています. は、オリジナルAppによって されたhttpsリクエストを に し、webviewによって されたhttpsリクエストのみをブロックする.SSL pinningテクノロジーを したオリジナルアプリには の もありません. は、 のエージェントツール(デフォルトではAnyProxy) と み わせて できます.
Spydebuggerのインストールとインストール:npm install–g spy-debugger グローバルインストール :spy-debugger のHTTPエージェントを するアドレスはPCのIPアドレス、エージェントのポートはspy-debuggerの ポート(デフォルトポート:9888)デフォルトポートは9888です.ポートを する :spy-debugger–p 8888 Android ステップ: -WLAN- し ネットワーク- ネットワーク- -エージェント - iOS エージェントステップ: - LAN- ネットワーク-HTTPエージェント インストール (node-mitmproxy CAルート ) : の :CAルート の 、ルート の /Users/XXX/node-mitmproxy/ディレクトリの (Mac). の がある.
がやった ゲームのページで を します. で を すると、パソコンで する を ることができます.そうすれば、どのようなスタイルの がUIの を いたのかを ることができます. じように、コンソールでJSのロゴ を ることができ、モバイル のデバッグに に ちます.
]
まとめ: chrome inspectアプリケーションシーン weinreはインストールが で、 にscriptを および する があります.デバッグページが い は されません. spy-debuggerのインストールはやや ですが、 は に しかったです.
な を やして を んでくれてありがとう.もしこの があなたに し けたり したりしたら、あなたの とStarをけちけちしないでください.あなたのは の の の に いありません.https://github.com/YvetteLau/...
の に することを します:
多くの場合、私たちはモバイル端末の開発を行う時、まずPC端末で携帯電話シミュレータを使ってデバッグを行い、問題がなければ、携帯電話端末のブラウザでテストを行います.この時、問題がなければ、みんな喜んでいます.しかし、問題が発生すると、可視化されたインタフェースが欠けているため、私たちは解決しにくい.PC側ではなく、直感的にスタイルを変更したり、ブレークポイントをデバッグしたりすることができます.モバイル側ではalertを借りてデバッグせざるを得ない場合がありますが、このようなデバッグ方法は効率が極めて低く、経験に頼ったり、排除法に頼ったりすることが多いです.さらに、ブラウザの実装の問題に帰結せざるを得ません.
では、モバイル端末の適合をデバッグするときに、PC端末をデバッグするように直感的に見える方法は何でしょうか.この文書は、モバイル側のデバッグ方法を提供し、新しいドアを開くことを望んでいます.
本文は3種類の本物のデバッグ方法を提供して、あなたは自分の最も好きな1項を選ぶことができます~
モバイル端末のデバッグ方法
1つ目:chrome本体のデバッグには、携帯電話側のchromeブラウザしかデバッグできないという大きな限界があります.UC、QQなどのブラウザには適用されません.そのため、互換性の問題をデバッグする際には、あまり役に立ちませんが、最大の利点は、簡単で速いことです.
第二に、weinreデバッグ方式は、インストールと適用が複雑ではなく、プラットフォーム全体のデバッグに適しています.つまり、どの携帯電話のブラウザでもデバッグできますが、携帯電話とパソコンが同じネットワークセグメントの下にある必要があります.
3つ目はspy-debugger、インストールが少し複雑で、spy-debuggerはweinreを統合していますが、バッグをつかむツールも追加されており、最も使いやすいです.
次に、この3つのデバッグ方法について詳しく説明します.
1.chrome本体デバッグ
携帯端末はchromeブラウザをダウンロードして、USBを使ってPCに接続して、携帯電話のUSBデバッグモードを開きます.PC側でchromeブラウザを開き、アドレスバーに入力します.chrome://inspect.「discovery usb device」にチェックマークを付けます.その後、携帯電話側でWebページを閲覧すると、以下のページが表示され、inspectをクリックしてデバッグを行います.(私のパソコンはドメインが入っているので、この方式は使えないので、私と同じ状況の子供靴があれば、他の2つのデバッグ方式を使うことも考えられます)
2.weinre本体のデバッグ
Weinre(WebInspector Remote)は、Web Inspector(Webkit)ベースのリモートデバッグツールで、ネットワークを介してモバイルデバイス上で動作するリモートページをPC上で直接デバッグすることができます.
ローカルサーバ:http-server、tomcatなど、コンパイラ統合サービスも使用できます.
weinreインストール
グローバルインストール:npm install–g weinre
ローカルインストール:npm install weinre
起動:weinre--httpPort 8090--boundHost-all-
ローカルインストールの場合は、前面にnode_を付ける必要がありますmodules/.bin/
先端の子供靴はnpmバッグ管理ツールを使うと信じていますが、このツールについては、私は展開しません.npmをインストールしていない場合は、自分でインストールします.
Weinre起動パラメータの説明:
8080ポートの使用量が多いので、8090ポートの指定を選択しました.
Weinreを起動したら、ブラウザにlocalhost:8090と入力します.起動に成功したことを示すインタフェースが表示されます.
デバッグクライアントインターフェースをクリックし、デバッグページに進みます.
現在のtargetsの内容は空です.
デバッグするページにスクリプトを追加するには、別の操作が必要です.
localhostをIPアドレスに することを えておいてください.
その 、IDE サーバ、http-server、http-serverを するサーバをローカルで します. 、 たちは でデバッグするページにアクセスします.そしてtargetsの に が されていることがわかります.
この 、Elementsをクリックしてデバッグできます.
スタイルを すると、 ですぐに になり、コンソール も できます. 、ブレークポイントのデバッグはできません.
に、デバッグが したら、 め まれたscriptを するのを れないでください.
この のほか、 にJsコードを し、ページをデバッグする がある はJSをクリックして する も されていますが、ブラウザは のため、この はサポートされていません.デフォルトの は ではなく なので、 ましくありません.
3.spy-debugger デバッグ
にspy-debuggerの を します.この では、スクリプトを で したり したりする はありません.
Spy-debuggerの にはweinreが されており、すべてのhtmlがweinreに に するために なjsコードをエージェントによってブロックしています.Weinreは、デバッグされたページごとにjsコードを する があることを します.spy-debuggerの は、すべてのhtmlページ がweinreに されるために なjsコードをブロックすることである.ページのデバッグをより にします.
:
Spydebuggerのインストールと
spy-debugger initCAがやった ゲームのページで を します. で を すると、パソコンで する を ることができます.そうすれば、どのようなスタイルの がUIの を いたのかを ることができます. じように、コンソールでJSのロゴ を ることができ、モバイル のデバッグに に ちます.
]
まとめ:
な を やして を んでくれてありがとう.もしこの があなたに し けたり したりしたら、あなたの とStarをけちけちしないでください.あなたのは の の の に いありません.https://github.com/YvetteLau/...
の に することを します: