倒web开发之动端真机测试

面前的说话

  chrome的开发者工具得以充分好地抓好模拟办事,但终归模拟与实际还是时有发生反差的。所以,真机测试是肯定要举行的,如何快速地开展真机测试为。个人感觉,还是BrowserSync故得比称手。本文将详细介绍如何用BrowserSync进行活动端真机测试

 

特性

  BrowserSync能吃PC、各移动设备上之页面同时实时地应文件的转移,而并非刷新操作。而且,当当其余一个装备及展开点击等行为经常,该行为呢会同步到其它浏览器被

 

安装

  BrowserSync是因Node.js的,是一个Node模块,所以要事先安装nodejs

【nodejs安装】

  虽然nodejs官网提供了node的msi文件,但自我于window7系统下勤品,均无法安装成功,且会时有发生your
system has not been
modified…的提醒。最终我以了其余一样种植方式成功安装了nodejs

  【1】下载node.exe

  【2】下载最新版本的npm zip格式压缩包

  【3】在硬盘某个位置,如D盘下成立一个文书nodejs,把点两个下载的事物还位于此处,npm要解压

  【4】配置有限个环境变量:一个凡PATH上增加node.exe的目录D:\nodejs,一个凡是搭环境变量NODE_PATH,值为D:\nodejs\node_modules

  【5】安装express:打开cmd命令执行(在nodejs目录下,先随停shift按键,再点击右键,出现”在这边打开命令窗口”选项并点击),使用命令行定位至及时Node目录下,键入指令npm
install express

  【6】安装完成后,在命令行里面输入node
-v如果出口nodejs的版本则装成功

 

设置

  nodejs安装到位后,需要对BrowserSync进行些简单设置,包括安装与监听

  【1】BrowserSync安装

  打开一个巅峰窗口,运行以下命令:

npm install -g browser-sync

  【2】BrowserSync监听

  files
路径是相对于运作该令的类型(目录)。如果需要监听多只项目的文本,需要用逗号隔开

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

  【3】在nodejs目录下新建一个index.html的文本,并安装如下代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
    height: 100px;
    width: 100px;
    background-color: lightblue;
}    
</style>
</head>
<body>
<div>测试文字</div>    
</body>
</html>

  桌面端页面打开如下:

举手投足端设置

  若用移动端则第一先确保活动端设备和桌面端设备处同一局域网(一般地,都并入一个路由器即可)。而且,移动端无法访问localhost,需要寻找电脑的内网ip。通过以指令执行被输入ipconfig,查看ip地址也192.168.1.100。所以手机端访问的地点为http://192.168.1.100:3000

  则运动端展示如下:

  当把html文件修改为如下代码时

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html{
    background-color: pink;
}
</style>
</head>
<body>
<div>测试文字</div>    
</body>
</html>

  无需刷新,移动端的网页自动生成吧如下显示:

  这样,就可初步轻松地测试活动端设备了。