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

内容の一部参考: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 までご連絡ください。
HTMLタグとHTML属性の違いは何ですか?HTMLタグとHTML属性の違いは何ですか?May 14, 2025 am 12:01 AM

htmltagsdeTheStructureOfawebpage、whiLeattributesdddddddddtetails.1)tagslike、andoutlineThecontentのsplacement.2)属性、クラス、およびスチリーンハンシテアグビーズイメージソース、スタイリング、および改善、および改善の想像力。

HTMLの未来:進化とトレンドHTMLの未来:進化とトレンドMay 13, 2025 am 12:01 AM

HTMLの未来は、よりセマンティック、機能的、モジュール式方向に発展します。 1)セマンティック化により、タグがコンテンツをより明確に説明し、SEOとバリアのないアクセスを改善します。 2)機能化は、ユーザーのニーズを満たすために新しい要素と属性を導入します。 3)モジュール性は、コンポーネントの開発をサポートし、コードの再利用性を改善します。

Web開発にとってHTML属性が重要なのはなぜですか?Web開発にとってHTML属性が重要なのはなぜですか?May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevevermentmentmentmentmentmentmentmention behavior、like、andfunctionality.theyenhance -interactivity、accessibility、andseo.forexample、thesrcattribute intagsimpactsseo

Alt属性の目的は何ですか?なぜそれが重要なのですか?Alt属性の目的は何ですか?なぜそれが重要なのですか?May 11, 2025 am 12:01 AM

ALT属性は、HTMLのタグの重要な部分であり、画像の代替テキストを提供するために使用されます。 1.画像をロードできない場合、ALT属性のテキストが表示され、ユーザーエクスペリエンスが向上します。 2。スクリーンリーダーは、ALT属性を使用して、視覚障害のあるユーザーが写真の内容を理解するのに役立ちます。 3. ALT属性のEnginesインデックステキストを検索して、WebページのSEOランキングを改善します。

HTML、CSS、およびJavaScript:例と実用的なアプリケーションHTML、CSS、およびJavaScript:例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか?なぜこれが重要なのですか?Lang属性をタグにどのように設定しますか?なぜこれが重要なのですか?May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1)ラング属性をタグに設定します。 2)多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3)「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか?HTML属性の目的は何ですか?May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

HTMLでリストを作成するにはどうすればよいですか?HTMLでリストを作成するにはどうすればよいですか?May 06, 2025 am 12:01 AM

toreatealistinhtml、useforunorderedlistsandfororderedlists:1)forunorderedlists、wrapitemsinanduseforeachitem、renderingasabulletedlist.2)

See all articles

ホット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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

メモ帳++7.3.1

メモ帳++7.3.1

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

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!