一.安装whistle
npm install whistle -g
二.启动whistle
打开命令终端,输入以下内容,回车
w2 start
三.在手机上配置代理服务器IP和端口
在手机设置中找到WIFI设置,并手动配置IP、端口为图片中的IP和端口。
四.访问whistle主页面
1.复制终端中的地址到浏览器访问
2.在主界面中可以抓取手机访问的内容
五.配置代理规则
1.点击rules进入代理规则页面
2.点击creat,在输入框中输入代理名称(自定义)
3.按照下图中配置代理规则,前面的为服务器项目包资源文件夹,后面的为本地资源文件夹。这样我们在移动端访问服务器资源时,就做到了用本地资源代理服务器资源。可以理解为用本地资源代替服务器资源访问。
六.注意事项
以上方法只遵循访问HTTP协议的资源,若要访问HTTPS协议的资源,我们还需要认证。
在手机的配置代理中我们需要打开 认证 按钮,输入用户名和密码即可代理。
七.手机调试PC端本地前端项目
1.用手机连接电脑连接电脑分享出来的热点,配置手机手动代理,服务器地址为192.168.137.1,端口号为8899(默认)
2.将PC端本地跑起来的项目IP改为上面红框中的ip,端口号不要变
3.通过手机扫码或者手动输入以上地址即可在移动端访问