javascript调试原理(一)(转)

我们先看一下C/C++和java的调试原理

C/C++调试原理:目前比较流行的调试工具是 GDB 和微软的 Visual Studio 自带的debugger,在这种 debugger 中,首先,需要编译一个“ debug ”模式的程序,将调试语句编译到该程序中。其次,在调试过程中,debugger 将会深层接入程序的运行,掌握和控制运行态的一些信息,并将这些信息及时返回。

Java调试原理:Java的调试使用Java 虚拟机工具接口(Java Virtual Machine Tool Interface,JVMTI)提供的调试接口。包括进入一个函数,进入一个语句的事件,得到当前上下文的API等等,你只要注册了这些事件,调用这些API即可。

从上面可以看出,调试的方式主要有两种,一种是自己写编辑,在目标文件中加入调试代码,由调试代码来做调试工作,另一种是运行该语言的容器本身提供了调试接口。

我们再来看javascript的调试。

目前的javascript调试工具也是用的第二种调试方式,IE和firefox分别提供了javascript的调试接口。

以firefox为例,它提供的调试接口是:jsdIDebuggerService,我们可以向它注入一些调试的钩子,来实现调试,它提供的调试钩子主要有:

钩子类 说明
breakpointHook Called when the engine encounters a breakpoint.
debuggerHook Called when the engine encounters the debugger keyword.
debugHook Called when the errorHook returns false.
errorHook Called when an error or warning occurs.
functionHook Called before and after a function is called.
interruptHook Called before the next PC is executed.
scriptHook Called when a jsdIScript is created or destroyed.
throwHook Called when an exception is thrown (even if it will be caught.)
topLevelHook Called before and after a toplevel script is evaluated.

包括firebug,venkman,ATF,aptana等调试工具都是实现这些钩子类来做调试的,譬如要做错误定位,就要实现errorHook,errorHook有一个方法

onError(message, fileName, lineNo, pos, flags, errnum, exc)就给出了错误信息,错误文件,行号,位置,等信息。只要向jsdIDebuggerService上注册errorHook,firefox发生js错误时就会调用该方法。

这种调试技术目前已经成熟,但是却都是只能在单个浏览器上调试,我们要在其它浏览器上调试还是比较困难的。

开源项目Javascript Debug Toolkit用另一种原理做了跨浏览器调试javascript的工具,和C/C++的调试一样,它先把javascript编译为带调试代码的目标文件,在浏览器中运行,只要这些调试代码能够做到跨浏览器,整个调试工具就能跨浏览器了。

我们看一下Javascript Debug Toolkit是如何工作的。来看一个例子。

源代码

function test(a,b){

    var c = a + b;

    return c;

}

目标调试代码

jsdebug("test.js",1);function test(a,b){

jsdebug("test.js",2);    var c = a + b;

jsdebug("test.js",3);    return c;

jsdebug("test.js",4);}

这样在每一行代码执行前都会调用jsdebug函数,该函数可以向调试服务器发调试通知,可以把当前的context传给调试服务器,调试服务器与调试代码进行交互(通过ajax技术),包括单步执行,跟进,跟出等都会可以实现。

这种技术的最大好处就是跨浏览器,目前已经能够在ie,firefox,safari,chrome,opera以及一些掌机浏览器上调试javascript。相信这种技术也会很快被使用起来,会有更多跨浏览器的javascript调试工具出现。

原文地址:https://www.cnblogs.com/gdutbean/p/2352581.html