前端はしばしば特別なデバッグ環境が必要ですが、そのためには科学的な Web デバッグプロキシツール（以下、プロキシツールと呼びます）が特に重要です。
私が最初に使用したプロキシツールはCharlesです。機能は多いですが、重くて設定が面倒です。
後にZan Proxyに切り替えました。
Zan Proxy は Node.js で書かれたプロキシツールで、Charles とは異なり、Web デバッグに特化しており、軽量で設定が簡単です。機能は非常にシンプルですが、私には十分です。
すべての設定は Web ページで行われ、インターフェースは非常に使いやすく、私はリクエストの転送、レスポンスヘッダの変更、モックデータの作成に使用しています。
しかし、業務内容の発展に伴い、必要なデバッグ環境もますます複雑になってきており、Zan Proxy では私の要求を満たすことができなくなってきました。
LightProxyが私の視野に入ってきました。
LightProxy はwhistleをベースにしたローカルプロキシキャプチャソフトウェアです（実際には whistle を直接使用してもほぼ同じです）。
以下は私が使用しているいくつかのルールの例です。
リクエスト転送
player.bilibili.com http://127.0.0.1:8080
^*s1.hdslb.com/bfs/static/player/main/video*.js file:///Users/diygod/Code/bilibili/js-common/packages/video/dist/release/video.js
^*s1.hdslb.com/bfs/static/player/main/video*.js.map file:///Users/diygod/Code/bilibili/js-common/packages/video/dist/release/video.js.map
（1）プロジェクトの API と CDN は特定のドメインに制限されているため、開発環境にはこのようなものが必要です。
Webpack で 80 ポートのサーバーを立ち上げてホストをバインドするよりも優雅です。
（2）オンラインファイルのプロキシに使用できます。
ローカルでコンパイルされたプロジェクトファイルを実際のオンライン環境にプロキシするため、ワイルドカードを使用してパスをマッチさせています。
レスポンス内容の変更
m.bilibili.com resAppend://`
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
`
モバイルページのレスポンス内容を変更し、ページの読み込み時にデバッグツール Eruda をロードするようにしています。
whistle には非常に神経質な点があります。whistle 自体はこのようなインラインの書き方をサポートしていませんので、別のパネルで {key} を設定するか、ローカルファイルを使用する必要があります。
そのため、LightProxy はエスケープレイヤーを作成し、インラインコードを一時ファイルとして保存し、whistle に送信される実際の構成を次のように表示します。
m.bilibili.com resAppend:///var/folders/_l/hbcxcqh522s_vls68417h2m40000gn/T/lightproxy/0-152.txt
レスポンスヘッダの変更
/.*bilivideo\.com\/.*300(\d){2}\.m4s/ resHeaders://`{
'x-service-module': 'test-video'
}`
/.*bilivideo\.com\/.*302(\d){2}\.m4s/ resHeaders://`{
'x-service-module': 'test-audio'
}`
/.*bilivideo\.com\/.*\.flv/ resHeaders://`{
'x-service-module': 'test-flv'
}`
ここでは、異なるタイプのファイルに異なるルールをマッチさせるために正規表現を使用しています。
Cookie の変更
m.bilibili.com/video/ resCookies://`{
ab: '0000test',
}`
モバイルデバイスで Cookie を変更するのはあまり簡単ではないため、このルールを使用しています。本質的には、レスポンスヘッダのSet-Cookieを変更しています。
ホスト転送
172.22.33.166 s1.hdslb.com player.bilibili.com static.hdslb.com
さまざまなマッチングパターンに対応するだけでなく、従来のホストの構文規則もサポートしています。SwitchHostsはもう使わなくても大丈夫です。
ネットワークのエミュレーション
*.bilivideo.com replaceStatus://403 includeFilter://m:get
*.bilivideo.com resSpeed://2000
*.bilivideo.com resDelay://3000
さまざまなネットワークのエミュレーション機能は私の痛みを深く刺激しています。
例では*.bilivideo.comが bilibili のビデオ CDN アドレスにマッチします。
（1）CDN のステータスコードをエミュレートして、CDN アドレスのタイムアウトやエラーをデバッグするために使用します。LightProxy がないときは、コード内でモックしたり、ビデオアドレスのタイムアウトまで長い時間待ったりするしかありませんでした。
（2）スローモーションをエミュレートして、スタッタリングや自動解像度切り替えをデバッグするために使用できます。Chrome のネットワークスロットリングの代わりに使用できます。
（3）CDN リクエストのタイムアウトをエミュレートして、CDN のストリーミングタイムアウトをデバッグするために使用します。LightProxy がない場合、Chrome のネットワークスロットリングを注意深く制御する必要がありますが、小さすぎるとリクエストが失敗し、大きすぎるとタイムアウトが十分に長くなりません。
Node.js ルール
LightProxy には、Node.js を使用してルールを記述するというクールな機能もあります。以下は公式のデモですが、私はまだこの機能を使用する場面がありません。ただ、とてもクールだと感じています。
github.com/alibaba/lightproxy scriptfile://`
exports.handleRequest = async (ctx, next) => {
// do sth
// ctx.fullUrlでリクエストURLを取得できます
// ctx.headersでリクエストヘッダを取得できます
// ctx.optionsにはいくつかの特殊なリクエストヘッダフィールドが含まれており、設定されたルールなどの追加情報を取得できます
// ctx.methodでリクエストメソッドを取得および設定できます
// const reqBody = await ctx.getReqBody(); リクエストボディのバッファデータを取得します。データがない場合はnullを返します
// const reqText = await ctx.getReqText(); リクエストボディのテキストを取得します。データがない場合は''を返します
// const formData = await ctx.getReqForm(); フォームオブジェクトを取得します。フォームでない場合は空のオブジェクト{}を返します
// ctx.req.body = String| Buffer | Stream | null; リクエストの内容を変更します
// nextメソッドでnext({ host, port });を設定できます
// nextメソッドを実行すると、正常なリクエストが送信されます
const { statusCode, headers } = await next();
// do sth
// const resBody = yield ctx.getResBody();
// const resText = yield ctx.getResText();
// ctx.status = 404; レスポンスステータスコードを変更します
// ctx.set(headers); レスポンスヘッダを一括で変更します
// ctx.set('x-test', 'abc'); レスポンスヘッダを変更します
// ctx.body = String| Buffer | Stream | null; レスポンスの内容を変更します
ctx.body = 'test';
};`
上記の例から、皆さんはすでに LightProxy /whistle の使用方法について理解を深めたと思います。
最後に、これらのデバッグプロキシツールを使用した後、VPN の設定はどうすればよいでしょうか？
デバッグと VPN には異なるプロキシが使用されます。私は Google に向けてプログラミングしているので、プロキシを切り替えるのは面倒です。私の方法は、システムのプロキシを Surge に設定し、Surge のルールを使用して、新しい LightProxy プロキシを作成し、Surge のルールを編集して、デバッグに必要なリクエストのみを LightProxy に送信することです。
以上が私の現在の Web デバッグプロキシの実践です。