在Firebug小虫子的右边就是Yslow，后面的数值是当前页面完全加载所消耗的时间，点击Yslow即可打开（或者通过Firebug的Yslow面板，运行“Performance”进行页面分析）。
如上图，选择“All JS”后，当前页面的所有内部JS和外部JS都会被显示在一个新开的页面中，这样查看页面上所有的JS源代码就变得方便多了。
安装好之后，Firebug中会多出一个“cookie”面板，你可以为需要调试的页面添加、删除、修改cookie信息。
3.1.1所涉及的版本
本文档所说都是基于chrome 7版本的，下载及安装问题我相信大家应该都没有什么问题。
我发现调试功能中有个小bug（作者发现的），尤其是在打开调试窗口时打开控制窗口，我的chrome浏览器会像变魔术一样从屏幕上消失（在下面的调试过程中没有遇到这样的问题，可能是作者用的β版的）。接下来的步骤将不再由我控制。我仅仅是用了一个很简单的测试页面就出了问题，不敢想象更大工作量下的情况。
如果你设置了断点后关闭了调试工具，断点任然存在（在测试过程中发现对程序运行没有影响，但是再次启动调试工具后原来的断点会对调试产生影响）。
注：以上问题，作者在MAC本本上调试出的问题，你不一定会碰到，不用在意。
3.2.1实例所需代码（例子）
下面是一个简单的HTML页面以及外部引用的js文件，有两个函数和两个按钮，两个函数分别是两个按钮点击时的处理函数。
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窗口中选中某一行，点击右键如图所示，可以进行更多的操作。
其实，如果对IE和Firefox浏览器的调试方法了解后就很容易对chrome的调试方法上手，因为chrome不需要安装什么插件，它本身自带了调试工具，我们只需要掌握一些相关的命令就可以很熟悉第对chrome进行操作。
Safari,计算机的最新作业系统中新的浏览器，用来取代之前的 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日推出正式版。
第一步：打开安装文件，直接点击下一步，如图1
第二步：选择我接受然后下一步，如图2：
第四步：选择安装位置和安装选项（安装windows版Bonjour能够检测到你本地网络中的共享设备，并使这些共享设备可供你使用）。点击安装（如图3）
Safari是“Mac和Windows平台上最快速最高效的网络浏览器，对HTML 5和CSS 3等最新网络标准有良好的兼容性，能够完美支持下一代的交互式网络应用。”
Top Sites顶级网站 按下书签栏中新增的Top Sites按钮，可一次性浏览最多24个常用网站的缩略图。对于自己最爱的网站，可用大头针将其固定在屏幕上的特定位置。当某网站自上次浏览后更新时，其右上角就会显示蓝色五角星提示。
Cover Flow封面浏览 iTunes甚至iPod中久负盛名的Cover Flow封面浏览功能这次被移植到了Safari浏览器中，用来直观的查看浏览历史或书签网站。
完整历史搜索 可以在Cover Flow模式下逐页查看自己的浏览历史，快速检索到曾经访问的任何一层页面。
顶置标签栏 多窗口浏览的标签栏被移到了浏览器窗口的最上方，可以轻松拖曳或增减窗口。值得一提的是，Windows XP系统下的顶置标签栏让Safari 4的外观大不一样，颇有一些Google Chrome的味道。
智能地址栏 根据“顶级网站”、书签和浏览历史，在用户输入网址时提供自动完成协助。
智能搜索栏 浏览器内置搜索栏嵌入Google的搜索建议功能。
全页面缩放 在不影响页面布局的前提下，自由缩放网页文字大小。
开发工具 内置网页开发工具，方便开发人员debug、调整或优化网页代码。
除以上重点新功能外，Safari 4的细节更新项目多达150项。Safari 4公开测试版支持Mac OS X和Windows系统，目前仅有英文版本，但对中文网页的支持没有什么问题，字体显示也和之前的Safari浏览器有明显区别。值得注意的是，要使用Top Sites、Cover Flow这样的可视化功能，需要DX9.0 32MB显存显卡（Windows平台）或ATI
Safari 3.1以及更高版本在高级预置面板内可以通过选项开启。Safari 3以下版本可以通过以下方法打开：
在Safari未运行的情况下打开终端，输入以下命令：
打开Safari，调试菜单出现在菜单栏中。
打开Safari，调试菜单出现在菜单栏中。不过功能比Mac系统的少一些。
开启Debug菜单后，开发者可以使用以下功能：
· 显示渲染树状结构
· 显示视图树状结构
· 显示片断编辑器
· 显示页面载入测试窗口
· 总是检测文字换行
· 使用向前/后退缓存
· 使用线形图片解码
· 键盘和鼠标快捷
4.4查看当前页面的html结构
单击元素选项，就会在下面的控制台左边输出当前页面的html元素结构，我们设计人员可以很清楚的认识当前页面的html元素结构，检查标签之间的嵌套关系是否正确。每个开始标签之前都有一个三角形符号，那是用来折叠成对标签的。当我们的页面设计的比较复杂的时候，代码可能会很长，这是我们可以采用折叠一些已经设计好的标签使结构更加清晰。在控制台右侧，会显示当前html元素的样式信息。如下图所示：
4.5查看当前页面的资源
单击资源选项卡，会罗列出当前页面所加载的全部资源信息，而且能够显示加载文本、图像、脚本、其它所消耗的时间。这对我们开发人员分析网页加载速度很有用处。如下图所示：
4.6查看当前页面的脚本
单击脚本选项卡，在下面控制台的左侧会显示当前页面所加载的全部脚本。如下图所示：
4.7查看运行时控制台信息
单击控制台选项卡，会输出当前页面运行时信息。如果当前页面所加载的脚本存在语法错误或发生运行时错误，都会在这里输出一些错误信息。我们开发人员可以根据这些提示信息寻找产生错误的原因，进而修正错误。如下图所示：
单击脚本选项卡，会在控制台左侧显示出当前页面所加载的脚本，我们可以在需要调试的地方行首单击鼠标左键，就会产生一个断点，如图所示。在控制台的右侧上方，我们可以看到有五个按钮，他们的作用依次是：暂停脚本调试、单步不进入函数体执行、单步进入函数体内部执行及跳出当前函数体。下面有监视表达式栏，我们可以根据需要设置监视表达式。
在断点栏，会罗列出已经设置的断点信息。如下图所示：
Opera 蜻蜓（Dragonfly）是Opera 软件公司提供的开发工具，它的架构使它既可以在平面电脑运行，也可以在手机等移动设备上运行。
一个 Scope 模块将传递出运行时的信息,比如被调试 Opera实例中的网页和应用。 这个实例作为调试的主机，为客户端提供信息。主机和客户端之间数据相互传输使用 Scope协议规范和定义。
为了解决潜在的防火墙问题，一个代理会用来协调处理浏览器和调试器间的信息传递沟通。一个具体的应用实例是使用普通桌面电脑调试一个运行在手机上网页或者应用。而客户端，如调试器，可以将信息视觉化并允许用户操作运行时环境主机和客户端可以运行在不同的设备上，而代理可以运行在任何两者中任一实例，也可以在单独服务器运行。
5.2.1主要有两种调试方法
本机：Scope，代理和调试器运行在同一个Opera 实例中。
远程：Scope 和调试器运行在两个不同的Opera 实例上，比如，两个不同的设备上。而代理可以运行在两实例之一，也可以在另外的独立计算机上运行。
本机:这是最常用和最典型的方法。开发者们正在开发网络应用，它可以正常运行于 Opera浏览器。该调试器运行于相同实例中，显示在一个独立窗口或面板。
在这种情况下，调试主机，代理和客户端运行于同一个浏览器实例。Opera 选择一个随机端口运行代理，Scope 模块和调试器会自动连接它。
溃的时候非常有用。远程:这个方法的一种应用是可以调试手机上的网页或应用。手机一般屏幕很小，开发也很受限制，因此用桌面电脑来调试是一种方便的做法。
另一种可能性是在同一个设备上的一个 Opera 实例调试另一个 Opera 实例，这在调试实例濒临崩
远程调试方法可以分解为两种用法：
代理在两实例之一运行。代理独立于实例运行，比如运行在公共服务上。
第二种方法可以运用在，被调试实例和调试器隔防火墙运行的情况。
此架构由下列组件构成：
运行时调试主机 Scope 模块 Scope 协议 代理 调试客户端
每个 ECMAScript 环境都是一个单独的运行时。每个HTML 文档也都关联一个独立的运行时。框架和iframe 中的文档也有自己的运行时。
调试主机可以是任何启用了 Scope 模块并且连接到代理的 Opera 实例。它可能包含多个运行时。
Scope 模块是 Opera程序的一部分。一旦启用，模块将向代理 URL建立一个 socket连接并检测调试主机上的任何运行时。之后它会将信息发送给调试器。它也会对调试器的特定命令作出响应，比如从选定节点下载DOM。
Scope 协议是一套用来在主机和客户端之间交换关于运行时信息的规则和格式。实例包括从运行时得到 DOM 文档结构，或者计算得到的样式集合。
Scope 协议仍在开发之中。一旦完成，它将被完全公开。之后其它厂商或开发者可以创建自己的调试客户端并将它们整合到程序中，如IDE （例如Aptana 或Eclipse）。使用此scope 协议，此类客户端可以收集到一个Opera 浏览器的运行时信息。
代理负责在浏览器和调试器之间中转信息。在远程调试方法中它非常重要，即调试主机和客户端不在同一个计算机上。
Opera 运行调试器的实例会提供一个内置的代理，但代理也可以运行在一个公共服务器上。这样，被调试实例和调试器可以均在防火墙之后。
怎样将主机和客户端连接到代理，请参见《Opera 蜻蜓简介》。
调试器即为客户端，它通过代理连接到调试主机的 scope 模块。它会接收到该实例的运行时信息。调试器将运行时信息可视化，允许用户修改。它通过 Scope协议向 Scope模块回送请求以实现其功能。
很简单 —— 较新版本的 Opera 浏览器(如最新的9.5版本)增加了一个名为 Scope的特性，此特性能预览、输出和验证网站的代码结构。所有支持Scope的 Opera都可以运行 Dragonfly。 ——安装此浏览器即可。请注意在 Mac平台我们发现一个 bug，此 bug在 OS
X平台上引起视频内存错误并将导致程序崩溃。为了避免此问题，Mac用户请使用新版本 。
点击菜单中的 工具>高级> 开发者工具 将载入 Dragonfly用户界面，如图 1所示。
在你修改并保存新配置后，需要重启 Opera 以使更改生效。
5.2.4用户界面概述
界面上的不同区域如下：
1. 脚本， DOM 和错误控制台标签：这些是用户界面的主功能区，通过此区域可以检查Opera 浏览器加载的网页的方方面面。
2. 网页信息窗口：此区域显示 Opera 浏览器已载入网页的信息，包括加载的 JavaScript 脚本和CSS 等信息。上面的下拉菜单可以选择显示哪一个网页的信息，选择后，此网站的信息被显示在下面的空白区域。如选择环境标签，此区域显示运行此浏览器的系统的信息。(见图 4)
3. 上下文相关工具 —— 根据选择的标签的不同此区域会显示不同的工具图标，如在脚本、DOM 和错误控制台标签下将显示不同的工具。后文会详细介绍这些工具。
4. 搜索框/快速查找 —— 使用此区域可以在不同标签中搜索各种内容。
5. 主信息窗口 —— 此区域内容根据所选择主标签的不同而显示不同内容，可能会显示脚本、CSS文件等内容。后文会详细介绍。
7. 信息面板：此区域显示内容根据主标签不同而不同 —— 可能显示你正在调试网页的脚本或者样式信息。后文会详细介绍此区域。
8. 状态显示器显示调试器或者被调试网页的状态。
图 4：环境标签显示运行 Dragonfly 的系统的信息。
现在你已经熟悉了 Dragonfly界面，让我们开始学习如何使用Dragonfly 。
在 Opera 浏览器中随意加载一些网页—— 可以根据你的喜好加载任意网页。加载网页后我的浏览器如图5所示。
这些网站被加载后将出现在 Dragonfly 界面的下拉列表中，如图6所示。
点击脚本标签，在下拉列表中选择一个网页，并点击网页信息窗口中 URL下面的黑色文字。此时Dragonfly 如图7所示。这里我点击的是我同事的网页，你可以选择你自己喜欢的任何网站。
你可以通过点击行号设置断点 —— 见图8。
设置断点后运行脚本 (想办法运行你的脚本，例如点击按钮)，脚本程序会在断点处暂停，以便查看此时的运行环境—— 如查看变量值等。图9中我通过点击按钮执行playSong() 函数 —— 箭头表示程序当前暂停的位置。
图 9：箭头显示脚本程序目前暂停位置
注意在窗口底部显示 HTML DOM 标记，指明当前查看的元素在 DOM 树中的位置。所有视图中都显示此信息。左上角有一个按钮"刷新选中页面" ——此按钮将在浏览器中刷新选中页面，以回到其初始状态。
图 10：脚本源代码视图中的控件按钮
控件按钮(见图 10)从左到右依次提供如下功能：
· 继续 (F8)：断点暂停后继续执行程序。
· 跳过 (F10)：单步执行断点后的语句—— 你可以多次使用此按钮来跟踪程序运行情况。
· 运行到新脚本时停止：点击此按钮选择是否在运行到新脚本时停止。
· 运行到发现错误时停止：点击此按钮选择是否在运行到发现错误时停止。
· 日志线程：点击此按钮选择是否在线程面板（见右边）中记录线程日志。
调用栈显示运行环境的函数调用情况 —— 以何种顺序调用了哪些函数。例如，函数 A 调用B ，函数B 调用C；最后C 函数、B函数和A函数依次返回。每个函数调用都可能改变运行环境，比如改变变量的值。图11显示了的一系列操作后的调用栈：我先运行到第一个断点处，然后跳进下一个函数。
图 11：调用栈，显示了函数调用情况。
可以通过点击调用栈中的函数来查看函数。试试看！
5.3.3线程日志面板
若选定了日志线程按钮(见上文)，线程日志面板将记录脚本程序的线程信息。图12 显示了运行我的实例代码后的线程日志面板。
图 12：线程日志面板
线程日志面板中有两个按钮，他们是：
· 清除日志：清除日志内容。
· 导出线程日志：以纯文本形式导出线程日志至新的浏览器窗口。
检查面板显示调用栈当前调用的属性，如图13所示。可以在调用栈中选择当前调用。
图 13：检查面板，显示调用栈当前选中调用的所有属性
检查面板左上角的按钮"在全局环境中隐藏默认属性"的功能如其名所示。试试看。
命令行面板的用处是输入和执行 JavaScript 命令，以查找信息或测试 JavaScript 代码。例如，在命令行中输入下面的命令：
选择 DOM 标签并选择一个网站—— 将以可收缩/展开的方式显示选中网页的DOM，并在右边显示样式、DOM属性和布局（后面会详细介绍，见图14）。点击下面的文档或者网页样式表子标签，将改变显示内容，如点击网页样式表将显示网页中使用的 CSS。让我们暂时仍选择文档子标签。
常识在 DOM 树中点击不同元素，看看显示如何随之变化。请注意绿色高亮表示当前选中元素。
DOM 视图的主要按钮 (见图15)从左至右依次提供以下功能：
· 展开 DOM 树：点击此按钮将展开整个DOM 树。
· 导出当前 DOM 视图：点击此按钮将打开一个新的标签—— 导出标签，此标签显示当前DOM 视图（不显示折叠节点）
· 点击时自动找到元素：点击此按钮后，当你在网页中点击时，DOM 查看器自动选择点击位置所对应的元素。
· 鼠标滑过时高亮显示：点击此按钮后，当鼠标滑过网页时高亮显示此元素的边界。
· 显示空白节点：选择是否显示空白节点。
· 用树状结构显示 DOM ：若选中此按钮，将用树状结构显示 DOM 树，以更好的了解树结构。是否使用此视图取决于你的喜好。
· 帮助：点击此按钮将在浏览器中显示 Dragonfly 文档。
5.3.7 网页样式表标签
现在选择网页样式表标签 —— 此时会显示此网页中使用的网页样式表。选择不同的网页样式表会改变底部网页样式表子标签的内容，如图16所示。
网页样式表标签的左上角只有一个按钮，"使用简写属性"。此按钮控制CSS 属性值的显示方式：以完全方式显示还是以单行简写方式显示(如果有简写方式)。
我们已经介绍了界面左半部分，现在开始介绍右半部分。
样式标签包含两个部分：计算样式和样式，见图17
图 17：样式标签的两部分——计算样式和样式。
样式显示当前选中 DOM 节点的所有 CSS，计算样式则显示实际计算后的实际样式值。如图17所示，分别显示计算样式和样式是很有用的。
此标签左上角有两个按钮（如图 18所示）——他们是（自左向右）：
· 在计算样式中隐藏初始值：其功能如其名所示—— 控制是否在计算样式中显示初始值。
· 隐藏计算样式中的缩写：其功能如其名所示—— 控制是否隐藏计算样式中的缩写。
图 18：样式标签按钮
此标签显示 DOM 对象当前选中元素的属性。注意此属性和HTML 属性不同——例如你选择img 元素，你会得到 DOM 属性 src，其值为图像的绝对 URL 地址。图19为 DOM属 性标签实例。
此标签在左上角有一个按钮，"隐藏空字符串和空值"，其功能如其名——控制是否显示空字符串和空值。
此标签用图的方式直观的显示了当前 DOM 节点的几何信息，如显示了如父节点及子节点的位置关系、偏移量等信息。例子见图20.
最后，请点击错误控制台标签——此标签将显示CSS 和JavaScript错误和警告，如图 21所示。
图 22：错误控制台视图中的按钮
错误控制台视图中的按钮（见图22）的功能如下（自左至右）：
· 清除日志：清除错误控制台中的信息。
· 使用选中的运行环境过滤：点击此按钮将只显示选中的运行环境中的错误控制台输出结果，而不是显示所有运行环境的。
点击联系发帖人
