webapp 开发调试测试方法总结

好久都没有发表过日志了，反正近期项目也已经接近尾声了，那么是时候该总结一下在项目中用到的技术了，请看：

这里先废话几句，我们现在的开发模式是这样子的：

先把本地的网页上传到远程服务器（因为好多设备都要去访问一个固定的地址），然后将网址输入到各个测试机的测试浏览器里面手动打开(或者使用浏览器插件等，生成二维码扫一下）。然后手机开始下载页面，需要等待下载。观看效果进行测试，每个测试机都要操作一遍。测试其他网页的时候，每个测试机重新输入网址、刷新。如果代码有修改，需要重新上传服务器进行刷新。

但是我希望是这样子的： 

在我的前面有两显示器，一边是IDE写代码，一边是浏览器我正在开放的应用，此时桌上还有调试机，一般调试机越多表明你们公司越豪（牢骚一句而已不要在意）。现在我写了一段代码，CTRL+S后，接着你的手机和另一个显示器里的应用，就变成了更新后的效果。想象一下，PC和所有的手机、平板都同步变化，是不是像在看美国大片。其实就是在开放中少按F5刷新而已，但是效率提高了啊。  

作为一个苦逼的前端程序猿，那么在实操过程中不可避免的会经常对自己的项目进行一系列的模拟测试，PC端就不多说了哈，这里主要是说一下在Phone进行测试，我们都知道在手机端进行测试的方法有很多种，我会把我用过的方法都一一列在下面：

1、安装node.js

browsersync是基于nodejs 的所以首先安装nodejs。这里是node官方网站 请猛撮我 安装自己系统相应的安装包。

 

2、安装 BrowserSync

windows 安装指令: npm install -g browser-sync /*-g 是指安装到全局环境中 */ 
mac安装指令: sudo npm install -g browser-sync 

3、配置中请等待...（第一次可能会等待1-2分钟  以后就会很快了） 
当出现这个界面的时候表示你已经到成功家门口了，但是还需要一小步操作。
 



如何使用

来举一个完整的栗子（前提是环境已经搭建好）：

• 第一步进入你项目的根目录：

  C:\Users\Administrator>cd D:\workspace\advert\我的项目      PS：cd 命令提示符可以快速的输入系统路径 注意后面有一个空格哈  后面就是你的项目具体所在的路径回车就好了  在等待5-10秒的样子  就会自动启动BrowserSync插件  然后会反馈给你当前电脑的IP地址加上一个端口号  下方已用红色字体注明  你就可以直接使用这个地址  在手机浏览器输入  你就会发现原来手机和电脑同步是这么简单。

• 第二步启动BrowserSync

  D:\workspace\advert\我的项目>browser-sync start --server --files "**"

  下面是反馈结果：

  [BS] Access URLs: ------------------------------------ Local: http://localhost:3000External: http://10.10.12.77:3000 ------------------------------------ UI:http://localhost:3001 UI External: http://10.10.12.77:3001

 
以上是第一种方法，这种方法相对来说步骤复杂一点，其实好好看一下，也没那么复杂是吧，它最大的优点是可以实时同步，你在手机端的操作，电脑端会同步操作，小小的一个栗子：滑动手机端的纵向滚动条，电脑端也会纵向滚动哦。如果你面前有十几台甚至几十台的PC，你只需要一部Phone就可以让这些PC同步执行  是不是像看电影一样  想想都好炫啦 。

第二种：可以借助 hbuilder这个编译器来实现手机测试

hbuilder是一个最几年兴起的一个比较热门的一个编译软件，当初我第一个手机APP就是用这个软件编写的，其中的MUI框架也是相当牛逼啊，感兴趣的同学抽时间可以去hbuilder的官网看看  里面的方法都有例子非常简单的  链接http://www.dcloud.io/
好啦不BB啦，直接切入主题：
打开 hbuilder编译软件，在软件的上方有个菜单栏，菜单栏中选择调试----->真机调试  (需要用手机数据线链接电脑，并打开手机的调试模式，软件会自动搜索，搜索完成后  会显示当前手机然后选择  手机会自动打开项目 ，有的同学可能即使打开了调试模式也链接不成功，可能是缺少手机驱动，这时候你可以下载一个360手机管家，它会自动下载安装驱动，完成后也就OK啦)。

这种方法不能实现PC和Phone同步，但是测试项目还是绰绰有余了哈   麻烦的是需要链接USB  要是忘带了  岂不是完蛋啦，别着急  还有下面一种方法，LOOK:

第三种：草料二维码

二维码这个东西现在可谓是无孔不入，什么东西都可以用一个二维码表示，更何况一个小小的HTML页面呢  是吧

打开浏览器输入http://cli.im/ 跳转到草料二维码首页   在导航栏中点击  产品和解决方案  这个按钮  会出现一个下拉框如图：

选择浏览器插件  会跳转到下载页面  把这个插件下载好之后  通过谷歌浏览器  安装就可以了  安装好后 插件会显示在浏览器的右上角  如图：

点击插件按钮 即可生成当前页面的二维码信息  手机打开浏览器   （当然必须是要有带扫描二维码功能的浏览器）  扫描一下就可以在手机上看到当前页面在手机上的展示效果了  这种方法是最简单的  扫一扫就完事了 ，以上就是我在整个项目中调试的方法，还不知道的同学，请好好看看，绝对无害的。