运用node真机调试移动web项目

  很多时候我们对移动端进行测试的时候,有pc端的测试,也有真机上的测试,pc的测试就不多说了,因为其实基本上大家都懂的。真机测试上也有几种方法,这里就推荐三种:

移动端真机调试方法

  1. chrome真机调试

  2. weinre调试

  3. spy-debugger调试

当然我这里就不详细去讲这几种的真机调试到方法了,详细可以看 9102 了,你还不会移动端真机调试?

但是我这里就讲一下另一种不一样的真机测试--node打开移动项目

  step1

  首先先准备好基本的项目,因为个人用angular比较多,这里就拿angular举例。(当然vue的项目,已经普通的html也是同样的道理的,因为没有用过react的原因,这里不好拿出来讲),因此我们需要用到打包的项目

新建并打包一个angular项目,如图

运用node真机调试移动web项目

  step2

  然后我们要用node去打开项目,找到对应的文件的路径(这里我建议用绝对路径,不要用__dirname,因为会影响之后获取的css,js等文件),当然我们也需要转换文件的格式json文件,无论是css,js,图片的格式通过node读取的话都要转换文件的格式。

运用node真机调试移动web项目

  对应的代码

let porject_url = 'F:/exercise/vue/vue/dist'

/*
* 打开项目
* */
function openProject(req,res,path){
if(req.url == '/' && req.method == 'GET'){
load(res,porject_url+'/index.html', 'text/html; charset=utf-8');
}else{
fs.stat(porject_url+req.url,function(err,stat){
//判断是否出错或者路径并不是文件而是文件夹
if(err || !stat.isFile()){
res.writeHead(404);
res.end('Not Found');
return;
}
getFormat(req.url,function(format){
load(res,porject_url+req.url,format);
});
});
}
} function load(res,path,type){
res.writeHead(200,{'Content-Type':type});
// 使用fs读取文件的方法,把文件流放入页面响应中
fs.createReadStream(path).pipe(res);
} function getFormat(file,callback){
var str = /\.[^\.]+$/.exec(file)[0];
fs.readFile('F:/exercise/node/openMobileProject/json/mime.json','utf8',function(err,data){
var obj = eval('(' + data + ')');
var format = obj[str];
callback(format);
});
}

  搭建一个node服务器,并运行打开项目的文件

/*
* 加载资源模块
* */
const http = require('http');
const fs = require('fs');
const url = require('url');
const webServer =  http.createServer(function(req, res){
openProject(req,res,'/html/test.html');
});
webServer.listen(3032,function(){
console.log('服务器已经开启,端口为3032');
});

  step3

  运行node文件查看最钟的效果,这里就不显示真机的效果了,如果需要看到真机的效果,我们通过命令提示符拿到我们当前的ip地址,凭借上我们的端口号,就可以访问到我们的项目,当然注意要连自己的wifi或者内网的wifi。

运用node真机调试移动web项目

上一篇:​ScrollView、ListView嵌套


下一篇:dubbo源码分析5——SPI机制_AdaptiveExtension的原理和作用