各种主流浏览器的调试

调试工具的使用

目录

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

1.2.3总结 8

2对火狐进行调试 8

2.1安装Firebug 8

2.2、打开和关闭Firebug 9

2.3、查看、编辑HTML元素及其CSS 11

2.4、查看动态生成的HTML代码的方法 14

2.5、查看/测试页面的函数执行效率 14

2.6、使用Firebug查看XMLHttpRequest 15

2.7、查看页面上所有的CSS与JS 16

2.8、查看页面上所有的资源列表 17

2.9、使用Firecookie调试页面cookie 18

3.Chrome浏览器对JS的调试方法 18

3.1.准备工作 18

3.1.1所涉及的版本 18

3.1.2存在的问题 18

3.2调试脚本步骤 19

3.2.1实例所需代码（例子） 19

3.2.2调试的基本步骤 20

3.3总结 25

4对Safari进行调试 25

4.1启用Safari的调试功能 25

4.1.1浏览器简介 25

4.1.2安装与使用 25

4.2开启Debug菜单 31

4.3 Debug菜单选项 31

4.4查看当前页面的html结构 32

4.5查看当前页面的资源 32

4.6查看当前页面的脚本 33

4.7查看运行时控制台信息 34

4.8调试脚本 34

5.Opera浏览器调试工具 35

5.1.Dragonfly简介及其工作原理 35

5.2调试方法 36

5.2.1主要有两种调试方法： 36

5.2.2如何得到 Dragonfly？ 39

5.2.3如何启动 Dragonfly 40

5.2.4用户界面概述 42

5.3基本操作 43

5.3.1脚本标签 44

5.3.2调用栈面板 47

5.3.3线程日志面板 48

5.3.4检查面板 48

5.3.5命令行 49

5.3.6DOM标签 50

5.3.7网页样式表标签 52

5.3.8样式标签 53

5.3.9 DOM属性标签 55

5.3.10布局标签 57

5.3.11错误控制台标签 57

 

1.对IE浏览器的调试

1.1. IE6,IE7浏览器对JS的调试方式

1.1.1准备工作

1.1.1.1下载install-companionjs-v0.5.3

首先下载install-companionjs-v0.5.3.rar，然后按照默认路径安装。

1.1.1.2 安装

双击install-companionjs-v0.5.3.exe安装

 

1.1.1.3取消“禁止脚本提示”

然后打开ie6或IE7浏览器选择工具->Internet选项- >高级->浏览，把禁止脚本调试的两个选项的对号勾掉。

 

1.1.2调试脚本步骤

第一步：打开你要调试的页面，查看->脚本调试程序->打开，会在浏览器左上角出现以下的情况。

 

第二步：点击红色的error的图片就会在浏览器下面出现调试信息，在左边会出现代码。右面会出现代码的错误信息。点击右边的错误，左边就会显示相应的错误代码。

 

1.1.3总结

    IE6，IE7调试javascript感觉不是太好用，IE8自带的调试工具比这个好用多了

1.2.IE8浏览器对JS的调试方法

1.2.1.准备工作

1.2.1.1取消“禁止脚步调试”

点击菜单栏工具->Internet选项->高级->设置->浏览。把“禁用脚本调试(Internet Explorer)”和“禁用脚本调试(其他)”的对号取消掉。

1.2.1.2 打开调试工具

单击菜单栏工具->开发人员工具，便可打开如下工具或按F12快捷键也可

 

1.2.2调试脚本步骤

第一步：设置断点

   点击工具栏上的“脚本”，选择需要调试的文件。在文件右侧单击鼠标便可设置断点如图：

 

单击所在行则此行前端就会有断点，设置断点后，当程序运行到断点时便会暂停运行

第二步：启动调试

点击“启动调试”按钮，开始启动调试。返回IE8页面，触发javascript事件如单击按钮，程序运行到断点后暂停如图：

 

第三步：逐语句调试

单击工具栏上的逐语句调试或按F11快捷键进行逐语句调试如图：

 

第四步：逐过程调试

单击工具栏上的逐过程调试按钮或按F10快捷键进行逐过程调试

第五步： 跳出调试

单击工具栏上的跳出调试按钮或按shift+F11快捷键跳出调试

第六步：停止调试

单击停止调试按钮或按shift+F5快捷键停止调试

第七步： 控制台

