澳门在线威尼斯官方 > 威尼斯澳门在线 > 在线调试方案的思考与实践

原标题:在线调试方案的思考与实践

浏览次数:116 时间:2019-09-14

在线调节和测量试验方案的构思与奉行

2015/08/28 · HTML5 · 调试

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

正文的中央不在移动端调节和测量试验上,移动端调节和测量检验无非就是调解页面和调护医治工具之间存在分离,消除这种分离并创办连结就能够缓慢解决移动端的调试难题。着重阐释的是所见即所得的调节和测验格局下会遇到的遏止。

当大家开采网页,开掘二个模块未有科学地渲染或许空白时,倘若调节台有报错,会直接依据报错定位到源码地方上马 debug;要是调节台未有报错,则会依赖模块名或然模块特征的三个值,通过全局寻找找到这几个模块的职责,然后在调整工具中断点,单步调节和测量试验,找到难点所在,此时大家只怕会这么做:

情形一:

小A同学张开调整台,开掘断点调节和测验倒霉写代码,于是将滑坡的源码复制一份保存到地点,格式化,然后将线上能源通过代理工科具代理到地头文件。

情形二:

小B同学早早的为协和配了一份本地开垦景况,于是她超过标题今后,直接去源码中一定错误地方,由于应用的是预管理语言,所以要求先打包编写翻译之后再在本地预览效果。

情形三:

小C同学的调试情势是小A和小B的归咎版本,将线上的财富代理到地头 build 目录文件,在 src 目录下修改以往编写翻译打包到 build,然后预览。

cmd命令:

   ./  当前目录

   ../ 上一级

   dir  查看当前目录

   ls  查看当前目录下文件

   windows 切换盘符 d:

   cls清屏

   cd +文件加名

☞ 代理调节和测量试验的沉闷

而对于相比较复杂的线上景况,代理也会遭受重重阻碍,举个例子:

线上能源 combo

并发谬误的台本地址为  ,它对应着 a.js,b.js,c.js 多个本子文件,借使大家选择 Fiddler/查理那样的经文代理工科具调节和测量检验代码,就非得给那个工具编写插件,或许在轮换配置内部加一群判别恐怕正则,成本高,门槛高。

线上代码压缩

装进压缩,那是上线以前的必经流程。由于大家在卷入的环节中并不曾虚构为代码增添sourceMap,而线上事先对应 index-min.jsindex.js 也因为安全方面包车型大巴原由给干掉了,那给我们调节和测量检验代码产生了强大的不便利。

代码注重非常多,拉代替码难题

相当多时候,大家的页面重视了八个 asserts 能源,而这一个财富各自布满在三个旅馆里面,乃至传布在不相同的颁发平台上,为了能够在源码上清晰的调弄整理代码,大家只能将有着的能源下载到本地,时期假设存在下载代码的权限难点,整个调节和测试进程就慢下来,那是那一个不能够忍受的事情。比方某系统创设的页面,页面上的模块都以以货仓为维度区分的,贰个页面大概对应了5-四15个酒店,下载代码实为劳动。

最吓人的调解是,本地未有对应的测量试验景况、代理工科具又不满足大家的急需,然后就只能, 编辑代码->打包压缩->提交代码->查看效果->编辑代码->... ,如果你的项目开垦是这种方式,请停下来,思虑调节和测量试验优化方案,正所谓磨刀不误砍柴工。

es6:

1.let/const

2.目的里的方法function能够总结

3.函数中的暗许参数

4.template

5.箭头函数

6.开展操作符

7.解构赋值

8.Symbol

9.class 模拟类,但真相是依附原型的

10.for ...of

11.promise 解决回调金字塔.回调鬼世界

12.生成器函数,能够脱离函数

13.JS模块化

☞ 开启懒人调节和测验形式

当见到线上冒出难点(或然是其余同学负担页面包车型地铁标题),脑中浮出如此的气象:

