ホームページ ウェブフロントエンド htmlチュートリアル Fiddler を使用して携帯電話のデバッグ環境を構築します (私が取り組んでいるプロジェクトは WeChat 公式アカウントのデバッグです)

Fiddler を使用して携帯電話のデバッグ環境を構築します (私が取り組んでいるプロジェクトは WeChat 公式アカウントのデバッグです)

Oct 18, 2016 am 08:42 AM

内容の一部参考:http://ju.outofmemory.cn/entry/22854

WeChat エンタープライズ アカウントをテストしていたとき、WeChat の制限のため、デバッグのために Chrome ブラウザに取り込むことができませんでした。そのためページの変更をリアルタイムで確認できなかったため、チェックできる人が必要でした。私たちのページはツールでいつでも変更されます。 Fiddler の使用にはいくつかの問題があり、ブラウザで直接デバッグすることはできませんが、変更したページをサーバーにアップロードして携帯電話を使用してリクエストを行うよりもはるかに簡単です。

1. まず、フィドラーをインストールする必要があります。中国語版でもそうでなくても構いません。リンク: http://pan.baidu.com/s/1miuGbyS パスワード: kjjg、確認してインストールしてください。インストールが完了したら、以下の設定を行います。 Fiddler プロキシはデフォルトでポート 8888 を使用し、携帯電話の http プロキシを Fiddler のプロキシ サーバーとして設定します (以下に具体的な手順があります)。これにより、モバイル アプリケーションからのすべてのリクエストが Fiddler を介して転送され、それによって表示機能が実現されます。携帯電話でのページリクエスト。

1) Fiddler のオプションを設定します。

Fiddler->Tools->Fiddler Options を開き、リモート コンピューターの接続を許可するにチェックを入れます [接続] パネルで、確認後、Fiddler を閉じて、Fiddler を再度開きます。

2) この時点で、エージェントが正常に動作していることを確認するために、cmd で <code class="prettyprint prettyprinted"><span class="pln">netstat <span class="pun">-<span class="pln">anop tcp</span></span></span>netstat

-

anop tcp

を実行して、 Fiddler プロセスは 8888 ポートを正常にリッスンしています。サービスが正常に開かない場合は、他のポートを使用して、ポートの変更場所を試行できます (前の手順で直接変更できます)。

まずタスクマネージャーを開いて、以下の Fiddler の PID コードを確認しましょう。タスク マネージャーを開くショートカット キーは、Ctrl+shift+ESC です。図に示すように、Fiddler.exe の PID は 3156 です。インターフェイスに PID 項目がない場合は、下を見てください。

タスク管理ページで、[表示] - [列の選択] を選択し、図に示すように [PID] 列にチェック マークを付けます。これにより、PID がタスク管理インターフェイスで使用できるようになります。

cmd を開いて netstat

-

anop tcp コマンドを実行すると、PID が 3156 でポート 8888 をリッスンしていることがわかります。次に、携帯電話のプロキシを Fiddler のプロキシに設定する必要があります。プロキシ設定には、Fiddler が実行されているコンピューター (Fiddler がインストールされているコンピューター) の LAN IP アドレスが必要です。デフォルトのポートは Fiddler プロキシのポート 8888 です。携帯電話が配置されているネットワーク セグメントがコンピュータが配置されているネットワーク セグメントにアクセスできることを確認してください。通常、同じ LAN 内では問題ありません (コンピュータはブロードバンドを使用しています)。 、携帯電話は Wi-Fi を使用します。ネットワークは 1 つで十分です)。

2. Fiddler ソフトウェアをインストールしたコンピューターの IP を確認します。私のコンピューターの IP は 192.168.1.12 です。会社のネットワークを使用しているため、IP は毎日動的に取得されます。 IP を固定のものに変更するには、fiddler を使用するたびに手動で変更する必要があります。

🎜 🎜 🎜 🎜3. 携帯電話のプロキシを設定し、192.168.1.12:8888 にアクセスします。プロキシのホスト名は、コンピュータ ネットワークの IP とプロキシ サーバーのポートです。写真に示すように、私たちのバイオリンが監視しているものです🎜

4. 最後に、コンピューターの hosts ファイルを設定する必要があります。パスは次のとおりです。

コンピューターの IP を書き込み、その後にデバッグする Web ページの URL を続けます。

このようにして、hand-extreme ページをデバッグできます。

5. 問題: fiddler を設定した後、https プロトコルで Web サイトにアクセスすると、図に示すように次の問題が発生する可能性があります。

この問題により、Baidu、Alibaba などの一部の Web サイト コンテンツに正常にアクセスできなくなります。これは、フィドラーが https の監視をオンにしているためです。設定のチェックを外してください。 Fiddler ページで、[ツール] -- [Telerik Fiddler オプション] -- [HTTPS] をクリックし、https チャネルを監視する (HTTPS トラフィックを復号化する) チェックマークを外します

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

See all articles