调试中程序出错可单击后侧工具栏控制台按钮

第八步：局部变量

在调试过程中，单击右侧工具栏局部变量按钮可看到程序中的局部变量，名称-值-类型如图：

 

第九步：监视

单击右侧工具栏的监视按钮在单击“单击以添加”输入要坚持的变量，对象回车便可监测到其的值、类型如图：

 

1.2.3总结

    IE8自带的此调试工具已经足够强大，可以满足我们平时对javascript的调试需求，其简单易用，比IE6，IE7调试javascript的插件好上手。其次，此调试工具对HTML，CSS等也都有调试，大家不妨亲手试试。

2对火狐进行调试

2.1安装Firebug

Firebug在Firefox浏览器中运行。另外有一个Firebug lite版本，可以通过javascript调用，包含在页面中，从而在其他非Firefox浏览器中使用。

安装Firebug，请访问Firebug下载页面。点击该页面右边栏中部巨大的橙黄色按钮即可。你也可以在Mozilla的FireFoxAdd-ons站点下载它。安装后只要重新启动FireFox，就可以使用了。

 

如果你已经安装过了，那么请检查是否更新到了最新版本。打开Firefox的“Tools”菜单，选择“Add-ons”命令，然后在弹出窗口中点击左下角的“Find Updates”按钮。

2.2、打开和关闭Firebug

在Firebug网站上，可以找到它的快捷键设置。最常使用以下三种方法：

 

* 打开Firebug：按F12，或者点击浏览器状态栏右边的绿色标志。

 

* 关闭Firebug：按F12，或者点击浏览器状态栏右边的绿色标志，或者点击Firebug窗口右上角的红色关闭标志。

* 在单独窗口中打开Firebug：点击firebug窗口右上角的红色箭头标识，或者使用Ctrl+F12/⌘+F12按钮。

 

Firebug的相关设置：

* 固定Firebug在新窗口打开：先打开firebug，点击左上角的bug标志，选择options菜单中的“Always Open in New Window”设置。

* 增加/缩小字体大小：先打开firebug，点击左上角的bug标志，选择“Text Size”命令。每次字体变化的幅度非常小，你可能需要使用多次。

 

* 限制只对某些站点使用Firebug：先右击浏览器状态上的green check mark标志，选择“disable Firebug”命令。然后，再右击这个已经变灰的标志，选择“Allowed Sites...”命令，增加允许Firebug生效的域名。

 

2.3、查看、编辑HTML元素及其CSS

安装好Firebug之后，你可以通过点击浏览器右下方的小虫子打开Firebug，如图：

 

或者直接按F12，如果要以窗口形式打开的话，就按下CTRL+F12

打开Firebug之后，点击“查看”，然后选择页面上任何需要编辑的地方，Firebug会将其选中，并且在HTML结构中将其高亮，如图：

 

之后你可以对该元素的HTML结构、属性进行任意的编辑，修改后的效果都会实时的展现在页面当中。

同时在Firebug的右侧是该元素对应的CSS样式，如下图：

 

图中的样式，显示了该元素被重新定义的样式继承关系，比如“继承自body.CurHome”的“text-align”属性被“继承自div.shell”的“text-align”覆盖，原先的属性就会以中横线的形式表示出来。如果要查看所有的属性，请勾选图中标“1”的选项。
单击“2”可以禁用/打开某条CSS属性；单击任意一个属性或者属性值可以进行CSS的编辑，如“3”；双击“4”则可以新建一条CSS属性。现在我们点击下“5”来看看CSS布局面板：

 

上面这幅图展现的是一个HTML结构的标准盒模型，通过点击相应的数值可以修改该值，同时在浏览器窗口中显示出对应的效果来。

2.4、查看动态生成的HTML代码的方法

通过“查看源代码”的方法，无法看到由JS动态生成的HTML结构，这里我们可以通过Firebug来查看，如下图，选中“body”节点，按下“编辑”，即可输出页面上源文件的代码以及动态生成的代码。

 

还有另外一种简单的方法，选中你要查看的页面元素，然后在右键菜单中选择“查看选中部分源代码”

2.5、查看/测试页面的函数执行效率

查看页面上所有函数执行效率可以很容易的找到运行最慢的函数，从而帮助WD有针对性的进行页面的JS优化。如图，为需要调试的页面“启用控制台”：

 

