各种主流浏览器的调试(最终稿)

目录

1.对IE浏览器的调试 (4)

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

1.1.1准备工作 (4)

1.1.2调试脚本步骤 (5)

1.1.3总结 (6)

1.2.IE8浏览器对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查看XMLHttpRequest (17)

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

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

2.9、使用Firecookie调试页面cookie (20)

3.Chrome浏览器对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)

5.Opera浏览器调试工具 (37)

5.1.Dragonfly简介及其工作原理 (37)

5.2调试方法 (38)

5.2.1主要有两种调试方法： (38)

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)

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的主页上下载一个最新的版本装上：https://www.360docs.net/doc/ff1499678.html,/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调试工具，先到作者的主页上了解下详细信息，再下载一个安装上。

https://www.360docs.net/doc/ff1499678.html,/blog/firecookie/

安装好之后，Firebug中会多出一个“cookie”面板，你可以为需要调试的页面添加、删除、修改cookie信息。

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

3.1.准备工作

3.1.1所涉及的版本

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

3.1.2存在的问题

我发现调试功能中有个小bug（作者发现的），尤其是在打开调试窗口时打开控制窗口，我的chrome浏览器会像变魔术一样从屏幕上消失（在下面的调试过程中没有遇到这样的问题，可能是作者用的β版的）。接下来的步骤将不再