www.qjdy.com-奇迹赌场 > 佳美特设计 > 如果控制台没有报错

原标题:如果控制台没有报错

浏览次数:191 时间:2019-09-26

在线调节和测量检验方案的构思与推行

2015/08/28 · HTML5 · 调试

原来的小说出处: 李靖(@Barret李靖)   

本文的要领不在移动端调试上,移动端调节和测验无非就是调解页面和调节和测量试验工具之间存在分离,化解这种分离并创办连结就能够缓和移动端的调节和测量试验难题。入眼演讲的是所见即所得的调节和测量检验形式下会境遇的拦截。

当大家开采网页,发掘一个模块未有精确地渲染大概空白时,假使调控台有报错,会向来依据报错定位到源码地方上马 debug;假如调节台未有报错,则会根据模块名可能模块特征的三个值,通过全局搜索找到那一个模块的职位,然后在调治工具中断点,单步调节和测量检验,找到难点所在,此时我们兴许会那样做:

情形一:

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

情形二:

小B同学早早的为和睦配了一份本地开荒情况,于是她撞见难点之后,直接去源码中固定错误地点,由于选取的是预管理语言,所以需求先打包编写翻译之后再在地头预览效果。

情形三:

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

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

而对于比较复杂的线上景况,代理也会碰着重重阻碍,比方:

线上能源 combo

并发谬误的台本地址为  ,它对应着 a.js,b.js,c.js 七个本子文件,假诺大家选取 Fiddler/Charles那样的经文代理工科具调节和测量试验代码,就不能不给那些工具编写插件,可能在轮换配置内部加一群推断大概正则,开销高,门槛高。

线上代码压缩

包裹压缩,那是上线此前的必经流程。由于大家在卷入的环节中并从未设想为代码增加sourceMap,而线上前面临应 index-min.jsindex.js 也因为安全地点的原由给干掉了,那给我们调节和测验代码产生了天崩地坼的不便利。

代码信任相当多,拉代替码难题

点不清时候,我们的页面信赖了五个 asserts 财富,而那几个财富各自布满在多少个饭馆里面,以致传布在不一样的昭示平台上,为了能够在源码上清晰的调理代码,大家只可以将有着的资源下载到本地,时期要是存在下载代码的权杖难点,整个调节和测试过程就慢下来,这是特不能够忍受的专业。举个例子某系统营造的页面,页面上的模块都以以客栈为维度区分的,一个页面或然对应了5-肆21个饭店,下载代码实为劳动。

最吓人的调度是,本地未有对号入座的测验情形、代理工科具又不知足我们的须求,然后就只可以, 编辑代码->打包压缩->提交代码->查看效果->编辑代码->... ,倘若您的类型开销是这种情势,请停下来,思虑调节和测量检验优化方案,正所谓磨刀不误砍柴工。

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

当见到线上冒出难点(恐怕是其余同学担任页面包车型地铁难点),脑中浮出那样的境况:

复制代码 笔者:"嘿,线上不平常呀!小编要调治代码!" 计算机:"好的,主人。请问是哪些页面?"(弹出浮层) 小编:浮层中输入U陆风X8L。 Computer:"请问是哪位地方出标题了?" 笔者:(指着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,前端未有地下,压缩代码只是扩展了 红客 的攻击费用,并不要紧碍有本领的 黑客借系统漏洞侵略。所以可感到源码提供一份 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 展开目录,万事就绪,只等主人敲代码。

全总流程就一两分钟,实现支付从前全部的备选干活。这几个本子不仅是给协和使用,借使其余人也须求加入开荒,一个指令就能够让插足者步向支付形式,加上文书档案表达,省却了数不完关联耗费。

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

输入需求调治将养的页面UPAJEROL(如 http://www.taobao.com):

图片 2

插件会解析 DOM,遍历得到页面全数被援引到的饭店:

图片 3

分选供给调治将养的模块(颗粒度细分到了html/js/css),点击调试开关,能够见到调节和测量试验页面的财富都会援用本地下载的文件。

☞ 小结

优化流程、优化架构是大家尽力持之以恒的自由化,本文首要演说,编辑代码到调节和测试线上作用的进度,提议了消除combo 和代码压缩等难题的方案和提议。希望能够给不专长代理调节和测量检验的同桌一点启发。

1 赞 收藏 评论

图片 4

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:如果控制台没有报错

关键词: CMD体育 HTML5

上一篇:   译文出处

下一篇:没有了