2023年12月15日发(作者：)
文思创新技术有限公司
各种主流浏览器的调试
调试工具的使用
百度项目组培训班
2010.10
北京市海淀区开拓路上地七街数字传媒大厦
各种主流浏览器的调试
目录
1.对IE浏览器的调试.................................................................................................... 4
1.1. IE6,IE7浏览器对JS的调试方式 ................................................................... 4
1.1.1准备工作 .............................................................................................. 4
1.1.2调试脚本步骤 ...................................................................................... 5
1.1.3总结 ...................................................................................................... 6
8浏览器对JS的调试方法 .......................................................................... 6
1.2.1.准备工作 .............................................................................................. 6
1.2.2调试脚本步骤 ...................................................................................... 7
1.2.3总结 .................................................................................................... 10
2对火狐进行调试 ...................................................................................................... 10
2.1安装Firebug .................................................................................................. 10
2.2、打开和关闭Firebug ................................................................................... 11
2.3、查看、编辑HTML元素及其CSS .............................................................. 13
2.4、查看动态生成的HTML代码的方法 ......................................................... 16
2.5、查看/测试页面的函数执行效率 ............................................................... 16
2.6、使用Firebug查看. 17
2.7、查看页面上所有的CSS与JS..................................................................... 18
2.8、查看页面上所有的资源列表 .................................................................... 19
2.9、使用Firecookie调试页面cookie .............................................................. 20
浏览器对JS的调试方法 ........................................................................... 20
3.1.准备工作 ....................................................................................................... 20
3.1.1所涉及的版本 .................................................................................... 20
3.1.2存在的问题 ........................................................................................ 20
3.2调试脚本步骤 ............................................................................................... 21
3.2.1实例所需代码（例子） .................................................................... 21
3.2.2调试的基本步骤 ................................................................................ 22
3.3总结 ............................................................................................................... 27
4对Safari进行调试 ................................................................................................... 27
4.1启用Safari的调试功能 ................................................................................ 27
4.1.1 浏览器简介 ....................................................................................... 27
4.1.2 安装与使用 ....................................................................................... 27
4.2开启Debug菜单 ........................................................................................... 33
4.3 Debug菜单选项 ............................................................................................ 33
4.4查看当前页面的html结构 .......................................................................... 34
4.5查看当前页面的资源 ................................................................................... 34
4.6查看当前页面的脚本 ................................................................................... 35
4.7查看运行时控制台信息 ............................................................................... 36
4.8调试脚本 ....................................................................................................... 36
浏览器调试工具 ........................................................................................... 37
fly简介及其工作原理 ....................................................................... 37
5.2调试方法 ....................................................................................................... 38
5.2.1主要有两种调试方法： .................................................................... 38
2
各种主流浏览器的调试
5.2.2如何得到 Dragonfly ？ ..................................................................... 41
5.2.3如何启动 Dragonfly ........................................................................... 42
5.2.4用户界面概述 .................................................................................... 44
5.3基本操作 ....................................................................................................... 45
5.3.1脚本标签 ............................................................................................ 46
5.3.2调用栈面板 ........................................................................................ 49
5.3.3线程日志面板 .................................................................................... 50
5.3.4检查面板 ............................................................................................ 50
5.3.5命令行 ................................................................................................ 51
5.3.6DOM 标签 ........................................................................................... 52
5.3.7 网页样式表标签 ............................................................................... 54
5.3.8样式标签 ............................................................................................ 55
5.3.9 DOM 属性标签 .................................................................................. 57
5.3.10 布局标签 ......................................................................................... 59
5.3.11 错误控制台标签 ............................................................................. 59
3
各种主流浏览器的调试
1.对IE浏览器的调试
1.1. IE6,IE7浏览器对JS的调试方式
1.1.1准备工作
1.1.1.1下载install-companionjs-v0.5.3
首先下载，然后按照默认路径安装。
1.1.1.2 安装
双击安装
1.1.1.3取消“禁止脚本提示”
然后打开ie6或IE7浏览器选择工具->Internet选项- >高级->浏览，把禁止脚本调试的两个选项的对号勾掉。
4
各种主流浏览器的调试
1.1.2调试脚本步骤
第一步：打开你要调试的页面，查看->脚本调试程序->打开，会在浏览器左上角出现以下的情况。
第二步：点击红色的error的图片就会在浏览器下面出现调试信息，在左边会出现代码。右面会出现代码的错误信息。点击右边的错误，左边就会显示相应的错误代码。
5
各种主流浏览器的调试
1.1.3总结
IE6，IE7调试javascript感觉不是太好用，IE8自带的调试工具比这个好用多了
8浏览器对JS的调试方法
1.2.1.准备工作
1.2.1.1取消“禁止脚步调试”
点击菜单栏工具->Internet选项->高级->设置->浏览。把“禁用脚本调试(Internet Explorer)”和“禁用脚本调试(其他)”的对号取消掉。
1.2.1.2 打开调试工具
单击菜单栏工具->开发人员工具，便可打开如下工具或按F12快捷键也可
6
各种主流浏览器的调试
1.2.2调试脚本步骤
第一步：设置断点
点击工具栏上的“脚本”，选择需要调试的文件。在文件右侧单击鼠标便可设置断点如图：
7
各种主流浏览器的调试
单击所在行则此行前端就会有断点，设置断点后，当程序运行到断点时便会暂停运行
第二步：启动调试
点击“启动调试”按钮，开始启动调试。返回IE8页面，触发javascript事件如单击按钮，程序运行到断点后暂停如图：
第三步：逐语句调试
单击工具栏上的逐语句调试或按F11快捷键进行逐语句调试如图：
第四步：逐过程调试
单击工具栏上的逐过程调试按钮或按F10快捷键进行逐过程调试
第五步： 跳出调试
8
各种主流浏览器的调试
单击工具栏上的跳出调试按钮或按shift+F11快捷键跳出调试
第六步：停止调试
单击停止调试按钮或按shift+F5快捷键停止调试
第七步： 控制台
调试中程序出错可单击后侧工具栏控制台按钮
第八步：局部变量
在调试过程中，单击右侧工具栏局部变量按钮可看到程序中的局部变量，名称-值-类型如图：
第九步：监视
单击右侧工具栏的监视按钮在单击“单击以添加”输入要坚持的变量，对象回车便可监测到其的值、类型如图：
9
各种主流浏览器的调试
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站点下载它。安装后10
各种主流浏览器的调试
只要重新启动FireFox，就可以使用了。
如果你已经安装过了，那么请检查是否更新到了最新版本。打开Firefox的“Tools”菜单，选择“Add-ons”命令，然后在弹出窗口中点击左下角的“Find
Updates”按钮。
2.2、打开和关闭Firebug
在Firebug网站上，可以找到它的快捷键设置。最常使用以下三种方法：
* 打开Firebug：按F12，或者点击浏览器状态栏右边的
11
绿色标志。
各种主流浏览器的调试
* 关闭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”命令。然后，再右击这个已经变灰的标志，选择“”命令，增加允许Firebug生效的域名。
12
各种主流浏览器的调试
2.3、查看、编辑HTML元素及其CSS
安装好Firebug之后，你可以通过点击浏览器右下方的小虫子打开Firebug，如图：
或者直接按F12，如果要以窗口形式打开的话，就按下CTRL+F12
打开Firebug之后，点击“查看”，然后选择页面上任何需要编辑的地方，Firebug会将其选中，并且在HTML结构中将其高亮，如图：
13
各种主流浏览器的调试
之后你可以对该元素的HTML结构、属性进行任意的编辑，修改后的效果都会实时的展现在页面当中。
同时在Firebug的右侧是该元素对应的CSS样式，如下图：
14
各种主流浏览器的调试
图中的样式，显示了该元素被重新定义的样式继承关系，比如“继承自e”的“text-align”属性被“继承自”的“text-align”覆盖，原先的属性就会以中横线的形式表示出来。如果要查看所有的属性，请勾选图中标“1”的选项。
单击“2”可以禁用/打开某条CSS属性；单击任意一个属性或者属性值可以进行CSS的编辑，如“3”；双击“4”则可以新建一条CSS属性。现在我们点击下“5”来看看CSS布局面板：
15
各种主流浏览器的调试
上面这幅图展现的是一个HTML结构的标准盒模型，通过点击相应的数值可以修改该值，同时在浏览器窗口中显示出对应的效果来。
2.4、查看动态生成的HTML代码的方法
通过“查看源代码”的方法，无法看到由JS动态生成的HTML结构，这里我们可以通过Firebug来查看，如下图，选中“body”节点，按下“编辑”，即可输出页面上源文件的代码以及动态生成的代码。
还有另外一种简单的方法，选中你要查看的页面元素，然后在右键菜单中选择“查看选中部分源代码”
2.5、查看/测试页面的函数执行效率
查看页面上所有函数执行效率可以很容易的找到运行最慢的函数，从而帮助WD有针对性的进行页面的JS优化。如图，为需要调试的页面“启用控制台”：
点击“概况”开始收集，再次点击即可停止，然后进行查看。
16
各种主流浏览器的调试
在firebug控制台的最底下是一排命令行，在这里你可以输入任意JS语句，按下回车键即可执行：
使用console，还可以测试一段代码或者函数的执行时间，点击命令行最右侧的红色按钮切换到命令行多行模式：
2.6、使用Firebug查看XMLHttpRequest
使用Firebug查看XMLHttpRequest，对于调试AJAX是很有帮助的。如图：
17
各种主流浏览器的调试
为需要调试的站点开启“网络”监控功能，其实该功能可以查看页面上所有类型的post和get请求，并且还会显示出请求消耗的时间。对于XMLHttpRequest会有详细的参数与返回值。
2.7、查看页面上所有的CSS与JS
在页面调试中我们发现，对于外部引用的CSS与JS很难进行调试，使用基于Firebug的Yslow扩展即可解决该问题。首先在Yslow的主页上下载一个最新的版本装上：/yslow/
在Firebug小虫子的右边就是Yslow，后面的数值是当前页面完全加载所消耗的时间，点击Yslow即可打开（或者通过Firebug的Yslow面板，运行“Performance”进行页面分析）。
18
各种主流浏览器的调试
如上图，选择“All JS”后，当前页面的所有内部JS和外部JS都会被显示在一个新开的页面中，这样查看页面上所有的JS源代码就变得方便多了。
2.8、查看页面上所有的资源列表
其实前面第四点介绍到的“网络”功能就可以查看所有资源列表，而且可以通过查看状态来进行对应的优化（例如排查404元素）。这里可以通过Yslow的components功能看到到包括类型与详细路径的资源列表：
鼠标hover可以看到对应的缩略图，点击则可在新窗口中打开。更多Yslow功能请查看其主页。
19
各种主流浏览器的调试
2.9、使用Firecookie调试页面cookie
Firecookie是基于Firebug的cookie调试工具，先到作者的主页上了解下详细信息，再下载一个安装上。
/blog/firecookie/
安装好之后，Firebug中会多出一个“cookie”面板，你可以为需要调试的页面添加、删除、修改cookie信息。
浏览器对JS的调试方法
3.1.准备工作
3.1.1所涉及的版本
本文档所说都是基于chrome 7版本的，下载及安装问题我相信大家应该都没有什么问题。
3.1.2存在的问题
我发现调试功能中有个小bug（作者发现的），尤其是在打开调试窗口时打开控制窗口，我的chrome浏览器会像变魔术一样从屏幕上消失（在下面的调试过程中没有遇到这样的问题，可能是作者用的β版的）。接下来的步骤将不再20
各种主流浏览器的调试
由我控制。我仅仅是用了一个很简单的测试页面就出了问题，不敢想象更大工作量下的情况。
如果你设置了断点后关闭了调试工具，断点任然存在（在测试过程中发现对程序运行没有影响，但是再次启动调试工具后原来的断点会对调试产生影响）。
注：以上问题，作者在MAC本本上调试出的问题，你不一定会碰到，不用在意。
3.2调试脚本步骤
3.2.1实例所需代码（例子）
下面是一个简单的HTML页面以及外部引用的js文件，有两个函数和两个按钮，两个函数分别是两个按钮点击时的处理函数。
HTML页面：
JS页面（hello2函数部分）：
function hello2( foo ){
var d = new Date();
var str = foo + "nnHello World - is ";
alert( str + ng() );
}
21
各种主流浏览器的调试
3.2.2调试的基本步骤
第一步：保存上面的代码和页面然后在chrome中打开该页面。
第二步：你可以通过两种方式打开调试窗口，一种是点击地址栏右侧的按钮--> Tools --> JavaScript控制台（如图2）；另一种是通过快捷键Ctrl +
Shift + I打开。 调试窗口打开后，你将看见一个很大的带滚动条的信息显示窗（如图3）。
22
各种主流浏览器的调试
23
各种主流浏览器的调试
第三步：点击Hello 1按钮，就可以显示代码有没有错误，提示会出现在Console窗口中。设置断点，如图4所示，点击第6行的数字位置那里，会出现一个蓝色的箭头。
第四步：当你点击图5中所提示的按钮时，代码就会在断点处停止执行。在Console输入栏中也可以输入命令来进行设置和执行。
24
各种主流浏览器的调试
第五步：图6是把正确代码中的导入js脚本是的“”改成了“”，形成一个错误代码。在Console中给出了错误提示。（这是在Elements窗口中，图7是在Scripts窗口中）。
25
各种主流浏览器的调试
第六步：在Elements窗口中选中某一行，点击右键如图所示，可以进行更多的操作。
26
各种主流浏览器的调试
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
27
各种主流浏览器的调试
（图1）
第二步：选择我接受然后下一步，如图2：
（图2）
第四步：选择安装位置和安装选项（安装windows版Bonjour能够检测到你本地网络中的共享设备，并使这些共享设备可供你使用）。点击安装（如图3）
（图3）
安装中。。。
28
各种主流浏览器的调试
成功界面：
使用：
Safari是“Mac和Windows平台上最快速最高效的网络浏览器，对HTML 5和CSS 3等最新网络标准有良好的兼容性，能够完美支持下一代的交互式网络应用。”
Safari 4的新特色包括：
29
各种主流浏览器的调试
Top Sites顶级网站 按下书签栏中新增的Top Sites按钮，可一次性浏览最多24个常用网站的缩略图。对于自己最爱的网站，可用大头针将其固定在屏幕上的特定位置。当某网站自上次浏览后更新时，其右上角就会显示蓝色五角星提示。
Cover Flow封面浏览 iTunes甚至iPod中久负盛名的Cover Flow封面浏览功能这次被移植到了Safari浏览器中，用来直观的查看浏览历史或书签网站。
30
各种主流浏览器的调试
完整历史搜索 可以在Cover Flow模式下逐页查看自己的浏览历史，快速检索到曾经访问的任何一层页面。
顶置标签栏 多窗口浏览的标签栏被移到了浏览器窗口的最上方，可以轻松拖曳或增减窗口。值得一提的是，Windows XP系统下的顶置标签栏让Safari 4的外观大不一样，颇有一些Google Chrome的味道。
智能地址栏 根据“顶级网站”、书签和浏览历史，在用户输入网址时提供自动完成协助。
智能搜索栏 浏览器内置搜索栏嵌入Google的搜索建议功能。
全页面缩放 在不影响页面布局的前提下，自由缩放网页文字大小。
开发工具 内置网页开发工具，方便开发人员debug、调整或优化网页代码。
31
各种主流浏览器的调试
原生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测试满分
32
各种主流浏览器的调试
4.2开启Debug菜单
Safari 3.1以及更高版本在高级预置面板内可以通过选项开启。Safari 3以下版本可以通过以下方法打开：
Mac OS X
在Safari未运行的情况下打开终端，输入以下命令：
% defaults write IncludeDebugMenu 1
打开Safari，调试菜单出现在菜单栏中。
Windows
在Safari未运行的情况用文本编辑器打开文件c:Documents and
Settingsyour usernameApplication DataApple
，在标签之前插入以下代码：
打开Safari，调试菜单出现在菜单栏中。不过功能比Mac系统的少一些。
4.3 Debug菜单选项
开启Debug菜单后，开发者可以使用以下功能：
•
•
•
•
•
•
•
•
•
•
•
•
显示DOM树状结构
显示渲染树状结构
显示视图树状结构
显示片断编辑器
显示缓存窗口
显示页面载入测试窗口
显示透明窗体
总是检测文字换行
使用向前/后退缓存
使用线形图片解码
对所有字体使用ATSU(Apple Type Services for Unicode)
关闭RSS支持
33
各种主流浏览器的调试
纪录Javascript错误
•
显示Javascript控制台
•
键盘和鼠标快捷
•
切换用户代理
•
4.4查看当前页面的html结构
单击元素选项，就会在下面的控制台左边输出当前页面的html元素结构，我们设计人员可以很清楚的认识当前页面的html元素结构，检查标签之间的嵌套关系是否正确。每个开始标签之前都有一个三角形符号，那是用来折叠成对标签的。当我们的页面设计的比较复杂的时候，代码可能会很长，这是我们可以采用折叠一些已经设计好的标签使结构更加清晰。在控制台右侧，会显示当前html元素的样式信息。如下图所示：
4.5查看当前页面的资源
34
各种主流浏览器的调试
单击资源选项卡，会罗列出当前页面所加载的全部资源信息，而且能够显示加载文本、图像、脚本、其它所消耗的时间。这对我们开发人员分析网页加载速度很有用处。如下图所示：
4.6查看当前页面的脚本
单击脚本选项卡，在下面控制台的左侧会显示当前页面所加载的全部脚本。如下图所示：
35
各种主流浏览器的调试
4.7查看运行时控制台信息
单击控制台选项卡，会输出当前页面运行时信息。如果当前页面所加载的脚本存在语法错误或发生运行时错误，都会在这里输出一些错误信息。我们开发人员可以根据这些提示信息寻找产生错误的原因，进而修正错误。如下图所示：
4.8调试脚本
单击脚本选项卡，会在控制台左侧显示出当前页面所加载的脚本，我们可以在需要调试的地方行首单击鼠标左键，就会产生一个断点，如图所示。在控制台的右侧上方，我们可以看到有五个按钮，他们的作用依次是：暂停脚本调试、单步不进入函数体执行、单步进入函数体内部执行及跳出当前函数体。下面有监视表达式栏，我们可以根据需要设置监视表达式。
在断点栏，会罗列出已经设置的断点信息。如下图所示：
36
各种主流浏览器的调试
浏览器调试工具
fly简介及其工作原理
Opera 蜻蜓（Dragonfly）是 Opera 软件公司提供的开发工具，它的架构使它既可以在平面电脑运行，也可以在手机等移动设备上运行。
一个 Scope 模块将传递出运行时的信息, 比如被调试 Opera 实例中的网页和应用。 这个实例作为调试的主机，为客户端提供信息。主机和客户端之间数据相互传输使用 Scope 协议规范和定义。
为了解决潜在的防火墙问题，一个代理会用来协调处理浏览器和调试器间的信息传递沟通。一个具体的应用实例是使用普通桌面电脑调试一个运行在手机上网页或者应用。而客户端，如调试器，可以将信息视觉化并允许用户操作运行时环境主机和客户端可以运行在不同的设备上，而代理可以运行在任何两者中任一实例，也可以在单独服务器运行。
37
各种主流浏览器的调试
5.2调试方法
5.2.1主要有两种调试方法
本机：Scope，代理和调试器运行在同一个 Opera 实例中。
远程：Scope 和调试器运行在两个不同的 Opera 实例上，比如，两个不同的设备上。而代理可以运行在两实例之一，也可以在另外的独立计算机上运行。
本机:这是最常用和最典型的方法。开发者们正在开发网络应用，它可以正常运行于 Opera 浏览器。该调试器运行于相同实例中，显示在一个独立窗口或面板。
在这种情况下，调试主机，代理和客户端运行于同一个浏览器实例。Opera
选择一个随机端口运行代理，Scope 模块和调试器会自动连接它。
溃的时候非常有用。远程:这个方法的一种应用是可以调试手机上的网页或应用。手机一般屏幕很小，开发也很受限制，因此用桌面电脑来调试是一种方便的做法。
另一种可能性是在同一个设备上的一个 Opera 实例调试另一个 Opera
实例，这在调试实例濒临崩
38
各种主流浏览器的调试
远程调试方法可以分解为两种用法：
代理在两实例之一运行。代理独立于实例运行，比如运行在公共服务上。
第二种方法可以运用在，被调试实例和调试器隔防火墙运行的情况。
组件
此架构由下列组件构成：
运行时调试主机 Scope 模块 Scope 协议 代理 调试客户端
每个 ECMAScript 环境都是一个单独的运行时。每个 HTML 文档也都关联一个独立的运行时。框架和 iframe 中的文档也有自己的运行时。
调试主机
调试主机可以是任何启用了 Scope 模块并且连接到代理的 Opera 实例。它可能包含多个运行时。
Scope 模块
39
各种主流浏览器的调试
Scope 模块是 Opera 程序的一部分。一旦启用，模块将向代理 URL 建立一个 socket 连接并检测调试主机上的任何运行时。之后它会将信息发送给调试器。它也会对调试器的特定命令作出响应，比如从选定节点下载 DOM。
Scope 协议
Scope 协议是一套用来在主机和客户端之间交换关于运行时信息的规则和格式。实例包括从运行时得到 DOM 文档结构，或者计算得到的样式集合。
Scope 协议仍在开发之中。一旦完成，它将被完全公开。之后其它厂商或开发者可以创建自己的调试客户端并将它们整合到程序中，如 IDE （例如 Aptana 或 Eclipse）。使用此 scope 协议，此类客户端可以收集到一个
Opera 浏览器的运行时信息。
代理
代理负责在浏览器和调试器之间中转信息。在远程调试方法中它非常重要，即调试主机和客户端不在同一个计算机上。
Opera 运行调试器的实例会提供一个内置的代理，但代理也可以运行在一个公共服务器上。这样，被调试实例和调试器可以均在防火墙之后。
怎样将主机和客户端连接到代理，请参见《Opera 蜻蜓简介》。
调试客户端
调试器即为客户端，它通过代理连接到调试主机的 scope 模块。它会接收到该实例的运行时信息。调试器将运行时信息可视化，允许用户修改。它通过
Scope 协议向 Scope 模块回送请求以实现其功能。
目前调试器的实现完全基于网络技术：HTML/XML，CSS 以及
JavaScript。
40
各种主流浏览器的调试
点击放大
5.2.2如何得到 Dragonfly
很简单 —— 较新版本的 Opera 浏览器(如最新的9.5版本) 增加了一个名为 Scope 的特性，此特性能预览、输出和验证网站的代码结构。所有支持Scope
41
各种主流浏览器的调试
的 Opera 都可以运行 Dragonfly 。Kestrel beta 2 版本支持 Dragonfly —— 安装此浏览器即可。请注意在 Mac 平台我们发现一个 bug ，此 bug 在 OS X 平台上引起视频内存错误并将导致程序崩溃。为了避免此问题，Mac 用户请使用新版本 /mac/o950s_ 。
5.2.3如何启动 Dragonfly
点击菜单中的 工具> 高级> 开发者工具 将载入 Dragonfly 用户界面，如图 1所示。
图 1： 启动 Dragonfly
主意：如果你需要使用其他版本的 Dragonfly ，请转到 Opera 首选项编辑器，找到 Developer Tools 部分，如图2所示。Developer Tools URL 应指向Dragonfly —— 如果你需要使用其他版本，请更新此 URL 。
42
各种主流浏览器的调试
图 2： opera:config 首选项编辑器 Developer Tools 配置部分
在你修改并保存新配置后，需要重启 Opera 以使更改生效。
43
各种主流浏览器的调试
5.2.4用户界面概述
Dragonfly 界面默认如图 3 所示。
图 3： 默认 Dragonfly 界面。
界面上的不同区域如下：
1. 脚本， DOM 和错误控制台标签：这些是用户界面的主功能区，通过此区域可以检查 Opera 浏览器加载的网页的方方面面。
44
各种主流浏览器的调试
2. 网页信息窗口：此区域显示 Opera 浏览器已载入网页的信息，包括加载的 JavaScript 脚本和 CSS 等信息。上面的下拉菜单可以选择显示哪一个网页的信息，选择后，此网站的信息被显示在下面的空白区域。如选择环境标签，此区域显示运行此浏览器的系统的信息。 (见图 4)
3. 上下文相关工具 —— 根据选择的标签的不同此区域会显示不同的工具图标，如在脚本、DOM 和错误控制台标签下将显示不同的工具。后文会详细介绍这些工具。
4. 搜索框/快速查找 —— 使用此区域可以在不同标签中搜索各种内容。
5. 主信息窗口 —— 此区域内容根据所选择主标签的不同而显示不同内容，可能会显示脚本、CSS 文件等内容。后文会详细介绍。
6. 命令行：可以在此区域输入 JavaScript 命令，以被 Opera
Dragonfly 执行。
7. 信息面板：此区域显示内容根据主标签不同而不同 —— 可能显示你正在调试网页的脚本或者样式信息。后文会详细介绍此区域。
8.状态显示器显示调试器或者被调试网页的状态。
图 4：环境标签显示运行 Dragonfly 的系统的信息。
现在你已经熟悉了 Dragonfly界面，让我们开始学习如何使用 Dragonfly 。
5.3基本操作
在 Opera 浏览器中随意加载一些网页 —— 可以根据你的喜好加载任意网页。加载网页后我的浏览器如图5所示。
45
各种主流浏览器的调试
图 5：使用 Kestrel beta 2 版本打开一些我收藏夹中的网站
这些网站被加载后将出现在 Dragonfly 界面的下拉列表中，如图6所示。
图 6：Dragonfly 下拉列表中的网站
5.3.1脚本标签
点击脚本标签，在下拉列表中选择一个网页，并点击网页信息窗口中 URL下面的黑色文字。此时 Dragonfly 如图7所示。这里我点击的是我同事的网页，你可以选择你自己喜欢的任何网站。
46
各种主流浏览器的调试
图 7：Dragonfly 中查看 JavaScript 文件
你可以通过点击行号设置断点 —— 见图8。
47
各种主流浏览器的调试
图 8：设置 JavaScript 断点
设置断点后运行脚本 (想办法运行你的脚本，例如点击按钮)，脚本程序会在断点处暂停，以便查看此时的运行环境 —— 如查看变量值等。图9中我通过点击按钮执行 playSong() 函数 —— 箭头表示程序当前暂停的位置。
图 9：箭头显示脚本程序目前暂停位置
注意在窗口底部显示 HTML DOM 标记，指明当前查看的元素在 DOM 树中的位置。所有视图中都显示此信息。左上角有一个按钮"刷新选中页面" —— 此按钮将在浏览器中刷新选中页面，以回到其初始状态。
图 10：脚本源代码视图中的控件按钮
控件按钮(见图 10)从左到右依次提供如下功能：
•
继续 (F8)：断点暂停后继续执行程序。
48
各种主流浏览器的调试
•
•
跳进 (F11)：跳进断点处的函数。
跳过 (F10)：单步执行断点后的语句 —— 你可以多次使用此按钮来跟踪程序运行情况。
•
•
•
跳出 (Shift + F11)：跳出函数。
运行到新脚本时停止：点击此按钮选择是否在运行到新脚本时停止。
运行到发现错误时停止：点击此按钮选择是否在运行到发现错误时停止。
•
日志线程：点击此按钮选择是否在线程面板（见右边）中记录线程日志。
•
5.3.2调用栈面板
调用栈显示运行环境的函数调用情况 —— 以何种顺序调用了哪些函数。例如，函数 A 调用 B ，函数 B 调用 C；最后 C 函数、B 函数和A 函数依次返回。每个函数调用都可能改变运行环境，比如改变变量的值。图11显示了的一系列操作后的调用栈：我先运行到第一个断点处，然后跳进下一个函数。
图 11：调用栈，显示了函数调用情况。
可以通过点击调用栈中的函数来查看函数。试试看！
49
发布评论