☞ 在线调试实践(一个系统的调剂工具)
输入必要调剂的页面URL(如
http://www.taobao.com):
插件会分析 DOM,遍历得到页面所有被引述到的堆栈:
选择需要调剂的模块(颗粒度细分到了html/js/css),点击调试按钮,可以看到调试页面的资源都会引用本地下载的公文。
配置
在%JAVA_HOME%\bin
目录下开辟jvisualvm,菜单中”工具”->”插件”->”可用插件”
中,勾选”BTrace Workbench”,点击安装即可。
☞ 消除代理碰着的难题
地方我们提到了三个难题,平日开销蒙受最发烧的一个是 combo ,曾经大家页面上的代码加一个
?_xxx 参数就可见平素伊始调试方式,那是因为程序的输入唯有一个,而且拥有脚本的正视也卷入到一个号称
deps.js 文件中,加上调试参数之后,可以将原来
combo 加载的文书: http://example.com/path/??a-min.js,b-min.js,c-min.js ,根据非
combo 的点子加载:
http://example.com/path/a.js http://example.com/path/b.js
http://example.com/path/c.js
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=”http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>
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: ‘http://127.0.0.1:3400‘ }); } 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 设置本地代理为 http://127.0.0.1:3399 ,当呼吁过来,先判断
url,即使 url 中含有了 ??
则将其看做 combo
资源处理,代理给地点的另一个服务 http://127.0.0.1:3400 ,这一个服务收取请求后会将
combo 内容分解成七个,全部请求完未来再吐出来。
2). 使用当地服务请求 html 代码,替换 html 代码内容
选择强制手段(源码替换)将代码解 combo,比如源码页面为:
<!– html code –> <script
src=”http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>
<!– 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=”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
–>
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=”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”); });
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");
});
|
比如请求 http://127.0.0.1:3399/?path=http://www.taobao.com ,即可得到天猫首页的源码,然后对拿到的代码做替换。
☞ 解决代码压缩难题
对于这么些难题,提出在线上放两份源码,一份是收缩源码,一份是未压缩源码,当页面
url
存在 debug
参数的时候,再次回到未压缩版本,正常再次回到压缩版本。当然,也足以动用上述措施处理难点。
可是,更客观的点子应该是 sourceMap
,前端没有地下,压缩代码只是伸张了
hacker 的攻击费用,并不妨碍有能力的 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
控制台的设置选项中寓目:
☞ 代码的拉取
若是一个门类唯有你知道什么样修改,那这些类型的技能设计就有点不佳了,为了让芸芸众生都能处理你项目中的难题,一定要索要一个简练的方式为开发者疾速搭建测试环境,文档是一头,若是有个一键操作的授命,那就更棒了!
# 启动脚本 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 打开目录,万事就绪,只等主人敲代码。
全总工艺流程就一两分钟,完成支付从前所有的备选干活。那几个本子不仅仅是给本身使用,如果其外人也须求参预开发,一个发令就能让参加者进入支付格局,加上文档表明,省却了许多挂钩费用。
实战
- 被调剂的代码
public class Test {
public static void main(String[] args) {
Test t = new Test();
System.out.println(t.add(1, 2));// 在此行打上断点
System.out.println(t.add(5, 7));
}
public int add(int a, int b) {
return a + b;
}
}
- 安分守纪注释打上断点后,使用debug情势运作程序。此时会在断点停留。
- 开辟jvisualvm,接纳Test程序,鼠标右击,选用”Trace
application…”如下图:
4.
在jvisualvm的文本框中录入如下代码:
/**
* http://kenai.com/projects/btrace
*/
import com.sun.btrace.annotations.*;
import static com.sun.btrace.BTraceUtils.*;
@BTrace
public class TracingScript {
@OnMethod(clazz = "Test", method = "add", location = @Location(Kind.RETURN))
public static void func(@Self Test instance, int a, int b, @Return int result) {
println("调用堆栈:");
jstack();
println(strcat("add 方法参数a:" , str(a)));
println(strcat("add 方法参数b:" , str(b)));
println(strcat("add 方法返回:" , str(result)));
}
}
- 点击上方的Start按钮,稍等片刻,”output”区域将现出”** BTrace
up&running”,如下图所示:
6.
被调剂的代码中的断点继续执行(Resume[F8]),会发现服务端有出口,如图所示:
- jvisualvm的”output”区域中,出现额外的故事情节,
** Compiling the BTrace script ...
*** Compiled
** Instrumenting 1 classes ...
*** Done
** BTrace up&running
*** Done
** BTrace up&running
调用堆栈:
Test.add(Test.java:8)
Test.main(Unknown Source)
add 方法参数a:1
add 方法参数b:2
add 方法返回:3
调用堆栈:
Test.add(Test.java:8)
Test.main(Unknown Source)
add 方法参数a:5
add 方法参数b:7
add 方法返回:12
** BTrace has stopped
** BTrace has stopped
如下图所示:
本案例只是突显了BTrace强大作用的冰山一角,请读者对象们参考官网,在事实上行使中开掘它更大的威力。
☞ 小结
优化流程、优化架构是大家力图锲而不舍的样子,本文主要演讲,编辑代码到调试线上效用的长河,指出了化解combo
和代码压缩等难点的方案和提出。希望可以给不善于代理调试的同桌一点启发。
1 赞 收藏
评论
背景
生育环境中或者现身各个题材,尝试调试时索要得到程序运行时的多寡信息,如方法参数、再次回到值来定位难点,通过古板的伸张日志记录的不二法门丰富麻烦,而且亟需重新安排及重启server,代价很大。BTrace应运而生,调试时无需重启服务,能够动态地跟踪java运行程序,将跟踪字节码注入到运行类中,对运行代码侵入较小,对品质上的熏陶可以忽略不计。
官网地址请点击
☞ 代理调试的沉郁
而对此相比较复杂的线上环境,代理也会蒙受不少绊脚石,比如:
线上资源 combo
出现错误的本子地址为 http://example.com/path/??a.js,b.js,c.js ,它对应着
a.js
,b.js
,c.js
多个剧本文件,即使大家使用 Fiddler/Charles那样的经典代理工具调试代码,就非得给那个工具编写插件,可能在轮换配置内部加一堆判断恐怕正则,开销高,门槛高。
线上代码压缩
装进压缩,那是上线之前的必经流程。由于大家在卷入的环节中并从未考虑为代码添加
sourceMap,而线上事先对应 index-min.js
的 index.js
也因为安全方面的原委给干掉了,那给我们调试代码造成了庞然大物的不便民。
代码看重较多,拉取代码难点
许多时候,大家的页面看重了五个 asserts
资源,而这个资源各自分布在多个仓库里面,甚至散布在分裂的文告平台上,为了可以在源码上清晰的调剂代码,大家只好将有所的资源下载到本地,时期只要存在下载代码的权能难题,整个调试进程就慢下来,那是卓殊无法经受的作业。比如某系统营造的页面,页面上的模块都是以仓库为维度区分的,一个页面恐怕对应了5-50个仓库,下载代码实为劳动。
最吓人的调试是,本地没有对号入座的测试环境、代理工具又不知足我们的须要,然后就只好,
编辑代码->打包压缩->提交代码->查看效果->编辑代码->… ,要是您的系列支出是那种形式,请停下来,思考调试优化方案,正所谓磨刀不误砍柴工。
在线调试方案的思辨与实施
原稿出处:
李靖(@Barret李靖)
本文的中央思想不在移动端调试上,移动端调试无非就是调剂页面和调剂工具之间存在分离,化解那种分离并创立连结就能消除移动端的调试难点。重点阐释的是所见即所得的调试形式下会蒙受的拦截。
当大家开辟网页,发现一个模块没有正确地渲染或然空白时,假诺控制台有报错,会一直依据报错定位到源码地方上马
debug;如若控制台没有报错,则会依照模块名恐怕模块特征的一个值,通过全局搜索找到这一个模块的职分,然后在调试工具中断点,单步调试,找到难题所在,此时大家可能会如此做:
情形一:
小A同学打开控制台,发现断点调试不佳写代码,于是将精减的源码复制一份保存到地头,格式化,然后将线上资源通过代理工具代理到本半夏件。
情形二:
小B同学早早的为友好配了一份本地开发条件,于是他遇见难点以后,直接去源码中稳定错误地方,由于应用的是预处理语言,所以要求先打包编译之后再在地面预览效果。
情形三:
小C同学的调剂方式是小A和小B的汇总版本,将线上的资源代理到本地 build
目录文件,在 src 目录下修改之后编译打包到 build,然后预览。
☞ 开启懒人调试格局
当看到线上面世难点(只怕是其余同学负责页面的题材),脑中浮出这么的场所:
复制代码 我:”嘿,线上有难点呀!我要调节代码!”
电脑:”好的,主人。请问是哪个页面?”(弹出浮层) 我:浮层中输入URL。
电脑:”请问是哪些地点出难点了?” 我:(指着电脑)”模块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,然后映射到本地
当然调试之后,可以还有一个操作:
自家:”哈,已经修复了,帮自身付诸代码~”
电脑:正在diff代码…收到确认提交信号,提交到预发环境…收到已经预览信号…正在公布代码…收到线上回归信号…流程甘休
1
2
|
我:"哈,已经修复了,帮我提交代码~"
电脑:正在diff代码…收到确认提交信号,提交到预发环境…收到已经预览信号…正在发布代码…收到线上回归信号…流程结束
|
除外 debug 代码,大家要求做的就只是用肉眼看作用是不是ok,整个流程优化下来,体验是很赞的!