菜单

jvisualvm btrace 实践,在线调试java程序

2019年2月13日 - Json

☞ 解决代理遭逢的标题

上面我们关系了三个难点,平常费用碰到最喉咙痛的二个是 combo ,曾经大家页面上的代码加3个?_xxx  参数就可以一直开端调试形式,那是因为程序的入口唯有3个,而且具有脚本的正视也卷入到3个叫做
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"&gt;&lt;/script&gt;

1
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>

☞ 解决 combo 问题

这会儿经过 Fiddler/查尔斯工具比较难满意急需,对于这么些题材有五个处理方案:

1). 浏览器请求全体代理到本地的一个劳动

先是写3个当地服务:

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"&gt;&lt;/script&gt;
<!– 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"&gt;&lt;/script&gt; <script
src=”http://example.com/path/b.js"&gt;&lt;/script&gt; <script
src=”http://example.com/path/c.js"&gt;&lt;/script&gt; <!– 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"&gt;&lt;/script&gt;’,
‘<script src=”http://example.com/path/a.js"&gt;&lt;/script&gt;\\
<script src=”http://example.com/path/b.js"&gt;&lt;/script&gt;\\
<script src=”http://example.com/path/c.js"&gt;&lt;/script&gt;’ );
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
控制台的安装选项中观察:

图片 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 打开目录,万事就绪,只等主人敲代码。

一切工艺流程就一两秒钟,落成开发此前所有的备选工作。这么些本子不仅仅是给自个儿行使,假使其余人也亟需加入开发,一个命令就能让插手者进入开发方式,加上文档表明,省却了许多关联花费。

配置

在%JAVA_HOME%\bin
目录下开拓jvisualvm,菜单中”工具”->”插件”->”可用插件”
中,勾选”BTrace Workbench”,点击安装即可。

☞ 小结

优化流程、优化架构是大家着力坚贞不屈的自由化,本文主要演讲,编辑代码到调试线上效用的进度,提议了化解combo
和代码压缩等难题的方案和提出。希望能够给不擅长代理调试的同班一点启发。

1 赞 收藏
评论

图片 2

实战

  1. 被调剂的代码

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;
    }
}
  1. 遵从注释打上断点后,使用debug形式运作程序。此时会在断点停留。
  2. 开辟jvisualvm,选拔Test程序,鼠标右击,采纳”Trace
    application…”如下图:

图片 3 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)));
    }
}
  1. 点击上方的Start按钮,稍等片刻,”output”区域将应运而生”** BTrace
    up&running”,如下图所示:

图片 4 6.
被调剂的代码中的断点继续执行(Resume[F8]),会意识服务端有出口,如图所示:

图片 5

  1. 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

如下图所示:

图片 6

此案例只是显示了BTrace强大效用的冰山一角,请读者对象们参考官网,在骨子里行使中挖潜它更大的威力。

☞ 开启懒人调试格局

当看到线上冒出难点(只怕是其余同学负责页面的难点),脑中浮出这么的风貌:

复制代码 作者:”嘿,线上有失水准啊!作者要调节代码!”
电脑:”好的,主人。请问是哪位页面?”(弹出浮层) 小编:浮层中输入U帕杰罗L。
电脑:”请问是哪个地点出难点了?” 作者:(指着电脑)”模块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对应文件夹
  我:编辑代码,然后实时预览效果。

在此间大家要求缓解这样多少个难点

自然调试之后,可以还有七个操作:

本身:”哈,已经修复了,帮自身付诸代码~”
电脑:正在diff代码…收到确认提交信号,提交到预发环境…收到已经预览信号…正在公布代码…收到线上回归信号…流程截止

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

除开 debug 代码,我们须要做的就只是用肉眼看功用是或不是ok,整个流程优化下来,体验是很赞的!

背景

生产环境中只怕出现各类难题,尝试调试时须要取得程序运营时的多寡新闻,如方法参数、再次来到值来定位难点,通过古板的增多日志记录的章程尤其繁琐,而且亟需重新陈设及重启server,代价很大。BTrace应运而生,调试时无需重启服务,可以动态地跟踪java运维程序,将跟踪字节码注入到运维类中,对运作代码侵入较小,对质量上的震慑可以忽略不计。
官网地址请点击

在线调试方案的沉思与实施

2015/08/28 · HTML5 ·
调试

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

正文的要领不在移动端调试上,移动端调试无非就是调剂页面和调剂工具之间存在分离,消除那种分离并创办连结就能解决移动端的调试难点。重点阐释的是所见即所得的调试方式下会蒙受的遏止。

当我们开辟网页,发现1个模块没有正确地渲染恐怕空白时,若是控制台有报错,会向来依照报错定位到源码地方上马
debug;如果控制台没有报错,则会依据模块名恐怕模块特征的3个值,通过全局搜索找到那些模块的任务,然后在调节工具中断点,单步调试,找到难题所在,此时我们或者会如此做:

情形一:

小A同学打开控制台,发现断点调试不好写代码,于是将滑坡的源码复制一份保存到地点,格式化,然后将线上财富通过代理工具代理到地面文件。

情形二:

小B同学早早的为温馨配了一份本地开发条件,于是他遇上难点将来,直接去源码中固定错误地方,由于应用的是预处理语言,所以要求先打包编译之后再在当地预览效果。

情形三:

小C同学的调剂格局是小A和小B的汇总版本,将线上的财富代理到地面 build
目录文件,在 src 目录下修改之后编译打包到 build,然后预览。

☞ 代理调试的不快

而对于比较复杂的线上环境,代理也会境遇不少绊脚石,比如:

线上财富 combo

并发谬误的本子地址为 http://example.com/path/??a.js,b.js,c.js ,它对应着
a.js,b.js,c.js 七个剧本文件,如若大家利用 Fiddler/Charles那样的经典代理工具调试代码,就务须给这几个工具编写插件,恐怕在轮换配置内部加一堆判断只怕正则,开销高,门槛高。

线上代码压缩

打包压缩,那是上线之前的必经流程。由于大家在包装的环节中并没有设想为代码添加
sourceMap,而线上后边对应 index-min.jsindex.js
也因为安全方面的缘由给干掉了,那给我们调试代码造成了巨大的不便利。

代码依赖较多,拉取代码难点

多多时候,大家的页面依赖了五个 asserts
财富,而那一个能源各自分布在多少个仓库里面,甚至散布在区其余昭示平台上,为了可以在源码上清晰的调剂代码,大家只可以将有着的能源下载到本地,时期只要存在下载代码的权能难点,整个调试进度就慢下来,那是充裕无法忍受的政工。比如某系统打造的页面,页面上的模块都是以仓库为维度区分的,贰个页面大概对应了5-肆贰拾二个仓库,下载代码实为劳动。

最可怕的调节是,本地没有对应的测试环境、代理工具又不满足大家的要求,然后就只好,
编辑代码->打包压缩->提交代码->查看效果->编辑代码->… ,如若您的品类支出是这种方式,请停下来,思考调试优化方案,正所谓磨刀不误砍柴工。

☞ 在线调试实践(一个系统的调节工具)

输入须要调剂的页面U奥迪Q5L(如
http://www.taobao.com):

图片 7

插件会分析 DOM,遍历拿到页面所有被引述到的仓库:

图片 8

选料要求调剂的模块(颗粒度细分到了html/js/css),点击调试按钮,可以看看调试页面的能源都会引用本地下载的文件。

相关文章

发表评论

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

网站地图xml地图