点击“概况”开始收集，再次点击即可停止，然后进行查看。

在firebug控制台的最底下是一排命令行，在这里你可以输入任意JS语句，按下回车键即可执行：

 

使用console，还可以测试一段代码或者函数的执行时间，点击命令行最右侧的红色按钮切换到命令行多行模式：

 

2.6、使用Firebug查看XMLHttpRequest

使用Firebug查看XMLHttpRequest，对于调试AJAX是很有帮助的。如图：

 

为需要调试的站点开启“网络”监控功能，其实该功能可以查看页面上所有类型的post和get请求，并且还会显示出请求消耗的时间。对于XMLHttpRequest会有详细的参数与返回值。

2.7、查看页面上所有的CSS与JS

在页面调试中我们发现，对于外部引用的CSS与JS很难进行调试，使用基于Firebug的Yslow扩展即可解决该问题。首先在Yslow的主页上下载一个最新的版本装上：http://developer.yahoo.com/yslow/

 

在Firebug小虫子的右边就是Yslow，后面的数值是当前页面完全加载所消耗的时间，点击Yslow即可打开（或者通过Firebug的Yslow面板，运行“Performance”进行页面分析）。

 

如上图，选择“All JS”后，当前页面的所有内部JS和外部JS都会被显示在一个新开的页面中，这样查看页面上所有的JS源代码就变得方便多了。

2.8、查看页面上所有的资源列表

其实前面第四点介绍到的“网络”功能就可以查看所有资源列表，而且可以通过查看状态来进行对应的优化（例如排查404元素）。这里可以通过Yslow的components功能看到到包括类型与详细路径的资源列表：

 

鼠标hover可以看到对应的缩略图，点击则可在新窗口中打开。更多Yslow功能请查看其主页。

2.9、使用Firecookie调试页面cookie

Firecookie是基于Firebug的cookie调试工具，先到作者的主页上了解下详细信息，再下载一个安装上。
http://www.softwareishard.com/blog/firecookie/
安装好之后，Firebug中会多出一个“cookie”面板，你可以为需要调试的页面添加、删除、修改cookie信息。

 

 

 

3.Chrome浏览器对JS的调试方法

3.1.准备工作

3.1.1所涉及的版本

本文档所说都是基于chrome 7版本的，下载及安装问题我相信大家应该都没有什么问题。

3.1.2存在的问题

我发现调试功能中有个小bug（作者发现的），尤其是在打开调试窗口时打开控制窗口，我的chrome浏览器会像变魔术一样从屏幕上消失（在下面的调试过程中没有遇到这样的问题，可能是作者用的β版的）。接下来的步骤将不再由我控制。我仅仅是用了一个很简单的测试页面就出了问题，不敢想象更大工作量下的情况。

如果你设置了断点后关闭了调试工具，断点任然存在（在测试过程中发现对程序运行没有影响，但是再次启动调试工具后原来的断点会对调试产生影响）。

注：以上问题，作者在MAC本本上调试出的问题，你不一定会碰到，不用在意。

3.2调试脚本步骤

3.2.1实例所需代码（例子）

下面是一个简单的HTML页面以及外部引用的js文件，有两个函数和两个按钮，两个函数分别是两个按钮点击时的处理函数。

HTML页面：

 
 
 

 
 
   
   
 

JS页面（hello2函数部分）：
function hello2( foo ){
  var d = new Date();
  var str = foo + "\n\nHello World - Two.\n\nIt is ";
  alert( str + d.toString() );
}

3.2.2调试的基本步骤

第一步：保存上面的代码和页面然后在chrome中打开该页面。

第二步：你可以通过两种方式打开调试窗口，一种是点击地址栏右侧的按钮-->Tools -->JavaScript控制台（如图2）；另一种是通过快捷键Ctrl + Shift +I打开。调试窗口打开后，你将看见一个很大的带滚动条的信息显示窗（如图3）。

 

 

第三步：点击Hello 1按钮，就可以显示代码有没有错误，提示会出现在Console窗口中。设置断点，如图4所示，点击第6行的数字位置那里，会出现一个蓝色的箭头。

 

第四步：当你点击图5中所提示的按钮时，代码就会在断点处停止执行。在Console输入栏中也可以输入命令来进行设置和执行。

 

