正在加载...

【背景描述】

随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决。然而对于一些特殊情况仍然无法享受到浏览器的强大调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经可以编译开发者工具,但是仍需要安装指定文件包或工具)、非正常浏览器web、移动场景下的内嵌等场景。 基于这个场景我们团队已经在nohost下引入了weinre,并得到了广泛的使用。 但是weinre是有一定的局限性,只能做到console.log和DOM查看等,不能支持断点调试。这里之前老文章已经有过一些描述,可参见http://www.webryan.net/2013/04/talk-about-remote-debugging-on-mobile-phone/


 111413_1344_breakpoint1.png

本文重点讲解不依赖浏览器控制台能力,单纯通过JavaScript方式来实现断点调试的能力,为大家解决问题提供另一种思路和方法。首先会给出工具的使用方法,让大家有感性认识,然后再讲解具体实现原理。

【测试使用】

1、cmd命令下执行”npm install breakpoint -g”(npm安装不赘述,-g为了全局安装且注册bin命令)
2、cmd命令行下执行”breakpoint”(会给出使用帮助,并默认启动测试目录:可以直接通过URL访问);
3、开启两个现代浏览器如chrome和safari,分别打开提示的两个URL。
111413_1344_breakpoint2.png

好了,简单三步就可以在浏览器里测试了。这个ui/index.html操作方法如下:

111413_1344_breakpoint3.png

111413_1344_breakpoint4.png


是不是很简单:),下面我们来给出实战例子;

【实战使用】

【参数说明】

Usage: breakpoint -d htdocsDir -r passbyRule

-d 指定本地静态目录,这里的HTML文件head里会被注入调试脚本。

-r 指定透传规则,通常用于将CGI请求透传给现网服务器;如果是需要透传给指定服务器,则需要在本地hosts文件中做一下指向;

-h 当存在多网卡的情况下,可以使用-h指定某一IP;

breakpoint执行后会在本地启用3个端口,80(用于提供访问服务)、8000(用于控制器)、8500(用于文件重写);

【实战举例】

假设我们域名是:abc.com;本地静态文件(HTML、CSS和JS等)目录是:e:\svn\trunk\htdocs\,那么可以通过”breakpoint -d e:\svn\trunk\htdocs”将所有的请求转发到本地目录,比如:http://abc.com/a.html会返回本地目录e:\svn\trunk\htdocs\a.html的内容。

111413_1344_breakpoint5.png

但是此时直接在浏览器中访问abc.com是不行的,需要先通过fiddler等工具将abc.com指向本地IP(参考Step 1的)。

111413_1344_breakpoint6.png

然后再访问 http://10.64.53.85:8000/ui/index.html 打开控制器;访问:http://abc.com/a.html 访问资源内容。

111413_1344_breakpoint7.png

不难发现,访问内容已经成功走了本地,且自动在头部加上了调试脚本,这就搞定了。

但是往往调试的时候,我们又希望某些文件访问现网资源或者其他服务器的资源,这个时候,可以通过-r参数来正则匹配放过对应的请求。比如:abc.com指向本地IP后,希望abc.com/cgi-bin/下的所有请求都发送到现网。 那么只需要执行”breakpoint -d e:\svn\trunk\htdocs\ -r cgi-bin”即可。

【原理分析】

如何通过JavaScript来实现断点调试?

断点调试的核心问题就是要让脚本在某行代码暂停执行,那么Aleksander Kmetec同学给出的解决方案是:通过在每行JavaScript前面加一个断点函数。而断点函数是通过AJAX的同步属性来阻塞浏览器

那么JavaScript修改前后的情况如下:

 

修改前 修改后

var a = 1;

var b =2;

function test(){

var c = ‘init’;

c=’change’;

}

Break();var a = 1;

Break();var b =2;

Break(); function test(){

Break(); var c = ‘init’;

Break(); c=’change’;

}

这样通过break函数里发起同步AJAX请求即可确定断点位置和阻塞浏览器执行后面的脚本了,真是很聪明的做法。

【breakpoint结构图】

111413_1344_breakpoint8.png

1、通过浏览器发起网页请求;

2、请求通过fiddler等方式指向到我们的重写服务,重写服务根据请求链接来处理流程。如果是匹配了-r的正则规则,则直接转发到现网服务器,否则则请求本地-d目录下的内容。

3、透传的内容直接不处理,其他的内容会判断:1、HTML文件则会默认在head第一行加入调试脚本的script(该脚本包括调试所需要的方法,如break();) 2、JS文件则会在每一行脚本前增加break();函数的调用。

4、重写服务返回数据给浏览器

5、当浏览器执行JS的时候,会先遇到break();则发起同步的XHR请求,阻塞住浏览器的执行。

6、如果通过调试服务UI界面设置过断点,调试服务则会hold住在break()里的XHR请求,直到调试服务UI发出新的命令(比如跳过、下一行等)

OK,原理就讲到这里。有问题可以随时给我留言。


: http://www.webryan.net/2013/11/breakpoint-for-javascript-debugger-without-browser-supportted/

本文相关评论 - 才 8 条评论
aaa
2013-12-07 21:17:29

看的头晕,能说详细点吗,小白一点不懂。。比如
1、cmd命令下执行”npm install breakpoint -g”(npm安装不赘述,-g为了全局安装且注册bin命令)
这个,是需要用什么工具的,直接用CMD运行这个不行啊,要装什么吗。然后比如谷歌浏览器怎么和手机连接,还有个你这个是测试本地保存的js和CSS吗,如果要测试网站上的一样的操作吗

[回复]

ryan 回复:

1、npm是nodejs的包安装工具,可以在http://nodejs.org/ 这里下载node及npm安装包。
2、如果是做手机端测试的话,可以使用weinre工具(需要开启web服务),在手机打开页面后,在浏览器打开页面即可。
3、如果要测试网站的css和js,逻辑是一样的,这个主要讲断点调试,如果不是断点调试的话,直接weinre可以搞定。

[回复]

2013-12-09 21:52:43

1、npm是nodejs的包安装工具,可以在http://nodejs.org/ 这里下载node及npm安装包。
2、如果是做手机端测试的话,可以使用weinre工具(需要开启web服务),在手机打开页面后,在浏览器打开页面即可。
3、如果要测试网站的css和js,逻辑是一样的,这个主要讲断点调试,如果不是断点调试的话,直接weinre可以搞定。

[回复]

aaa
2013-12-07 21:22:49

需要先通过fiddler等工具将abc.com指向本地IP(参考Step 1的)。

这个STEP 1 不知道是什么

[回复]

ryan 回复:

step1就是下面的那个图片,在fiddler — tools — hosts里设置即可。

[回复]

2013-12-09 21:54:09

step1就是下面的那个图片,在fiddler — tools — hosts里设置即可。

[回复]

aaa
2013-12-11 16:33:23

谢谢,已经知道了,,可是他的JS是封装在手机客户端里,抓包抓不到内容的,然后我研究了下你这个教程好像是要调用本地的CSS和JS。这样的话是不是就没办法了

[回复]

terripo
2014-02-20 17:56:55

你好,我想问一下,如果把weinre和aaordwolfs结合起来,难度是否会很大?

[回复]

ryan 回复:

结合难度不大,主要难点在于,aaordwolfs依赖于没有压缩过的JS,并对其进行处理。 而我们大部分生产环境上的代码是混淆压缩处理过的,所以就没有把它俩合到一起了。

[回复]

2014-03-23 19:37:09

结合难度不大,主要难点在于,aaordwolfs依赖于没有压缩过的JS,并对其进行处理。 而我们大部分生产环境上的代码是混淆压缩处理过的,所以就没有把它俩合到一起了。

[回复]

2015-12-26 11:56:42

[…] 为了突破限制,才华横溢的前(xian)辈(lie)们已经做了各种 不同的尝试,解决了不同场景下的开发痛点,但都难以达到使用桌面版Chrome中原生开发者工具远程调试移动版Chrome内页面的体验(资源全局搜索、命令行交互等)。 […]