多端调测方法

使用vconsole

1. 引入对应的vconsole.js,移动端打开即可

使用weinre

1. 全局安装weinre

npm -g install weinre 

2. 创建文件夹,例如:
   E:\program\mobile\weinreE:\program\mobile\weinre
3. 文件夹下安装

//局部安装
npm install weinre 
//执行weinre语句
node node_modules\weinre\weinre --boundHost -all-

/* 参数说明: 1.boundHost:  -all-
   			2.httpPort:  8081
			3.reuseAddr:  true
   			4.readTimeout:  1
   		    5.deathTimeout: 5
其中创业参数为:--httpPort 调试服务器端口 默认是8080(建议不使用8080,防止冲突);
   		     --boundHost 调试服务器绑定的 IP 地址或域名 默认localhost.如果指定为-all- 表示绑定到当前机器可以访问的所有IP			     			    

4. 浏览器打开连接
   http://localhost:8080/client/#anonymous
5. 在调试文件中导入weinre的js文件

<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

6. 调试即可

使用BrowserSync

1. 安装node.js
2. 在需要调试的文件目录下安装BrowserSync

npm install -g browser-sync

3. 执行BrowserSync命令

browser-sync start --server --files "*.css, *.html"

注:多个类型文件用逗号隔开,files后为相对路径,相对黑窗所在位置

4. 获取电脑ip,在手机端输入IP值后添加执行黑窗命令后弹出浏览器窗口的地址端口号,即可(手机端和电脑端在同一局域网内,一般链接一个wifi即可)

使用whistle

1. 安装whistle

npm install -g whistle
w2 start // 启动whistle
// 默认启动端口号为8899，想要修改端口号，可以在start时添加 ‘--port 8001’
w2 stop //停止whistle

2. 浏览器安装代理插件
   谷歌浏览器安装SwitchyOmega插件，如果有外网的情况下可以直接去插件商城下载安装哈，也可以直接点击下载
   添加插件成功后，浏览器呈现如下：
   访问whistle代理页面如下：

3. 证书配置
   
   下载证书之后设置信任，移动端不同手机安装不同，以小米手机为例，进入设置，界面搜索证书，点击CA证书，选择下载文件安装信任即可。一般配置成功后http会显示一个✅

4. 代理抓包
   一般情况下切换到network界面，当前浏览器访问的所有页面触发的接口请求均会在此呈现，点击单个请求可以查看到当前接口的数据，也可以使用响应的规则配置实现本地开发代理，同事也可以使用weinre关键字实现移动端代理。移动端要使用同一网络环境下设置ip+端口进行代理哈
   
   

5. 篡改结果
   
   可修改当前接口返回状态和返回结果，一般可以用于前端mock数据联调