第五步：图6是把正确代码中的导入js脚本是的“hello2.js”改成了“hello3.js”，形成一个错误代码。在Console中给出了错误提示。（这是在Elements窗口中，图7是在Scripts窗口中）。

 

 

第六步：在Elements窗口中选中某一行，点击右键如图所示，可以进行更多的操作。

 

3.3总结

其实，如果对IE和Firefox浏览器的调试方法了解后就很容易对chrome的调试方法上手，因为chrome不需要安装什么插件，它本身自带了调试工具，我们只需要掌握一些相关的命令就可以很熟悉第对chrome进行操作。

 

4对Safari进行调试

4.1启用Safari的调试功能

4.1.1 浏览器简介

Safari,苹果计算机的最新作业系统Mac OS X中新的浏览器，用来取代之前的Internet Explorer for Mac。Safari使用了KDE的KHTML作为浏览器的运算核心。目前该浏览器已支持Windows平台

Safar浏览器内建于MacOSX。MacOSX中的图形技术能确保系统中所有软件，从iPhoto到FInalCutPro输出的图片都绚丽无比。Safari是唯一采用高级色彩管理、以最准确的色彩显示网络图片的浏览器。Safari在2003年1月7日首度发行测试版，并成为MacOSXv10.3与之后的默认浏览器，也是iPhone与iPodtouch的指定浏览器。Windows版本的首个测试版在2007年6月11日推出，支援WindowsXP与WindowsVista，在2008年3月18日推出正式版。

 

4.1.2 安装与使用

第一步：打开安装文件，直接点击下一步，如图1

 

（图1）

第二步：选择我接受然后下一步，如图2：

 

（图2）

第四步：选择安装位置和安装选项（安装windows版Bonjour能够检测到你本地网络中的共享设备，并使这些共享设备可供你使用）。点击安装（如图3）

 

（图3）

安装中。。。

 

成功界面：

 

使用：

Safari是“Mac和Windows平台上最快速最高效的网络浏览器，对HTML 5和CSS 3等最新网络标准有良好的兼容性，能够完美支持下一代的交互式网络应用。”

Safari 4的新特色包括：

 

Top Sites顶级网站 按下书签栏中新增的Top Sites按钮，可一次性浏览最多24个常用网站的缩略图。对于自己最爱的网站，可用大头针将其固定在屏幕上的特定位置。当某网站自上次浏览后更新时，其右上角就会显示蓝色五角星提示。

 

Cover Flow封面浏览 iTunes甚至iPod中久负盛名的Cover Flow封面浏览功能这次被移植到了Safari浏览器中，用来直观的查看浏览历史或书签网站。

 

完整历史搜索 可以在Cover Flow模式下逐页查看自己的浏览历史，快速检索到曾经访问的任何一层页面。

 

顶置标签栏 多窗口浏览的标签栏被移到了浏览器窗口的最上方，可以轻松拖曳或增减窗口。值得一提的是，Windows XP系统下的顶置标签栏让Safari 4的外观大不一样，颇有一些Google Chrome的味道。

智能地址栏 根据“顶级网站”、书签和浏览历史，在用户输入网址时提供自动完成协助。

智能搜索栏 浏览器内置搜索栏嵌入Google的搜索建议功能。

全页面缩放 在不影响页面布局的前提下，自由缩放网页文字大小。

开发工具 内置网页开发工具，方便开发人员debug、调整或优化网页代码。

 

原生Windows外观 Safari 4的Windows版本终于有了和其他Windows软件协调一致的标题栏、边框、工具栏等。

除以上重点新功能外，Safari 4的细节更新项目多达150项。Safari 4公开测试版支持Mac OS X和Windows系统，目前仅有英文版本，但对中文网页的支持没有什么问题，字体显示也和之前的Safari浏览器有明显区别。值得注意的是，要使用Top Sites、Cover Flow这样的可视化功能，需要DX9.0 32MB显存显卡（Windows平台）或ATI Radeon以上、NVIDIA GeForce 2 MX以上16MB显存显卡（Mac平台）的支持。

Acid 3测试满分

 

 

4.2开启Debug菜单

Safari 3.1以及更高版本在高级预置面板内可以通过选项开启。Safari 3以下版本可以通过以下方法打开：

Mac OS X

在Safari未运行的情况下打开终端，输入以下命令：

% defaults write com.apple.Safari IncludeDebugMenu 1

