Venkman中文手册

http://hi.baidu.com/cowfrog/blog/item/d2fd7989d26c62b20f24440a.html

venkman的教材讲的好的就只有下面那个链接，但貌似没有人去翻译，作为兴趣，让鄙人一试。
本人翻译水平不佳，加之时间不充足，因此翻译的节奏会很慢，但会一直更新下去。
此手册的英文链接为：http://www./code/learning_venkman/index.php
里面有对应的图，对不起，作者不是一般的懒。

首先，如果你还没有MOZILLA，得先去下载
venkman不是个独立的工具，它是与MOZILLA一起使用的，也因此能够调试Mozilla中的脚本或基于MOZILLA上的任一浏览器。此向导以venkman0.9.75版本、Mozilla 1.5 Alpha版本为基础讲述。下载软件请至：www.mozilla.org 只需要下载最近版本的即可。
需注意的是：
①你必须下的是Mozilla而不是firebird（因为后者并不和VENKMAN配套使用。Firefox虽然也可以，但是Mozilla与venkman结合的更好些）；
②Netscape7.1也可以和venkman一起用，但不知道确切是哪个版本。

在安装过程中，安装类型选择 “complete”。如果你要选“custom”的话，检查是不是有勾“Debugger"和"DOM inspector”这两项（如图1）。Debugger很明显就是venkman，DOM inspector是另一个有用的工具（在此先不讲，也许在后面的某页会提及）。

如果Mozilla安装完毕，却不想进行更新，只需要在venkman开发页中升级venkman：http://www./~ginda/venkman/

运行venkman
既然已经装好了Mozilla，是时候让venkman大显身手啦！打开Mozilla，在“工具”Tools-->“网页开发”Web Developement-->“JavaScript调试器”JavaScript Debugger，如图2。
注意：当你的Mozilla打开一些网页，而你此时点开了venkman，那么所打开的页面都会被装载进mozilla中进行调试。由此可见，多个页面可以一起调试(但为了保证健全性，我还是建议一次调试一页)。
当venkman启动后，它的样子应该如下图3。

如果有些面板不太一样（或是少了，或是位置不对），只需要在图右下角的控制台console里输入"/restore-layout factory"，就将会看到和图中一样的效果啦！

使Venkman符合个人习惯
Venkman总共包括8个提供信息的窗口[面板]，其中一些在使用时发挥的作用较大。再此，只是一个配置版面的快速指南（无非也就是用鼠标点啊拖啊放啊之类的）。如果你想知道版面摆放的样子有哪些，建议可以去看看Robert Ginda写的“版面截图大全”，
地址如下：http://www./~ginda/venkman/screenshots/
无论何时，如果你想回到最初的那样，只需要象前面说的在控制台输入："/restore-layout factory"就可以了。
在“视图”菜单中，你可以看到这两个选项“现在就保存默认版面”Save Default Layout Now和“退出时保存默认版面”Save Default Layout On Exit。如果你想为将来的用途而保存自己设置的某一个面板，记得按你的需求勾上其一。

每个面板都有相同的四个元素[⒈移出、移进窗口undock/dock window；⒉关闭窗口close；⒊标题title bar；⒋控制符号tab control]，如图4。

移出一个窗口
将你想要移出的窗口拿出来很简单，只需要点击左上角的按钮（undock/dock）就OK，它将会独立成为一个窗口，你想拖到哪就去哪。
想放回去的话，也只需要在独立的窗口中点击左上角的undock/dock。就这样简单！

窗口位置
如果你不满意窗口摆放的位置，可以点中窗口的标题然后将其拖到你想放的区域中。如果你拖的位置合适，会显示一个粗条[在边界处]，放掉鼠标后窗口的位置就在粗条那里。
如果想把两个窗口合并在一起，可以将其中一个脱到另一个的undock/dock处，这时方格变成了星号，放掉鼠标后，tab control处可以看到多了一项。
心动不如行动，动手试试，别怕搞乱，这样会让你更有体会。

隐藏窗口
点击“close”键可以隐藏窗口，如果想要恢复，到“视图”View菜单下选择子菜单“显示/隐藏”“Show/Hide”勾上你显示的窗口。

间隔线
在窗口间的横向和纵向上都有很多的间隔线，如图8
拖动他们调节窗口之间的区域大小。

基础
好了，前面讲的你都会了吗？现在关掉VENKMAN，用MOZILLA访问http://www./code/learning_venkman/venkman_example_1.html
这是我写的东西，它们是一系列包含SCRIPT的HTML文件，旨在说明VENKMAN的各个功能，当需要进入下一页时，我会告诉你点击链接的。

