新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

如果控制台没有报错

在线调节和测量检验方案的探究与奉行

2015/08/28 · HTML5 · 调试

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

正文的要领不在移动端调节和测验上,移动端调节和测量检验无非正是调理页面和调弄整理工具之间存在分离,化解这种分离并创建连结就能够化解移动端的调试难点。入眼阐释的是所见即所得的调节和测量试验方式下会蒙受的阻挠。

当大家开采网页,开采贰个模块未有科学地渲染大概空白时,固然调控台有报错,会直接根据报错定位到源码地点上马 debug;如若调整台未有报错,则会依靠模块名大概模块特征的八个值,通过全局找寻找到这一个模块的岗位,然后在调治工具中断点,单步调节和测量检验,找到难题所在,此时大家恐怕会这么做:

情形一:

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

情形二:

小B同学早早的为自身配了一份本地开辟意况,于是她蒙受标题未来,直接去源码中一定错误地方,由于选择的是预管理语言,所以必要先打包编写翻译之后再在地点预览效果。

情形三:

小C同学的调节和测验格局是小A和小B的综合版本,将线上的能源代理到地头 build 目录文件,在 src 目录下修改今后编写翻译打包到 build,然后预览。

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

而对于比较复杂的线上意况,代理也会遇见相当多绊脚石,比方:

线上能源 combo

并发谬误的本子地址为  ,它对应着 a.js,b.js,c.js 七个本子文件,要是大家应用 Fiddler/查理那样的经文代理工具调节和测量试验代码,就亟须给这一个工具编写插件,或许在轮换配置内部加一群推断只怕正则,成本高,门槛高。

线上代码压缩

包装压缩,那是上线此前的必经流程。由于大家在卷入的环节中并未虚构为代码增多sourceMap,而线上从前对应 index-min.jsindex.js 也因为安全方面的案由给干掉了,这给大家调试代码产生了天崩地塌的不低价。

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

比比较多时候,大家的页面重视了多少个 asserts 财富,而那些财富各自布满在四个仓Curry面,乃至撒布在不一样的宣布平台上,为了能够在源码上清晰的调度代码,我们只可以将拥有的能源下载到本地,时期只要存在下载代码的权力难题,整个调节和测验进程就慢下来,那是分外无法经受的作业。比如某系统创设的页面,页面上的模块都以以宾馆为维度区分的,一个页面恐怕对应了5-肆十多个饭馆,下载代码实为劳动。

最骇人听他们说的调节和测量试验是,当地未有相应的测验情状、代理工科具又不满足我们的须要,然后就不得不, 编辑代码->打包压缩->提交代码->查看效果->编辑代码->... ,即使你的门类支出是这种格局,请停下来,思量调节和测量检验优化方案,正所谓磨刀不误砍柴工。

☞ 开启懒人调节和测验情势

当看到线上出现难题(恐怕是其余同学担当页面的标题),脑中浮出这么的光景:

复制代码 笔者:"嘿,线上有问题啊!小编要调解代码!" Computer:"好的,主人。请问是哪位页面?"(弹出浮层) 小编:浮层中输入ULANDL。 计算机:"请问是哪些地点出标题了?" 笔者:(指着Computer)"模块A和模块B。" 电脑:正在下载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,整个工艺流程优化下来,体验是绝对的赞的!

☞ 消除代理境遇的标题

地点大家提到了多少个难点,平日开采境遇最头疼的贰个是 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/查尔斯工具相比较难满意需要,对于这一个标题有多个管理方案:

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

比方诉求  ,就可以得到天猫首页的源码,然后对得到的代码做替换。

☞ 消除代码压缩难题

对此那几个标题,提议在线上放两份源码,一份是减掉源码,一份是未压缩源码,当页面 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 调整台的安装选项中看到:

图片 1

☞ 代码的拉取

假使贰个连串独有你掌握怎么修改,那那个种类的手艺布署就有一些不好了,为了让大家都能管理你项目中的难题,应当要索要三个简洁的方式为开拓者急速搭建测量试验景况,文书档案是一派,如若有个一键操作的一声令下,那就更棒了!

# 运行脚本 start: createFile getMod getPage # 创立目录 createFile: @[ -d module ] || mkdir module @[ -d page ] || mkdir page # 拉取模块货仓,这里有几11个,相比费时,请耐心等待... 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 打开目录,万事就绪,只等主人敲代码。

一切工艺流程就一两分钟,落成支付在此之前全部的图谋干活。那么些本子不独有是给自个儿使用,假设别的人也急需参预开荒,二个发令就能够让加入者步向开荒格局,加上文书档案说明,省却了广大牵连费用。

☞ 在线调节和测量检验施行(三个类别的调治将养工具)

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

图片 2

插件会深入分析 DOM,遍历获得页面全体被引述到的饭馆:

图片 3

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

☞ 小结

优化流程、优化架构是咱们大力百折不挠的矛头,本文首要解说,编辑代码到调节和测验线上功效的经过,建议了解决combo 和代码压缩等主题素材的方案和建议。希望得以给不专长代理调节和测量检验的同室一点启发。

1 赞 收藏 评论

图片 4

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:如果控制台没有报错

您可能还会对下面的文章感兴趣: