文章源自:http://soft.chinabyte.com/database/326/12776826.shtml
随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决。然而对于一些特殊情况仍然无法享受到浏览器的强大 调试能力,比如QQ客 户端内嵌web的调试(虽然说QQ目前已经可以编译开发者工具,但是仍需要安装指定文件包或工具)、非正常浏览器web、移动场景下 的内嵌等场景。 基于这个场景我们团队已经在nohost下引入了weinre,并得到了广泛的使用。 但是weinre是有一定的局限性,只能做到console.log和DOM查看等,不能支持断点调试。这里之前老文章已经有过一些描述,可参见 http://www.webryan.net/2013/04/talk-about-remote-debugging-on-mobile- phone/。
本文重点讲解不依赖浏览器控制台能力,单纯通过JavaScript方式来实现断点调试的能力,为大家解决问题提供另一种思路和方法。首先会给出工具的使用方法,让大家有感性认识,然后再讲解具体实现原理。
【测试使用】
1、cmd命令下执行”npm install breakpoint -g”(npm安装不赘述,-g为了全局安装且注册bin命令)
2、cmd命令行下执行”breakpoint”(会给出使用帮助,并默认启动测试目录:可以直接通过URL访问);
3、开启两个现代浏览器如chrome和safari,分别打开提示的两个URL。
好了,简单三步就可以在浏览器里测试了。这个ui/index.html操作方法如下:
是不是很简单:),下面我们来给出实战例子;
【实战使用】
【参数说明】
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的内容。
但是此时直接在浏览器中访问abc.com是不行的,需要先通过fiddler等工具将abc.com指向本地IP(参考Step 1的)。
然后再访问 http://10.64.53.85:8000/ui/index.html 打开控制器;访问:http://abc.com/a.html 访问资源内容。
不难发现,访问内容已经成功走了本地,且自动在头部加上了调试脚本,这就搞定了。
但是往往调试的时候,我们又希望某些文件访问现网资源或者其他服务器的资源,这个时候,可以通过-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结构图】
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发出新的命令(比如跳过、下一行等)。
相关推荐
ThinkPHP3.2.3利用行为扩展,实现浏览器控制台输出数据。 文件夹一共3个文件。 1.Behavior 请放在 Application\Common 下 2.function.php 请放在 Application\Common\Common 下 3.tags.php 请放在 ...
js检测用户是否打开调试工具(chrome) (function(){ var re=/x/;...现在介绍一个方法,非常管用,可以检测到你是否开启了控制台程序,可以算是JavaScript的一些奇淫巧技 将这段代码加入你的网站即可,原理不明
基于 Typescript React Mobx 实现的移动端浏览器控制台开发教程
Dom Animator是一款非常神奇的可以在浏览器控制台中执行源码动画的js插件。你是否想别人在控制台上查看你的源码时让人感觉与众不同?该js插件可以帮助你将指定的ASCII字符组成的多幅图案制作为动画,在控制台中显示...
现在,越来越多的浏览器都有了开发这工具或者Javascript控制台,通过这些工具,我们可以很方便的显示PHP代码中的变量或数组值。下面我们来做一个例子。例子中的PHP代码有四个跟踪级别:info, warn, log, error,...
1.对IE浏览器的调试 2 1.1. IE6,IE7浏览器对JS的调试方式 2 1.1.1准备工作 2 1.1.2调试脚本步骤 3 1.1.3总结 4 1.2.IE8浏览器对JS的调试方法 4 1.2.1.准备工作 4 1.2.2调试脚本步骤 5 ...5.Opera浏览器调试工具 35
Tiza:为浏览器的控制台添加样式
Tiza Tiza是一个用于浏览器控制台样式JavaScript库。 在此处查看演示:https://tiza.js.org安装NPM npm install --save tiza然后导入:从'tiza'//或通过Tiza导入tiza Tiza是用于浏览器控制台样式JavaScript库。 ...
Konsul 一个带有React渲染器的浏览器控制台抽象。它提供文本样式,图像,样式继承,按钮与点击互动等内部的浏览器开发控制台。
Konsole.js 一个屏幕调试器/记录器能够(可选)替换默认浏览器控制台
NULL 博文链接:https://taotie119.iteye.com/blog/1278837
在我们日常开发中,常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢?下面来一起看看。 这是我们用Sources断点...
控制台通过浏览器的控制台调试 Flash/ActionScript。 在不同的标签页或浏览器中调试网页/JavaScript。 作者:< > 演示:接收器: : AsSender: ://hellobug.me/play/asconsole/asdemo/ JsSender: ://hellobug.me...
山东大学选课脚本 使用方法 将js文件中的代码复制粘贴至浏览器控制台中,按下回车自动执行代码。 终止方法:退出当前页面或按下f5刷新页面。
普遍的浏览器控制台模拟器——无需打开开发工具即可查看控制台输出
断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome...
浏览器控制台构建错误 webpack 插件在浏览器控制台中输出 webpack 构建错误。用法 var BrowserConsoleBuildErrorPlugin = require ( 'browser-console-build-error-webpack-plugin' ) ;{ plugins : [ new ...
简单页面访问后台接口的一个样例,用于调试后台接口是否支持跨域,是否支持ajax请求,是否又正确的值返回前端,在postman正确的情况下浏览器不一定能成功,此时就需要用ajax模拟调用检查
consolelogSvgAnimated 在浏览器控制台功能中显示的动画Svg