打开Safari，调试菜单出现在菜单栏中。

Windows

在Safari未运行的情况用文本编辑器打开文件c:\Documents and Settings\your username\Application Data\Apple Computer\Safari\Preferences.plist，在标签之前插入以下代码：

IncludeDebugMenu

打开Safari，调试菜单出现在菜单栏中。不过功能比Mac系统的少一些。 

 

4.3 Debug菜单选项

开启Debug菜单后，开发者可以使用以下功能：

· 显示DOM树状结构

· 显示渲染树状结构

· 显示视图树状结构

· 显示片断编辑器

· 显示缓存窗口

· 显示页面载入测试窗口

· 显示透明窗体

· 总是检测文字换行

· 使用向前/后退缓存

· 使用线形图片解码

· 对所有字体使用ATSU(Apple Type Services for Unicode)

· 关闭RSS支持

· 纪录Javascript错误

· 显示Javascript控制台

· 键盘和鼠标快捷

· 切换用户代理

4.4查看当前页面的html结构

单击元素选项，就会在下面的控制台左边输出当前页面的html元素结构，我们设计人员可以很清楚的认识当前页面的html元素结构，检查标签之间的嵌套关系是否正确。每个开始标签之前都有一个三角形符号，那是用来折叠成对标签的。当我们的页面设计的比较复杂的时候，代码可能会很长，这是我们可以采用折叠一些已经设计好的标签使结构更加清晰。在控制台右侧，会显示当前html元素的样式信息。如下图所示：

 

4.5查看当前页面的资源

单击资源选项卡，会罗列出当前页面所加载的全部资源信息，而且能够显示加载文本、图像、脚本、其它所消耗的时间。这对我们开发人员分析网页加载速度很有用处。如下图所示：

 

 

 

4.6查看当前页面的脚本

单击脚本选项卡，在下面控制台的左侧会显示当前页面所加载的全部脚本。如下图所示：

 

4.7查看运行时控制台信息

单击控制台选项卡，会输出当前页面运行时信息。如果当前页面所加载的脚本存在语法错误或发生运行时错误，都会在这里输出一些错误信息。我们开发人员可以根据这些提示信息寻找产生错误的原因，进而修正错误。如下图所示：

4.8调试脚本

单击脚本选项卡，会在控制台左侧显示出当前页面所加载的脚本，我们可以在需要调试的地方行首单击鼠标左键，就会产生一个断点，如图所示。在控制台的右侧上方，我们可以看到有五个按钮，他们的作用依次是：暂停脚本调试、单步不进入函数体执行、单步进入函数体内部执行及跳出当前函数体。下面有监视表达式栏，我们可以根据需要设置监视表达式。

在断点栏，会罗列出已经设置的断点信息。如下图所示：

 

 

5.Opera浏览器调试工具

5.1.Dragonfly简介及其工作原理

Opera 蜻蜓（Dragonfly）是Opera 软件公司提供的开发工具，它的架构使它既可以在平面电脑运行，也可以在手机等移动设备上运行。

一个 Scope 模块将传递出运行时的信息,比如被调试 Opera实例中的网页和应用。 这个实例作为调试的主机，为客户端提供信息。主机和客户端之间数据相互传输使用 Scope协议规范和定义。

为了解决潜在的防火墙问题，一个代理会用来协调处理浏览器和调试器间的信息传递沟通。一个具体的应用实例是使用普通桌面电脑调试一个运行在手机上网页或者应用。而客户端，如调试器，可以将信息视觉化并允许用户操作运行时环境主机和客户端可以运行在不同的设备上，而代理可以运行在任何两者中任一实例，也可以在单独服务器运行。

 

 

5.2调试方法

5.2.1主要有两种调试方法

本机：Scope，代理和调试器运行在同一个Opera 实例中。

远程：Scope 和调试器运行在两个不同的Opera 实例上，比如，两个不同的设备上。而代理可以运行在两实例之一，也可以在另外的独立计算机上运行。

本机:这是最常用和最典型的方法。开发者们正在开发网络应用，它可以正常运行于 Opera浏览器。该调试器运行于相同实例中，显示在一个独立窗口或面板。

 

在这种情况下，调试主机，代理和客户端运行于同一个浏览器实例。Opera 选择一个随机端口运行代理，Scope 模块和调试器会自动连接它。

