webapp 开发调试测试方法总结

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

这里先废话几句，咱们如今的开发模式是这样子的：

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

可是我但愿是这样子的： 

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

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

一、安装node.js

browsersync是基于nodejs 的因此首先安装nodejs。这里是node官方网站 请猛撮我 安装本身系统相应的安装包。

 

二、安装 BrowserSync

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

三、配置中请等待...（第一次可能会等待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/ 跳转到草料二维码首页   在导航栏中点击  产品和解决方案  这个按钮  会出现一个下拉框如图：

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

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