在线调节和测量试验方案的考虑与推行

☞ 代理调试的比非常慢

而对此比较复杂的线上情状,代理也会境遇很多障碍,比方:

线上财富 combo

并发谬误的本子地址为  ,它对应着
a.js,b.js,c.js 多个本子文件,要是大家使用 Fiddler/Charles那样的经文代理工科具调节和测量试验代码,就亟须给那么些工具编写插件,只怕在改造配置内部加一群剖断或许正则,花销高,门槛高。

线上代码压缩

打包压缩,那是上线此前的必经流程。由于我们在包装的环节中并不曾构思为代码增多sourceMap,而线上之前对应 index-min.jsindex.js
也因为安全方面包车型客车来由给干掉了,那给我们调节和测验代码变成了华而不实的不便于。

代码注重相当多,拉替代码问题

大多时候,大家的页面正视了几个 asserts
财富,而这一个能源各自布满在三个旅馆里面,以至散播在不同的表露平台上,为了可以在源码上清晰的调度代码,大家必须要将全部的能源下载到当地,期间假诺存在下载代码的权位难题,整个调节和测量检验进度就慢下来,那是非常不可能经受的事务。举个例子某系统构建的页面,页面上的模块都以以货仓为维度区分的,一个页面大概对应了5-四拾几个货仓,下载代码实为劳动。

最骇人听闻的调治是,当地未有对应的测量试验境遇、代理工科具又不知足我们的必要,然后就只能,
编辑代码->打包压缩->提交代码->查看效果->编辑代码->… ,借令你的品类支出是这种方式,请停下来,思谋调节和测量试验优化方案,正所谓必先利其器。

path模块