溃的时候非常有用。远程:这个方法的一种应用是可以调试手机上的网页或应用。手机一般屏幕很小，开发也很受限制，因此用桌面电脑来调试是一种方便的做法。

另一种可能性是在同一个设备上的一个 Opera 实例调试另一个 Opera 实例，这在调试实例濒临崩

远程调试方法可以分解为两种用法：

代理在两实例之一运行。代理独立于实例运行，比如运行在公共服务上。

 

第二种方法可以运用在，被调试实例和调试器隔防火墙运行的情况。

 

组件

此架构由下列组件构成：

运行时调试主机 Scope 模块 Scope 协议 代理 调试客户端
每个 ECMAScript 环境都是一个单独的运行时。每个HTML 文档也都关联一个独立的运行时。框架和iframe 中的文档也有自己的运行时。

调试主机

调试主机可以是任何启用了 Scope 模块并且连接到代理的 Opera 实例。它可能包含多个运行时。

Scope 模块

Scope 模块是 Opera程序的一部分。一旦启用，模块将向代理 URL建立一个 socket连接并检测调试主机上的任何运行时。之后它会将信息发送给调试器。它也会对调试器的特定命令作出响应，比如从选定节点下载DOM。

Scope 协议

Scope 协议是一套用来在主机和客户端之间交换关于运行时信息的规则和格式。实例包括从运行时得到 DOM 文档结构，或者计算得到的样式集合。

Scope 协议仍在开发之中。一旦完成，它将被完全公开。之后其它厂商或开发者可以创建自己的调试客户端并将它们整合到程序中，如IDE （例如Aptana 或Eclipse）。使用此scope 协议，此类客户端可以收集到一个Opera 浏览器的运行时信息。

代理

代理负责在浏览器和调试器之间中转信息。在远程调试方法中它非常重要，即调试主机和客户端不在同一个计算机上。

Opera 运行调试器的实例会提供一个内置的代理，但代理也可以运行在一个公共服务器上。这样，被调试实例和调试器可以均在防火墙之后。

怎样将主机和客户端连接到代理，请参见《Opera 蜻蜓简介》。

调试客户端

调试器即为客户端，它通过代理连接到调试主机的 scope 模块。它会接收到该实例的运行时信息。调试器将运行时信息可视化，允许用户修改。它通过 Scope协议向 Scope模块回送请求以实现其功能。

目前调试器的实现完全基于网络技术：HTML/XML，CSS以及 JavaScript。

点击放大

 

5.2.2如何得到 Dragonfly

很简单 —— 较新版本的 Opera 浏览器(如最新的9.5版本)增加了一个名为 Scope的特性，此特性能预览、输出和验证网站的代码结构。所有支持Scope的 Opera都可以运行 Dragonfly。Kestrel beta 2版本支持 Dragonfly ——安装此浏览器即可。请注意在 Mac平台我们发现一个 bug，此 bug在 OS X平台上引起视频内存错误并将导致程序崩溃。为了避免此问题，Mac用户请使用新版本 http://snapshot.opera.com/mac/o950s_4808.dmg 。

5.2.3如何启动 Dragonfly

点击菜单中的 工具>高级> 开发者工具 将载入 Dragonfly用户界面，如图 1所示。

 

图 1： 启动 Dragonfly

主意：如果你需要使用其他版本的 Dragonfly ，请转到 Opera 首选项编辑器，找到 Developer Tools 部分，如图2所示。Developer Tools URL应指向Dragonfly ——如果你需要使用其他版本，请更新此 URL。

 

图 2： opera:config首选项编辑器 Developer Tools配置部分

在你修改并保存新配置后，需要重启 Opera 以使更改生效。

5.2.4用户界面概述

Dragonfly 界面默认如图 3所示。

图 3： 默认 Dragonfly 界面。

界面上的不同区域如下：

1. 脚本， DOM 和错误控制台标签：这些是用户界面的主功能区，通过此区域可以检查Opera 浏览器加载的网页的方方面面。

2. 网页信息窗口：此区域显示 Opera 浏览器已载入网页的信息，包括加载的 JavaScript 脚本和CSS 等信息。上面的下拉菜单可以选择显示哪一个网页的信息，选择后，此网站的信息被显示在下面的空白区域。如选择环境标签，此区域显示运行此浏览器的系统的信息。(见图 4)