读取源代码
VENKMAN包含的基础操作之一是检查当前载入VENKMAN中的源代码。值得注意的是，VENKMAN只提供查看的功能，并不能修改，它不是编辑器。
现在“源代码”面板里没有内容，那是因为你还没有给VENKMAN指派什么事情（如果你什么都不指派的话，VENKMAN开始调试时自动显示与其相关的代码）
让我们动手试试查看HTML代码。有两种途径可以取得代码。
第一，你能看整个页面的代码（在这里，我们使用之前让大家打开venkman_example_1.html作为例子）或者直接跳到函数定义的地方。[我想这句话的意思是，要么看所有的代码，但如果只关心函数的话，可以通过VENKMAN直接查看而不去关心其他的代码。]

查看代码很简单，但得先确保你的“下载scripts”(Loaded Scripts)面板可见，参考图9(忽略XStringBubdle以及其他一些可能在在框里出现的东西，这不过是mozilla带的没用的附属东西)。

现在双击Loaded Script面板中HTML文件名，将会在“源代码”(source code)面板中出现文件的代码（如果出错或者有什么其他问题，尝试将窗口最大化后保存窗口大小），如图10。

当你双击文件名的同时，也将其树形结构打开(如果没有的话，你点击加号也可以打开)。下一层结构里的文件是包含在其HTML中的所有函数(比如图10中的test)。

双击函数名，在HTML文件显示中将会以高亮来显示函数的代码。如图11。

在Loaded Scripts面板中不仅仅是这个HTML文件，与其链接的JS文件同样也会被列出来。它们之间的操作没有什么不同。

Loaded Scripts
刚才用Loaded Scripts面板读取HTML的源代码。你将会注意到每个文件在Loaded Scripts中的图标是有所不同滴~下面将图标与其含义列出来：

  Icon         Type
     J          JavaScript (.js)
     H          Hypertext Markup Language (.html, .htm)
     Z          eXtensible Userinterface Language (.xul)
     X          eXtensible Markup Language (.xml)
     ？         All other files
     ■       JavaScript function

基本上这就是MOZILLA中包含可执行JS的所有文件了。在每个载入的文件中将会看见文件中定义的函数。如果在函数名旁有括号出现，是指venkman建议此处取名。参见
http://www./~ginda/venkman/faq/venkman-faq.html#guessed-functions]

交互式会话(interactive session)
学会了如何查看文件，现在来学习交互式会话。一个venkman很基础却非常有用的功能。

注意到一个名字叫“interactive session”的面板了吗？当你启动venkman时它就开始显示信息。带有过程处理的文本以venkman命令或其他的形式输入时以JS来执行。我们 来试试在下面的输入框中写进“1+1”，接着回车。输出箭头右边显示结果“2”。
让我们再进一步尝试，输入“b=65”[可在交互式会话中输入任何类型的代码，包括变量声明]。

因为这是JS，你不仅可以声明变量，还可以使用基础MATH，调用JS中的对象，比如：String类。试着输入：String.fromCharCode(b) + "B"
结果是AB。

帮助文件
我们只需要在interactive session下的输入框中写：/help或者是/help commandname
就可以看到浏览器中显示出的帮助文件。

设置上下文
当我们启动venkman时，“评估上下关系”(evaluation context)是程序自身的程序代码，这意味着JS代码由venkman来评估。然而我们让由MOZILLA加载的所有文档都具有这样的上下关系该怎么 做？首先，将Loaded Scripts下方的标签换成“open windows”，如图15。

点击Navigator Window下面的小加号，加号旁边的名字应该是加载到MOZILLA中的文件名venkman_example_1.html
右键点击文件名，选择“Set as evaluation object”（将其设置为评估对象），如图16。

现在你把HTML文件设置成为评估对象，你输入的JS就能操作加载进去的文件，也能从相同文件中析取信息。尝试在交互式会话中输入：document.title
输出的则是该文件的标题。[如果没有勾上该选项，输出的将是JavaScript Debugger]
因为在这个文件中我们声明了变量a，因此再输入a,将会返回它的值。

你不仅可以通过交互式会话来检查文档，还可以对其进行充分的操作。试着改变文档的标题：document.title = "muahah" + a    
如图12，输出muahah1的同时标题的值也发生了变化。
在对话框中按上下键（因为它记得历史命令），再查看文档的标题。返回值为muahah1。

基本调试
前面部分都主要讲的是检查静态文档，其实我们很少检查静态的，除非你用setTimeout之类的东西载入有事件发生的文档当中。现在我们来讲解动态及可执行脚本，虽然有很多种途径，但我们以最简单容易的入门。
首先，关掉venkman，点击venkman_example_1.html中的链接进入venkman_example_2.html再如常启动venkman，把新文档设置为评估对象。
{貌 似venkman在这里有个bug，就是关掉script debugger后再打开的话是没有效的。如果有达人知道怎么回事的还请赐教。我用的方法就是删除mozilla下extensions中的 venkman对应的plugin文件夹{f13b157f-b174-47e7-a34d-4815ddfdfeb8}，然后再将venkman的 xpi文件拷下来重新安装，真的很费劲}
{啊!原来不必关掉，直接reload就可以了,或者按ctrl+R,西西!}

你或许已经注意到工具条，并对其的功能充满好奇。现在你就可以用到它们啦！按下“Stop”键，你会发现它变成一个带有三点的停止符号，如图20。但是其他的按纽并没有变。