var path = require(“path”卡塔尔(英语:State of Qatar); //加载模块

path.dirname(url卡塔尔(英语:State of Qatar) 获取目录名

path.extname(url卡塔尔获取后缀名

path.join([…paths]卡塔尔(英语:State of Qatar) 拼接路径

var url = “”;

var p1 = path.basename(url,”.html”);

console.log(p1); //path

var p2 = path.dirname(url);

console.log(p2); //

var p3 = path.extname(url);

console.log(p3); //.html

var p4 = path.join(__dirname, “./a”, “../b”, “c”);

console.log(p4); //E:\node\nodejs_2\b\c

☞ 开启懒人调试格局

当看见线上冒出难点(只怕是其余同学负担页面包车型地铁主题材料),脑中浮出那般的意况:

复制代码 笔者:”嘿,线上失常呀!小编要调治代码!”
计算机:”好的,主人。请问是哪个页面?”(弹出浮层) 俺:浮层中输入U揽胜极光L。
计算机:”请问是哪些地点出标题了?” 笔者:(指着计算机)”模块A和模块B。”
Computer:正在下载A、B财富…正在将上线A、B映射到本地…自动展开A、B对应文件夹
小编:编辑代码,然后实时预览效果。

1
2
3
4
5
6
7
8
复制代码
  我:"嘿,线上有问题啦!我要调试代码!"
电脑:"好的,主人。请问是哪个页面?"(弹出浮层)
  我:浮层中输入URL。
电脑:"请问是哪个地方出问题了?"
  我:(指着电脑)"模块A和模块B。"
电脑:正在下载A、B资源…正在将上线A、B映射到本地…自动打开A、B对应文件夹
  我:编辑代码,然后实时预览效果。

在那边我们必要撤消这样多少个难题

  • 将页直面应的保有酒馆/能源罗列在客商日前
  • 下载能源的权杖提示和权杖管理
  • 线上能源解 combo,然后映射到本地

本来调试之后,能够还会有三个操作:

自家:”哈,已经修复了,帮本身付诸代码~”
计算机:正在diff代码…收到确认提交非信号,提交到预发情形…收到已经预览功率信号…正在公布代码…收到线上回归时限信号…流程截至

1
2
我:"哈,已经修复了,帮我提交代码~"
电脑:正在diff代码…收到确认提交信号,提交到预发环境…收到已经预览信号…正在发布代码…收到线上回归信号…流程结束

除外 debug 代码,大家供给做的就只是用眼睛看功能是还是不是ok,整个工艺流程优化下来,体验是超赞的!

socketio 是对websocket共同商议封装的多个模块,让顾客端和劳动器端的写法都是同等的

socket.emit()发数据

socket.on()收数据

监听客商端连接,回调函数会传递此次连接的socket

io.on(‘connection’,function(socket));

给具有顾客端广播音信

io.sockets.emit(‘String’,data);

给内定的客商端发送音讯

io.sockets.socket(socketid).emit(‘String’, data);

监听客商端发送的新闻

socket.on(‘String’,function(data));

给该socket的客商端发送消息

socket.emit(‘String’, data);

3.WebSocket

new Websocket(“ws:localhost/chat”)

在线调节和测量检验方案的观念与试行

2015/08/28 · HTML5 ·
调试

初藳出处:
李靖(@Barret李靖)   

本文的要点不在移动端调试上,移动端调节和测验无非正是调解页面和调理工科具之间存在分离,消除这种分离并创制连结就能够缓慢解决移动端的调节和测验难点。重视解说的是所见即所得的调节和测验形式下会境遇的拦截。

当大家开垦网页,发掘两个模块未有正确地渲染大概空白时,如果调控台有报错,会向来根据报错定位到源码地点上马
debug;假设调节台未有报错,则会依靠模块名恐怕模块特征的贰个值,通过全局找寻觅到这几个模块的职位,然后在调解工具中断点,单步调节和测量试验,找到难点所在,那时大家大概会这么做:

情形一:

小A同学展开调控台,发掘断点调节和测量试验不佳写代码,于是将压缩的源码复制生机勃勃份保存到本地,格式化,然后将线上能源通过代办工具代理到地点文件。

情形二:

小B同学早早的为协和配了生龙活虎份本地开荒条件,于是他撞见标题现在,直接去源码中定位错误地方,由于接收的是预管理语言,所以须求先打包编写翻译之后再在地头预览效果。

情形三:

小C同学的调护医治格局是小A和小B的总结版本,将线上的财富代理到地点 build
目录文件,在 src 目录下改良之后编写翻译打包到 build,然后预览。

gulp

npm init

npm install gulp –save-dev

新建 gulpfile.js(暗中同意执行的公文卡塔尔国

//gulpfile.js

//1.安插职分, 2.自动推行

var gulp = require(“gulp”);

var uglify = require(“gulp-uglify”);

//task1 定义一个义务ufligy 压缩js

gulp.task(“uglify” ,function() {

gulp.src(“./src/js/*.js”)

.pipe(uglify())

.pipe(gulp.dest(“./dist/js”))

})

安装gulp-uglify插件 npm install gulp-uglify –save-dev

新建src文件夹 > js文件夹 >demo.js

新建dist文件夹> js文件夹 >

运行 gulp uglify

然后在dist文件夹就会找到已经减弱的demo.js

插件:gulp-less

插件:gulp-minify-css

//文件看守, 监听./src/less/*.less 文件的变通,变化运营该less职责

gulp.task(“default”, [“uglify”, “less”], function() {

gulp.watch(“./src/less/*.less”, [“less”]);

})

//运营 gulp就能够即便改造代码

☞ 在线调节和测量试验试行(二个系统的调整工具卡塔尔(英语:State of Qatar)

输入必要调养的页面U智跑L(如
http://www.taobao.com):

图片 1

插件会解析 DOM,遍历获得页面全数被引用到的库房:

图片 2

接收供给疗养的模块(颗粒度细分到了html/js/css),点击调节和测验开关,能够看看调节和测量试验页面包车型客车能源都会援用本地下载的文本。

cmd命令:

   ./  当前目录

   ../ 上一级

   dir  查看当前目录

   ls  查看当前目录下文件

   windows 切换盘符 d:

   cls清屏

   cd +文件加名

☞ 消除代理境遇的标题

地点大家提到了多个难点,平日费用遭遇最头痛的三个是 combo ,曾经大家页面上的代码加二个?_xxx  参数就能够直接初步调节和测验格局,那是因为程序的输入独有叁个,並且富有脚本的信赖也卷入到三个名叫deps.js  文件中,加上调节和测量检验参数之后,能够将原先
combo 加载的公文:  ,依据非
combo 的不二等秘书诀加载:

1
2
3
http://example.com/path/a.js
http://example.com/path/b.js
http://example.com/path/c.js

上边的代码能够轻便地代理到本地,然则一些系统生成的代码并从未 deps.js  文件,它是将脚本直接出口到页面上:

<script
src=”;

1
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>

☞ 解决 combo 问题

此时通过 Fiddler/Charles工具比较难满足需要,对于那几个标题有五个处理方案:

1卡塔尔. 浏览器诉求全体代理到本地的三个劳动

先是写二个地面服务:

JavaScript

var http = require(‘http’卡塔尔国; // npm i http-proxy –save var httpProxy =
require(‘http-proxy’卡塔尔国; var proxy = httpProxy.createProxyServer({}卡塔尔(قطر‎; var
server = http.createServer(function(req, res卡塔尔(قطر‎ { console.log(req.url卡塔尔(قطر‎;
if(req.url.indexOf(“??”卡塔尔国 > -1卡塔尔(قطر‎{ // combo财富让 3400 端口的服务管理proxy.web(req, res, { target: ” }卡塔尔; } else { //
直接重临 proxy.web(req, res, { target: req.url }卡塔尔(قطر‎; } }卡塔尔(قطر‎.listen(3399,
function(卡塔尔国{ console.log(“在端口 3399 监听浏览器乞请”卡塔尔(英语:State of Qatar); }卡塔尔;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var http = require(‘http’);
// npm i http-proxy –save
var httpProxy = require(‘http-proxy’);
var proxy = httpProxy.createProxyServer({});
 
var server = http.createServer(function(req, res) {
  console.log(req.url);
  if(req.url.indexOf("??") > -1){
    // combo资源让 3400 端口的服务处理
    proxy.web(req, res, { target: ‘http://127.0.0.1:3400’ });
  } else {
    // 直接返回
    proxy.web(req, res, { target: req.url });
  }
}).listen(3399, function(){
    console.log("在端口 3399 监听浏览器请求");
});

代码的意味是,利用 http-proxy 那一个 npm
包,代理浏览器的须求,浏览器上运用 switchSharp 设置本地代理为  ,当号令过来,先判定url,如若 url 中富含了 ?? 则将其当作 combo
能源管理,代理给本地的另三个服务  ,那几个服务选拔乞求后会将
combo 内容分解成八个,全体央浼完未来再吐出来。

2卡塔尔国. 使用本地服务央求 html 代码,替换 html 代码内容

运用强制花招(源码替换)将代码解 combo,比方源码页面为:

<!– html code –> <script
src=”;
<!– html code –>

1
2
3
<!– html code –>
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>
<!– html code –>

采用本地服务乞请这么些url,然后转变到:

<!– html code –> <script
src=”; <script
src=”; <script
src=”; <!– html code
–>

1
2
3
4
5
<!– html code –>
<script src="http://example.com/path/a.js"></script>
<script src="http://example.com/path/b.js"></script>
<script src="http://example.com/path/c.js"></script>
<!– html code –>

落成那一个操作的代码:

JavaScript

var http = require(‘http’); // npm i request –save; var request =
require(‘request’); http.createServer(function(req, res){ var path =
req.url.slice(req.url.indexOf(“path=”) + 5); console.log(path);
if(!path) { res.write(“path is empty”); res.end(); return; }
request(path, function (error, response, body) { if (!error &&
response.statusCode == 200卡塔尔 { console.log(body卡塔尔(英语:State of Qatar); // 代码替换 body =
body.replace(‘<script
src=”;’,
‘<script src=”
<script src=”
<script src=”;’ );
res.write(body); res.end(); } }); }).listen(3399, function(){
console.log(“listening on port 3399”); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var http = require(‘http’);
// npm i request –save;
var request = require(‘request’);
http.createServer(function(req, res){
    var path = req.url.slice(req.url.indexOf("path=") + 5);
    console.log(path);
    if(!path) {
        res.write("path is empty");
        res.end();
        return;
    }
    request(path, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body);
            // 代码替换
            body = body.replace(‘<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>’,
                ‘<script src="http://example.com/path/a.js"></script>\
                <script src="http://example.com/path/b.js"></script>\
                <script src="http://example.com/path/c.js"></script>’
            );
            res.write(body);
            res.end();
        }
    });
}).listen(3399, function(){
    console.log("listening on port 3399");
});

例如伏乞  ,就可以得到天猫首页的源码,然后对得到的代码做替换。

☞ 消除代码压缩难点

对此这一个主题材料,建议在线上放两份源码,黄金年代份是裁减源码,少年老成份是未压缩源码,当页面
url 存在 debug
参数的时候,重回未压缩版本,正常重回压缩版本。当然,也得以使用上述方法管理难题。

然而,更客观的不二秘技应该是 sourceMap,前端未有地下,压缩代码只是增加了
红客 的攻击花销,并不要紧碍有力量的 hacker借系统漏洞侵犯。所以可感到源码提供风华正茂份 sourceMap
文件。

JavaScript

var gulp = require(‘gulp’); var sourcemaps = require(‘gulp-sourcemaps’);
gulp.task(‘javascript’, function() { gulp.src(‘src/**/*.js’)
.pipe(sourcemaps.init()) //.pipe(xx()) .pipe(sourcemaps.write())
.pipe(gulp.dest(‘dist’)); });

1
2
3
4
5
6
7
8
9
10
var gulp = require(‘gulp’);
var sourcemaps = require(‘gulp-sourcemaps’);
 
gulp.task(‘javascript’, function() {
  gulp.src(‘src/**/*.js’)
    .pipe(sourcemaps.init())
      //.pipe(xx())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(‘dist’));
});

至于 sourceMap 的 gulp
插件配置,详细情形能够戳这里。不独有是
JavaScript,CSS 也许有 source maps,这几个新闻能够在 Chrome
调控台的装置选项中看看:

图片 3

☞ 代码的拉取

假若一个品类只有你精晓什么样校勘,那那些类型的手艺设计就有一点点糟糕了,为了让民众都能管理你项目中的难题,必必要索要一个简洁的情势为开采者赶快搭建测验环境,文书档案是单方面,假使有个少年老成键操作的授命,那就更棒了!

# 运营脚本 start: createFile getMod getPage # 创立目录 createFile: @[
-d module ] || mkdir module @[ -d page ] || mkdir page #
拉取模块客栈,这里有几十二个,比较费时,请耐性等待… getMod: cd module;
\ for i in $(MODS); do \ [ -d $(MODPATH)$$i ] || git clone
$(MODPATH)$$i; \ git co -b master;\ git co -b $(MODSV); done #
拉取页面仓库,tbindex getPage: cd page; \ @[ -d tbindex ] || git
clone $(PAGEPATH)$PAGE;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 启动脚本
start: createFile getMod getPage
 
# 创建目录
createFile:
  @[ -d module ] || mkdir module
  @[ -d page ] || mkdir page
 
# 拉取模块仓库,这里有几十个,比较费时,请耐心等待…
getMod:
  cd module; \
  for i in $(MODS); do \
    [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i; \
    git co -b master;\
    git co -b $(MODSV);
  done
 
# 拉取页面仓库,tbindex
getPage:
  cd page; \
  @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;

 

地方是三个 MakeFile
的有的代码,效率是创办开辟目录,拉取分支音信,然后开首服务器,张开浏览器,使用
IDE 展开目录,万事就绪,只等主人敲代码。

全体流程就风华正茂两分钟,实现支付在此以前全数的希图干活。那么些剧本不仅是给协调使用,如若别的人也急需参预开荒,二个发令就会让插手者步入支付格局,加上文书档案表明,省却了累累关联费用。

3.express 基于 Node.js 平台,火速、开放、极简的 web 开垦框架。

nmp install express -g

npm install express-generator -g(快捷成立express的完好目录卡塔尔(英语:State of Qatar)

express -h

express myapp

cd myapp

npm start

express

1.新建文件夹

cd到该文件目录下

npm init (enter name:myapp enter….)

npm install express

在myapp里面新建app.js

在app.js里面写代码

var express  = require(“express”),//加载express模块

http = require(“http”), //加载http模块

app  = express(卡塔尔, //创制三个express实例

server  = http.createServer(app卡塔尔(قطر‎; //app能够看作http创制服务器的回调函数

//静态财富挂载,设置静态能源目录

//中间件 express.static

//挂载中间件 使用use

app.use(express.static(“public”));

//定义三个获取访问顾客IP的中间件

//哪个先挂载,先选用哪个的代码

var ips = [];

function getIp(req, res, next) {

console.log(req.ip);

ips.push(req.ip);

next();

}

function responseIP (req, res, next) {

res.send(req.ip);

}

app.use((req, res, next) => {

console.log(“hello”);

next();

})

app.use(getIp);

app.use(responseIP);

app.get(“/”, (req, res) => {

res.send(“首页”);

})

app.get(“/list”, (req, res) => {

// console.log(req.ip);获取ip

res.send(“列表页”);

})

app.get(“/details”, (req, res) => {

res.send(“详情页”);

})

server.listen(3000, function() {

//监听端口号3000,并提醒服务成功张开

console.log(“Server has started”);

})

总括express:中间件和路由.

☞ 小结

优化流程、优化结构是大家努力百折不挠的样子,本文主要解说,编辑代码到调节和测量试验线上成效的长河,提议了消除combo
和代码压缩等主题材料的方案和提议。希望得以给不专长代理调节和测验的同室一点启示。

1 赞 收藏
评论

图片 4

fs模块(读写文件卡塔尔国

var fs = require(“fs”卡塔尔;//加载模块

//异步读取文件

fs.readFile(“./readme.txt”,”utf8″, (err, data) => {

if(err) throw err;

console.log(data);

});

//同步读取文件 Synchrous

var data = fs.readFileSync(“./readme.txt”,”utf8″);

console.log(data);

//异步写入文件

fs.writeFile(“./test.txt”, “This is test content~~~”,(err) => {

if(err)throw err;

console.log(“写入成功”卡塔尔(英语:State of Qatar);

})

console.log(“write”);

//同步写入文件

fs.writeFileSync(“./test.txt”, “This is test content~~~”);

console.log(“write”);

查看路线音讯stat:fs.stat(path, (err, stat卡塔尔国 => {}卡塔尔(قطر‎

fs.stat(“./test”, (err, stat) => {

if(err) throw err;

console.log(stat);

if(stat.isFile()) {

console.log(“该路径为文件”卡塔尔(قطر‎;

}else if (stat.isDirectory()) {

console.log(“该路径为文件夹”卡塔尔(قطر‎;

}

})

querystring模块 查询字符串

var qs = require(“querystring”);

var o = {

color: “red”,

border: “1px solid red”,

“font-size”: “16px”

}

var ret = qs.stringify(o, “;”, “:”);

console.log(ret);

// “color:red;border: 1px solid red;font-size: 16px”

1.http诉求页面,不是该文件目录下的页面重定向,别的的基于目录查找

var http = require(“http”卡塔尔(قطر‎; //CommonJS标准 加载模块

var fs = require(“fs”);

var path = require(“path”);

var server = http.Server(卡塔尔(قطر‎; //创造服务器

server.on(“request”, function(req, res) {

var filepath = path.join(__dirname, “./www”, req.url);

if(req.url === “/”) {

filepath = path.join(filepath, “index/html”);

}

try{

var stat = fs.statSync(filepath);

if(stat.isFile()) {

var content = fs.readFileSync(filepath);

res.setHeader(“Content0length”, Buffer.bytelength(content))

res.write(content);

}else if(stat.isDirectory() {

//当央求的路径是目录的时候

})

}catch(e) {

//重定向301(永久) 302(暂时)

res.writeHead(302, {

“Location” : “/”

})

}

res.end();

})

server.listen(3000, function() {

console.log(“server has started”);

})

发表评论

电子邮件地址不会被公开。 必填项已用*标注

CopyRight © 2015-2019 澳门新葡8455手机版 All Rights Reserved.
网站地图xml地图