页面代理和调试是每个前端都要面对且容易忽视的问题
| 开发方式 \ 开发场景 | PC Web | MT Web | 混合App | 小程序 |
|---|---|---|---|---|
| 旧式前后端分离(Jquery，文件未经过打包编译) | 请求代理 | 页面请求代理 | 页面请求代理 | - |
| 新式前后端分离(Vue、React，文件经过打包编译) | 请求代理 | 页面请求代理 | 页面请求代理 | - |
| 未分离后端渲染(Java web、PHP，文件未经过打包编译) | 文件请求代理 | 文件请求代理 | 文件请求代理 | 文件请求代理 |
| 分离式后端渲染(Nuxt、Next) | - | - | - | - |
- 浏览器开发者工具、设备连接工具：Chrome、Firefox
- 请求代理工具：Fiddler、Charles
- Host切换工具：SwitchHost
- 注入型调试工具：vconsole、eruda、m-console，针对移动端开发
- 综合性工具：Whistle
- devServer 不需要设置 host 等（在 whistle rules 里面设置即可），但是需要设置
disableHostCheck:
devServer: {
disableHostCheck: true
}
- 在 whistle 中设置 rules:
www.test.com/hello/basepage localhost:8080/basepage
注意：
localhost不生效时，可用本机IP代替。
注意：上面的例子，
www.test.com/hello/basepage被代理后，本地 vue router 解析到的 path 仍然是hello/basepage而不是basepage。
-
给移动端 wifi 设置代理，代理地址为
{本机IP}:8899 -
如果移动端是请求https，参照这里进行设置。
- 设置production环境的publicPath，然后 build。
- 在 whistle 中代理 html 和各类静态资源：
www.test.com/hello/basepage file://D:/projects/project-name/dist/index.html
www.test.com/your-public-path file://D:/projects/project-name/dist
- 配置whistle rules whistle自带的weinre和log
- weinre，可远程调试设备里的页面
- log，捕获页面中的日志
www.test.com weinre://test
www.test.com log://test
如果你嫌弃weinre用的不如devtools顺手，可以看看m-console。
真机调试是首要bug调试方式，但有时遇到由手机系统版本引起的bug，而没有对应真机，可尝试使用模拟器调试
Android 模拟器有专门的Webview Tester可以方便测试webview问题
- 下载Android Studio，创建 AVD。
- 启动模拟器，浏览器打开
http://{your-ip}:8899/cgi-bin/rootca下载 whistle 证书。这里最好给两个凭据用途都安装一次。 - 设置代理：进入设置=>wifi=>长按连接的wifi，选择“修改网络”，proxy：{your-ip}，port：8899。
- 打开浏览器请求即可看到
whistle的抓包记录。
IOS模拟器必须依赖MAC，PC用户最多可以远程连接MAC上的模拟器
- PC安装
Visual Studio - 连接MAC
- 启动IOS模拟器即可调用远程的ios模拟器
前后端分离项目，可以直接通过代理转发请求即可，若需cookie的在F12开发者工具配置即可 下面说下非前后端分离项目的调试
将静态资源的请求如js、css代理到本地文件，修改本地文件就能看到效果 下面是示例 whistle rules：
www.ekwing.com/resource/exam file://D:/svn-projects/exam/resource
利用Chrome Inspect连接Android，可以直接使用devTools
Safari可直接连接Iphone进行调试
weinre(Web Inspector Remote)，是一个网页远程调试工具，可以在PC上调试移动端web页面。
weinre是基于Webkit Web Inspector的用户接口代码开发的，提供了类似Chrome开发者工具的功能：
- Element：查看、修改dom、css
- Resources：查看、修改localStorage/sessionStorage
- Network：查看网络请求信息
- Timeline：时间线
- Console：查看控制台输出
weinre和Webkit Web Inspector的区别：
- 没有使用浏览器的原生代码，只是纯JavaScript，导致：
- 功能上有限制，在源码级别调试JavaScript较困难
- 被调试目标的代码在浏览器运行时，没有作任何处理去支持调试。例如手机上的浏览器
- weinre支持远程交互，可以在一个机器运行用户接口的调试器，调试另一个机器上的web页面
- 多个调试客户端可以同时调试一个目标
weinre和Web Inspector相同的是：Debug用户界面只能运行在基于Webkit的浏览器
weinre由三部分组成：
- Debug Server：是weinre-node分配的HTTP服务器，运行在PC中，Debug Client和Debug Target通过XHR HTTP请求与其交互
- Debug Client：Web Inspector用户界面，运行在PC中，展示如Elements、Console界面的网页
- Debug Target：被调试网页。同时它指代被调试的设备，基于weinre被设计用于调试移动端设备上的应用这个原因，这个设备即是你手机设备
由Debug Server提供的JavaScript代码会被注入到被调试网页中，使其具备被调试的能力。
安装
npm i weinre -g运行
weinre [options]
# 显示帮助
--help(-h)
# 运行HTTP服务器的端口
--httpPort [portNumber]
# HTTP服务器绑定的IP地址
--boundHost [hostname | ip address | -all-]
# 是否输出详细信息
--verbose [true | false]
# 是否输出更多信息
--debug [true | false]
# 服务器发送信息给被调试目标或用户界面前能等待的最长时间
--readTimeout [seconds]
# 服务器证明被调试目标或用户界面已经结束前等待的最长时间
--deathTimeout [seconds]注入脚本
# 获取本机IP，添加如下JS链接到需要调试的目标网页头部
<script src="http://a.b.c:8081/target/target-script-min.js"></script>平台支持：
- Debug Server：所有支持node.js的平台
- Debug Client：调试终端运行的浏览器
- Google Chrome
- Apple Safari
- 其他基于Webkit的浏览器
- Debug Target：被调试网页的浏览器
- Andorid浏览器应用
- IOS手机Safari应用
- PhoneGap/Cordova
- 其他
不支持平台：
- Debug Target
- IOS <= 3.1.3
- webOS <= 1.45