3. 上下文相关工具 —— 根据选择的标签的不同此区域会显示不同的工具图标，如在脚本、DOM 和错误控制台标签下将显示不同的工具。后文会详细介绍这些工具。

4. 搜索框/快速查找 —— 使用此区域可以在不同标签中搜索各种内容。

5. 主信息窗口 —— 此区域内容根据所选择主标签的不同而显示不同内容，可能会显示脚本、CSS文件等内容。后文会详细介绍。

6. 命令行：可以在此区域输入 JavaScript 命令，以被 Opera Dragonfly 执行。

7. 信息面板：此区域显示内容根据主标签不同而不同 —— 可能显示你正在调试网页的脚本或者样式信息。后文会详细介绍此区域。

8. 状态显示器显示调试器或者被调试网页的状态。

 

图 4：环境标签显示运行 Dragonfly 的系统的信息。

现在你已经熟悉了 Dragonfly界面，让我们开始学习如何使用Dragonfly 。

5.3基本操作

在 Opera 浏览器中随意加载一些网页—— 可以根据你的喜好加载任意网页。加载网页后我的浏览器如图5所示。

 

图 5：使用 Kestrel beta 2 版本打开一些我收藏夹中的网站

这些网站被加载后将出现在 Dragonfly 界面的下拉列表中，如图6所示。

 

图 6：Dragonfly下拉列表中的网站

5.3.1脚本标签

点击脚本标签，在下拉列表中选择一个网页，并点击网页信息窗口中 URL下面的黑色文字。此时Dragonfly 如图7所示。这里我点击的是我同事的网页，你可以选择你自己喜欢的任何网站。

 

图 7：Dragonfly中查看 JavaScript文件

你可以通过点击行号设置断点 —— 见图8。

 

图 8：设置 JavaScript 断点

设置断点后运行脚本 (想办法运行你的脚本，例如点击按钮)，脚本程序会在断点处暂停，以便查看此时的运行环境—— 如查看变量值等。图9中我通过点击按钮执行playSong() 函数 —— 箭头表示程序当前暂停的位置。

 

图 9：箭头显示脚本程序目前暂停位置

注意在窗口底部显示 HTML DOM 标记，指明当前查看的元素在 DOM 树中的位置。所有视图中都显示此信息。左上角有一个按钮"刷新选中页面" ——此按钮将在浏览器中刷新选中页面，以回到其初始状态。

 

图 10：脚本源代码视图中的控件按钮

控件按钮(见图 10)从左到右依次提供如下功能：

· 继续 (F8)：断点暂停后继续执行程序。

· 跳进 (F11)：跳进断点处的函数。

· 跳过 (F10)：单步执行断点后的语句—— 你可以多次使用此按钮来跟踪程序运行情况。

· 跳出 (Shift + F11)：跳出函数。

· 运行到新脚本时停止：点击此按钮选择是否在运行到新脚本时停止。

· 运行到发现错误时停止：点击此按钮选择是否在运行到发现错误时停止。

· 日志线程：点击此按钮选择是否在线程面板（见右边）中记录线程日志。

· 

5.3.2调用栈面板

调用栈显示运行环境的函数调用情况 —— 以何种顺序调用了哪些函数。例如，函数 A 调用B ，函数B 调用C；最后C 函数、B函数和A函数依次返回。每个函数调用都可能改变运行环境，比如改变变量的值。图11显示了的一系列操作后的调用栈：我先运行到第一个断点处，然后跳进下一个函数。

 

图 11：调用栈，显示了函数调用情况。

可以通过点击调用栈中的函数来查看函数。试试看！

5.3.3线程日志面板

若选定了日志线程按钮(见上文)，线程日志面板将记录脚本程序的线程信息。图12 显示了运行我的实例代码后的线程日志面板。

 

图 12：线程日志面板

线程日志面板中有两个按钮，他们是：

· 清除日志：清除日志内容。

· 导出线程日志：以纯文本形式导出线程日志至新的浏览器窗口。

5.3.4检查面板

检查面板显示调用栈当前调用的属性，如图13所示。可以在调用栈中选择当前调用。

 

图 13：检查面板，显示调用栈当前选中调用的所有属性

检查面板左上角的按钮"在全局环境中隐藏默认属性"的功能如其名所示。试试看。

5.3.5命令行