停止按纽会通知Venkman，仅仅停止（或暂停）当时正在执行的脚本。在此例中，没有脚本正在执行，所以也没有什么可关闭的。Venkman转到“等待事件发生”的状态。
一旦脚本开始执行（造成所有的东西重新运行的点击、触发事件或者页面重载），Venkman将会插手阻止这一切。

现在，我们调回目光到Mozilla身上，按下“Reload”键或是Ctrl+R。一旦按下，Venkman将会返回。原因是，当你按重载时，Mozilla重新载入页面，并开始执行页面中的脚本。

刚刚暂停页面脚本的Venkman应该如图21，注意当前行以黄色高亮，并且其他工具条上的按纽可用。

Stepping
我们现在已经接触了调试器的基础部分，比如暂停脚本的运行，当Mozilla运行它时，你能看到每一行代码。
按钮：step over/step into/step out。当你的鼠标指在按纽之上时，工具提示会分别告诉你他们“跨过函数的调用”、“进入函数调用”、“跳出当前函数调用”。眼下，我们忽略 “continue”（继续）、clock以及pretty flower几个按钮。

因此，你都可以控制调试器对JS中所给的任一行进行以上三种操作。{step over/step into/step out}
但请注意，这是“无打扰”特性，因为你step over了一个函数调用，却不意味着代码没被执行！这种情形我们很快就会给你演示。

现在，调试器暂停在JS的第一行（这行什么也没有,是空滴!）。按“step into”键，或是F11，让其到下一行。现在调试器暂停在了第4行，变量的声明处。现在试着在交互式会话中输入a，返回值应该是空。
现在再按一次“step into”，再输入一次a，你将会看到其值又是1了。

下一行，是函数声明，只需要再按一次step into，你会注意它直接跳到第9行，那当然是因为函数声明是一个单独的整体。

现在所在行是：var b=test(a);

在交互式对话框里输入a,注意输出是1。输入test(a),输出是：>＄[0]=[string]"passed : 1"

到目前为止，还没有什么让我们惊讶的东西出现。不过，一旦你按了某个键，马上就会有了。如果你按 下"step into",venkman会跳至第6行，并一行行的运行函数。如果按"step over"，函数仍会运行，只是你看不见而已{这就是我们在前面说到过的"无打扰"的特性}。试着按"step over"，并输入"b",它的值将是"passed:1".

继续按"step into/over"，直到脚本最后。你会看到按纽变为再次变得不可用，stop按钮再次显示"waiting".你最好再reload一次页面，多试几次其他的方法，从而可以更好的感觉按钮的作用。

图中几句话一起翻译了:   venkman支持在source code框中显示范围域.如图21中所显示的灰色区域，就是黄色行的范围.


调试器关键字
使用stepping的方式读完一个拥有大量信息的脚本显然很不方便。为此，你可以使用调试器关键字。不管脚本在何时运行，关键字在何时使用，venkman在何时运行,何时停止。

在mozilla中，转到下一个文件：venkman_example_3.html

接下来，你能看到“debugger”这个字如何在函数内出现。这很像让venkman暂停执行的命令。

t=1+3;
function f(a){
   debugger;
   return a+1;
}
document.write( f(t) );

运行venkman，reload一次Mozilla窗口，venkman应该立刻回转至第6行。如图24.

重要的是，使用调试器关键字不会在没有Venkman运行的mozilla中产生错误。然而请注意，只在windows下的支持调试器的Mozilla和IE才会如此。在这些浏览器中，如果没有运行调试器，关键字会被无声的拒绝（也就是没有错误产生）。但可能会在其他浏览器中出现错误，把它们从代码中挑出来！


挑出stuff&DHTML上的标记
当然，venkman允许你跳过你并不关心的代码，这得以遗漏掉调试中文件和个别函数为代价。这个例子和此页中介绍的其他例子有些不同，这里会涉及一个“动态HTML”。我们会看到如何将stuff排除在调试之外，并且venkman如何与“活动”的代码作用。

在mozilla中，我们转到下一个链接。venkman_example_mock_dhtml.html
这个文件非常小，但是它在论证venkman跳过指定函数或整个文件时确实有效。启动venkman，你会马上注意到一些东西。你会看到，例子是由一个链接的文件组成，这个链接的文件包含了一个单独的、小的函数：
function getPx(elm) {
     return parseInt(elm.style.left);
}
它的作用就是告诉你它与文件如何工作。基本上，当窗口装载（和按下"start"键）时init函数被调用来处理设置一个间隔的、重复调用的ShiftLeft. ShiftLeft是代码，它的作用是将块移动到左边，直到它到达500像素时候再从100开始。ShiftLeft调用函数getPx用以剖析现在的像素值，这个值来自红盒子的样式设置。clearDHTML是一个函数，通过清除init函数中的timeout(超时?)来停止盒子。
图25中显示了mock_dhtml例子中venkman做装载的文件.