利用phpStudy、vorlon、BrowserSync进行移动端真机调试

真机调试

phpStudy 本地服务器

• 作用：快速提供静态服务器、也可以用nodejs
• 安装：官网下载exe安装
• 运行：双击运行
• 部署：静态资源放在安装目录/www/下
• 访问：访问路径为IP/静态资源目录
• 缺点：无控制台

vorlon.js

• 作用：真机调试无控制台进行输出信息，vorlon.js提供控制台，结合
• 信息：微软出品
• 安装：npm 安装
• 运行：cmd->vorlon执行
• 访问：http://IP:1337/dashboard/default

利用phpStudy和vorlon进行手机端调试

调试前准备：

1. 安装node和phpStudy
2. 安装vorlon.js，需要通过cnpm安装

开始调试：

1. 要访问的资源先放在：phpStudy安装目录/WWW/自己的资源，例如是D://phpStudy/www/demo/index.html。
2. 自己的资源中要加入<script src="http://IP:1337/vorlon.js"></script>，注意一定是是要ip地址，不可以是localhost，手机端不识别。
3. 打开并启动phpStudy
4. 打开vorlon监听控制台：http://IP:1337/dashboard/default
5. 手机端保证和电脑是同一个局域网。
6. 手机端访问：IP地址/demo，默认会查找index.html
7. 在vorlon监控台中左侧有client list，打开后就可以看到控制台输出信息。

BrowserSync

作用：

1. 监听代码源文件，保存后自动刷新
2. 监听各终端操作，如果一个终端发生交互事件，其他终端也会随着变化

用法：

1. 安装：cnpm i -g browser-sync
2. 进入要监听的文件夹下
3. 打开监听：browser-sync start --server --files="*"
4. 各终端使用ip:3000/相对路径访问资源，默认3000
5. 完成

其他：

• 可以使用localhost:3001打开管理台，进行配置
• 和上述phpStudy没有任何关系