复制代码 作者:"嘿,线上十分啊!笔者要调度代码!" 计算机:"好的,主人。请问是哪位页面?"(弹出浮层) 笔者:浮层中输入UEnclaveL。 计算机:"请问是哪个地方出难题了?" 笔者:(指着计算机)"模块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,然后映射到本地

自然调节和测验之后,能够还会有叁个操作:

笔者:"哈,已经修复了,帮笔者付出代码~" Computer:正在diff代码...收到确认提交功率信号,提交到预发碰到...收到已经预览非随机信号...正在公布代码...收到线上回归功率信号...流程停止

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

除去 debug 代码,我们须要做的就只是用眼睛看效果是不是ok,整个工艺流程优化下来,体验是相当的赞的!

NodeJS:

1.node.js付出境况搭建

2.npm nodejs包管理器

3.CommonJS模块化规范化,速龙(require)

4.导出模块/加载模块

☞ 消除代理碰着的标题

上边大家提到了多个难点,经常支付境遇最咳嗽的一个是 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 监听浏览器请求"); });

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); // 代码替换 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");
});

举个例子诉求  ,就可以获得Taobao首页的源码,然后对获得的代码做替换。

☞ 消除代码压缩难题

对于那个主题素材,提出在线上放两份源码,一份是压缩源码,一份是未压缩源码,当页面 url 存在 debug 参数的时候,再次来到未压缩版本,不荒谬重回压缩版本。当然,也可以应用上述办法管理问题。

可是,更合理的秘诀应该是 sourceMap,前端没有地下,压缩代码只是扩张了 黑客 的口诛笔伐开支,并无妨碍有力量的 黑客借系统漏洞侵袭。所以可认为源码提供一份 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 调整台的装置选项中来看:

图片 1

☞ 代码的拉取

假设二个连串唯有你了然如何修改,那那些类别的本事布置就有一点不佳了,为了让大家都能管理你项目中的难点,要求求索要贰个精简的方式为开辟者快捷搭建测验碰着,文书档案是单方面,如若有个一键操作的授命,那就更棒了!

# 运维脚本 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 展开目录,万事就绪,只等主人敲代码。

全总流程就一五分钟,达成支付在此之前全体的筹划干活。这一个本子不仅是给和煦使用,假诺其余人也亟需加入开辟,多少个发令就会让参预者步向支付形式,加上文书档案表达,省却了十分的多联络费用。

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("写入成功");

})

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("该路径为文件夹");

}

})

☞ 在线调试实施(一个系统的调弄整理工科具)

输入要求调和的页面UavancierL(如 http://www.taobao.com):

图片 2

插件会剖判 DOM,遍历获得页面全数被引用到的仓库:

图片 3

选料供给调养的模块(颗粒度细分到了html/js/css),点击调试按键,可以观察调节和测量检验页面包车型大巴财富都会援用本地下载的文件。

path模块

var path = require("path"); //加载模块

path.dirname(url) 获取目录名

path.extname(url)获取后缀名

path.join([...paths]) 拼接路线

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:nodenodejs_2bc

☞ 小结

优化流程、优化架构是大家尽力百折不挠的趋势,本文首要解说,编辑代码到调节和测量检验线上效果的进度,建议了缓解combo 和代码压缩等难点的方案和建议。希望可以给不专长代理调节和测量检验的同桌一点启示。

1 赞 收藏 评论

图片 4

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"

http模块

var http = require("http"); //加载模块

var server = http.createServer((request, response) => {

//创立二个web服务器

//request

//response

//设置响应头

console.log(request.url);

switch(request.url) {

             case "/":

                    response.write("首页");

                     break;

case "/list":

response.write("列表页");

break;

case "/detail":

response.write("详情页");

break;

}

response.writeHead(200, {

"Content-Type":"text/html; charset=utf8"

})

response.end();

//if(request.url)

})

//http80端口号 ftp23端口号

server.listen(3000, function() {

console.log("server has started at port 3000");

})

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");

})

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:在线调试方案的思考与实践

关键词:

上一篇:没有了

下一篇:没有了