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调试工具出现。