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

输入必要调剂的页面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"&gt;&lt;/script&gt;

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"&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
控制台的设置选项中寓目：

☞ 代码的拉取

若是一个门类唯有你知道什么样修改，那这些类型的技能设计就有点不佳了，为了让芸芸众生都能处理你项目中的难题，一定要索要一个简练的方式为开发者疾速搭建测试环境，文档是一头，若是有个一键操作的授命，那就更棒了！

# 启动脚本 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 打开目录，万事就绪，只等主人敲代码。

全总工艺流程就一两分钟，完成支付从前所有的备选干活。那几个本子不仅仅是给本身使用，如果其外人也须求参预开发，一个发令就能让参加者进入支付格局，加上文档表明，省却了许多挂钩费用。

实战

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…”如下图：

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”，如下图所示：

6.
被调剂的代码中的断点继续执行(Resume[F8])，会发现服务端有出口，如图所示：

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

如下图所示：

本案例只是突显了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个仓库，下载代码实为劳动。

最吓人的调试是，本地没有对号入座的测试环境、代理工具又不知足我们的须要，然后就只好，
编辑代码->打包压缩->提交代码->查看效果->编辑代码->… ，要是您的系列支出是那种形式，请停下来，思考调试优化方案，正所谓磨刀不误砍柴工。

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

2015/08/28 · HTML5 ·
调试

原稿出处：
李靖（@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，整个流程优化下来，体验是很赞的！