命令行面板的用处是输入和执行 JavaScript 命令，以查找信息或测试 JavaScript 代码。例如，在命令行中输入下面的命令：

var a = 1;

var b = 2;

var c = a + b;

document.getElementsByTagName('div');

 

5.3.6DOM 标签

选择 DOM 标签并选择一个网站—— 将以可收缩/展开的方式显示选中网页的DOM，并在右边显示样式、DOM属性和布局（后面会详细介绍，见图14）。点击下面的文档或者网页样式表子标签，将改变显示内容，如点击网页样式表将显示网页中使用的 CSS。让我们暂时仍选择文档子标签。

 

图 14：在 Dragonfly 中查看网页DOM

常识在 DOM 树中点击不同元素，看看显示如何随之变化。请注意绿色高亮表示当前选中元素。

 

图 15： DOM 视图按钮

DOM 视图的主要按钮 (见图15)从左至右依次提供以下功能：

· 展开 DOM 树：点击此按钮将展开整个DOM 树。

· 导出当前 DOM 视图：点击此按钮将打开一个新的标签—— 导出标签，此标签显示当前DOM 视图（不显示折叠节点）

· 点击时自动找到元素：点击此按钮后，当你在网页中点击时，DOM 查看器自动选择点击位置所对应的元素。

· 鼠标滑过时高亮显示：点击此按钮后，当鼠标滑过网页时高亮显示此元素的边界。

· 删除节点时更新 DOM ：按此按钮后才能即时显示通过程序删除 DOM 节点(如通过在Dragonfly 命令行中输入div.parentNode.removeChild(div); ) 的效果。

· 显示注释节点：选择是否显示 HTML 和 CSS 注释。

· 显示空白节点：选择是否显示空白节点。

· 用树状结构显示 DOM ：若选中此按钮，将用树状结构显示 DOM 树，以更好的了解树结构。是否使用此视图取决于你的喜好。

· 帮助：点击此按钮将在浏览器中显示 Dragonfly 文档。

5.3.7 网页样式表标签

现在选择网页样式表标签 —— 此时会显示此网页中使用的网页样式表。选择不同的网页样式表会改变底部网页样式表子标签的内容，如图16所示。

 

图 16：在 Dragonfly 中查看网页样式表

网页样式表标签的左上角只有一个按钮，"使用简写属性"。此按钮控制CSS 属性值的显示方式：以完全方式显示还是以单行简写方式显示(如果有简写方式)。

我们已经介绍了界面左半部分，现在开始介绍右半部分。

5.3.8样式标签

样式标签包含两个部分：计算样式和样式，见图17

 

图 17：样式标签的两部分——计算样式和样式。

样式显示当前选中 DOM 节点的所有 CSS，计算样式则显示实际计算后的实际样式值。如图17所示，分别显示计算样式和样式是很有用的。

此标签左上角有两个按钮（如图 18所示）——他们是（自左向右）：

· 在计算样式中隐藏初始值：其功能如其名所示—— 控制是否在计算样式中显示初始值。

· 隐藏计算样式中的缩写：其功能如其名所示—— 控制是否隐藏计算样式中的缩写。

 

图 18：样式标签按钮

5.3.9 DOM 属性标签

此标签显示 DOM 对象当前选中元素的属性。注意此属性和HTML 属性不同——例如你选择img 元素，你会得到 DOM 属性 src，其值为图像的绝对 URL 地址。图19为 DOM属 性标签实例。

 

图 19：DOM属性标签

此标签在左上角有一个按钮，"隐藏空字符串和空值"，其功能如其名——控制是否显示空字符串和空值。

5.3.10 布局标签

此标签用图的方式直观的显示了当前 DOM 节点的几何信息，如显示了如父节点及子节点的位置关系、偏移量等信息。例子见图20.

 

图 20：布局标签

5.3.11 错误控制台标签

最后，请点击错误控制台标签——此标签将显示CSS 和JavaScript错误和警告，如图 21所示。

 

图 21：错误控制台显示 CSS 和 JavaScript 错误与警告。

 

图 22：错误控制台视图中的按钮

错误控制台视图中的按钮（见图22）的功能如下（自左至右）：

· 清除日志：清除错误控制台中的信息。

· 使用选中的运行环境过滤：点击此按钮将只显示选中的运行环境中的错误控制台输出结果，而不是显示所有运行环境的。