Local debugging guide

1. Browser proxy

Install the browser plugin Proxy SwitchyOmega to switch proxy settings.

After the configuration is complete, click "Apply Options", then open the plugin and select the "whistle" profile.

2. Proxy server

Install whistle to start the local proxy service to facilitate proxy configuration.

Start the agent:

w2 start -p 8000

(ps: Why is port 8000, because sometimes you need to use the mobile phone to proxy to this service, if you use the default 8080, you may not be able to capture packets)

Configure Rules:

# --- 本地前端页面开发联调 ---
# 1、测试环境接口
/^http:\/\/127\.0\.0\.1:8081\/mobile\/(.*)/  https://test-online-site.com/mobile/$1
# 2、生产环境接口
# /^http:\/\/127\.0\.0\.1:8081\/mobile\/(.*)/  https://online-site/mobile/$1

# --- 线上环境调试本地页面 ---
# 仅把请求代理到本地服务，其他资源仍是线上的
# 1、测试环境
# /^https?:\/\/test-online-site\.com\/(?!mobile)(.*)/  http://127.0.0.1:8080/$1/$2
# 2、生产环境
# /^https?:\/\/online-site\.com\/(?!mobile)(.*)/  http://127.0.0.1:8080/$1/$2

Turn on the comments for the configuration you need. Note that the path is changed to what you need.

At this time, the browser's request will be relayed on this service, and you can directly see the details of all requests at http://localhost:8000/ .

3. Run front-end services locally

Run the local service you need to debug first. Then:

If it is case 1 (local front-end page development joint debugging), then the browser opens the address of your local service, usually localhost.

If it is case 2 (the online environment debugs the local page), then the browser opens the online address.