如果控制台没有报错

在线调节和测验方案的考虑与实施

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-五十多个仓库,下载代码实为劳动。

最骇然的调整是,本地未有对应的测量试验景况、代理工科具又不满足我们的供给,然后就只可以,
编辑代码->打包压缩->提交代码->查看效果->编辑代码->… ,若是您的档期的顺序支付是这种情势,请停下来,寻思调节和测量检验优化方案,正所谓必先利其器。

☞ 开启懒人调试情势

当看到线上边世难点(只怕是其余同学负担页面包车型大巴主题材料卡塔 尔(英语:State of Qatar),脑中浮出如此的现象:

复制代码 笔者:”嘿,线上反常啊!小编要调治代码!”
计算机:”好的,主人。请问是哪位页面?”(弹出浮层卡塔尔国 作者:浮层中输入U揽胜极光L。
Computer:”请问是哪里出问题了?” 笔者:(指着Computer卡塔 尔(阿拉伯语:قطر‎”模块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,整个流程优化下来,体验是非常赞的!

☞ 消亡代理遭逢的主题材料

下边大家提到了八个难题,日常支付蒙受最胸口痛的三个是 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 代码内容

动用强制手腕(源码替换卡塔 尔(英语:State of Qatar)将代码解 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");
});

举例央求  ,就能够获得Tmall首页的源码,然后对获得的代码做替换。

☞ 消除代码压缩难题

对于这么些难点,提议在线上放两份源码,意气风发份是减少源码,大器晚成份是未压缩源码,当页面
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 张开目录,万事就绪,只等主人敲代码。

成套流程就后生可畏两分钟,达成开采在此之前全部的预备职业。这几个剧本不唯有是给和煦行使,即使别的人也急需出席开拓,四个限令就能够让出席者步向支付方式,加上文档表达,省却了重重联络花销。

☞ 在线调节和测验实施(三个系统的调剂工具)

输入须求调治将养的页面U奥迪Q5L(如
http://www.taobao.com):

图片 2

插件会深入分析 DOM,遍历得到页面全数被援用到的饭馆:

图片 3

分选须求调弄收拾的模块(颗粒度细分到了html/js/css卡塔尔国,点击调节和测验开关,能够见到调试页面包车型地铁能源都会援引本地下载的文件。

☞ 小结

优化流程、优化布局是大家尽力百折不挠的动向,本文主要演说,编辑代码到调节和测量试验线上效果的长河,提议了消除combo
和代码压缩等主题材料的方案和提出。希望得以给不专长代理调节和测验的同校一点启迪。

1 赞 收藏
评论

图片 4

相关文章

发表评论

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

网站地图xml地图