web前端JS各种主流浏览器的调试.docx
《web前端JS各种主流浏览器的调试.docx》由会员分享，可在线阅读，更多相关《web前端JS各种主流浏览器的调试.docx（60页珍藏版）》请在冰豆网上搜索。
web前端JS各种主流浏览器的调试
WEB前端常用浏览器的调试
目录
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安装Firebug8
2.2、打开和关闭Firebug9
2.3、查看、编辑HTML元素及其CSS11
2.4、查看动态生成的HTML代码的方法14
2.5、查看/测试页面的函数执行效率14
2.6、使用Firebug查看XMLHttpRequest15
2.7、查看页面上所有的CSS与JS16
2.8、查看页面上所有的资源列表17
2.9、使用Firecookie调试页面cookie18
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.3Debug菜单选项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如何启动Dragonfly40
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.9DOM属性标签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选项->高级->设置->浏览。
把“禁用脚本调试（InternetExplorer）”和“禁用脚本调试（其他）”的对号取消掉。
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浏览器中运行。
另外有一个Firebuglite版本，可以通过javascript调用，包含在页面中，从而在其他非Firefox浏览器中使用。
安装Firebug，请访问Firebug下载页面。
点击该页面右边栏中部巨大的橙黄色按钮即可。
你也可以在Mozilla的FireFoxAdd-ons站点下载它。
安装后只要重新启动FireFox，就可以使用了。
如果你已经安装过了，那么请检查是否更新到了最新版本。
打开Firefox的“Tools”菜单，选择“Add-ons”命令，然后在弹出窗口中点击左下角的“FindUpdates”按钮。
2.2、打开和关闭Firebug
在Firebug网站上，可以找到它的快捷键设置。
最常使用以下三种方法：
*打开Firebug：
按F12，或者点击浏览器状态栏右边的
绿色标志。
*关闭Firebug：
按F12，或者点击浏览器状态栏右边的
绿色标志，或者点击Firebug窗口右上角的
红色关闭标志。
*在单独窗口中打开Firebug：
点击firebug窗口右上角的
红色箭头标识，或者使用Ctrl+F12/⌘+F12按钮。
Firebug的相关设置：
*固定Firebug在新窗口打开：
先打开firebug，点击左上角的bug标志，选择options菜单中的“AlwaysOpeninNewWindow”设置。
*增加/缩小字体大小：
先打开firebug，点击左上角的bug标志，选择“TextSize”命令。
每次字体变化的幅度非常小，你可能需要使用多次。
*限制只对某些站点使用Firebug：
先右击浏览器状态上的greencheckmark标志，选择“disableFirebug”命令。
然后，再右击这个已经变灰的标志，选择“AllowedSites...”命令，增加允许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的主页上下载一个最新的版本装上：
在Firebug小虫子的右边就是Yslow，后面的数值是当前页面完全加载所消耗的时间，点击Yslow即可打开（或者通过Firebug的Yslow面板，运行“Performance”进行页面分析）。
如上图，选择“AllJS”后，当前页面的所有内部JS和外部JS都会被显示在一个新开的页面中，这样查看页面上所有的JS源代码就变得方便多了。
2.8、查看页面上所有的资源列表
其实前面第四点介绍到的“网络”功能就可以查看所有资源列表，而且可以通过查看状态来进行对应的优化（例如排查404元素）。
这里可以通过Yslow的components功能看到到包括类型与详细路径的资源列表：
鼠标hover可以看到对应的缩略图，点击则可在新窗口中打开。
更多Yslow功能请查看其主页。
2.9、使用Firecookie调试页面cookie
Firecookie是基于Firebug的cookie调试工具，先到作者的主页上了解下详细信息，再下载一个安装上。
安装好之后，Firebug中会多出一个“cookie”面板，你可以为需要调试的页面添加、删除、修改cookie信息。
3.Chrome浏览器对JS的调试方法
3.1.准备工作
3.1.1所涉及的版本
本文档所说都是基于chrome7版本的，下载及安装问题我相信大家应该都没有什么问题。
3.1.2存在的问题
我发现调试功能中有个小bug（作者发现的），尤其是在打开调试窗口时打开控制窗口，我的chrome浏览器会像变魔术一样从屏幕上消失（在下面的调试过程中没有遇到这样的问题，可能是作者用的β版的）。
接下来的步骤将不再由我控制。
我仅仅是用了一个很简单的测试页面就出了问题，不敢想象更大工作量下的情况。
如果你设置了断点后关闭了调试工具，断点任然存在（在测试过程中发现对程序运行没有影响，但是再次启动调试工具后原来的断点会对调试产生影响）。
注：
以上问题，作者在MAC本本上调试出的问题，你不一定会碰到，不用在意。
3.2调试脚本步骤
3.2.1实例所需代码（例子）
下面是一个简单的HTML页面以及外部引用的js文件，有两个函数和两个按钮，两个函数分别是两个按钮点击时的处理函数。
HTML页面：
TEST
functionhello1（）{
vard=newDate（）;
varstr="HelloWorld-One.\n\nItis";
alert（str+d.toString（））;
}
JS页面（hello2函数部分）：
functionhello2（foo）{
vard=newDate（）;
varstr=foo+"\n\nHelloWorld-Two.\n\nItis";
alert（str+d.toString（））;
}
3.2.2调试的基本步骤
第一步：
保存上面的代码和页面然后在chrome中打开该页面。
第二步：
你可以通过两种方式打开调试窗口，一种是点击地址栏右侧的
按钮-->Tools-->JavaScript控制台（如图2）；另一种是通过快捷键Ctrl+Shift+I打开。
调试窗口打开后，你将看见一个很大的带滚动条的信息显示窗（如图3）。
第三步：
点击Hello1按钮，就可以显示代码有没有错误，提示会出现在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,苹果计算机的最新作业系统MacOSX中新的浏览器，用来取代之前的InternetExplorerforMac。
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平台上最快速最高效的网络浏览器，对HTML5和CSS3等最新网络标准有良好的兼容性，能够完美支持下一代的交互式网络应用。
”
Safari4的新特色包括：
TopSites顶级网站 按下书签栏中新增的TopSites按钮，可一次性浏览最多24个常用网站的缩略图。
对于自己最爱的网站，可用大头针将其固定在屏幕上的特定位置。
当某网站自上次浏览后更新时，其右上角就会显示蓝色五角星提示。
CoverFlow封面浏览 iTunes甚至iPod中久负盛名的CoverFlow封面浏览功能这次被移植到了Safari浏览器中，用来直观的查看浏览历史或书签网站。
完整历史搜索 可以在CoverFlow模式下逐页查看自己的浏览历史，快速检索到曾经访问的任何一层页面。
顶置标签栏 多窗口浏览的标签栏被移到了浏览器窗口的最上方，可以轻松拖曳或增减窗口。
值得一提的是，WindowsXP系统下的顶置标签栏让Safari4的外观大不一样，颇有一些GoogleChrome的味道。
智能地址栏 根据“顶级网站”、书签和浏览历史，在用户输入网址时提供自动完成协助。
智能搜索栏 浏览器内置搜索栏嵌入Google的搜索建议功能。
全页面缩放 在不影响页面布局的前提下，自由缩放网页文字大小。
开发工具 内置网页开发工具，方便开发人员debug、调整或优化网页代码。
原生Windows外观 Safari4的Windows版本终于有了和其他Windows软件协调一致的标题栏、边框、工具栏等。
除以上重点新功能外，Safari4的细节更新项目多达150项。
Safari4公开测试版支持MacOSX和Windows系统，目前仅有英文版本，但对中文网页的支持没有什么问题，字体显示也和之前的Safari浏览器有明显区别。
值得注意的是，要使用TopSites、CoverFlow这样的可视化功能，需要DX9.032MB显存显卡（Windows平台）或ATIRadeon以上、NVIDIAGeForce2MX以上16MB显存显卡（Mac平台）的支持。
Acid3测试满分
4.2开启Debug菜单
Safari3.1以及更高版本在高级预置面板内可以通过选项开启。
Safari3以下版本可以通过以下方法打开：
MacOSX
在Safari未运行的情况下打开终端，输入以下命令：
%defaultswritecom.apple.SafariIncludeDebugMenu1
打开Safari，调试菜单出现在菜单栏中。
Windows
在Safari未运行的情况用文本编辑器打开文件c:
\DocumentsandSettings\yourusername\ApplicationData\AppleComputer\Safari\Preferences.plist，在标签之前插入以下代码：
IncludeDebugMenu
打开Safari，调试菜单出现在菜单栏中。
不过功能比Mac系统的少一些。
4.3Debug菜单选项
开启Debug菜单后，开发者可以使用以下功能：
∙显示DOM树状结构
∙显示渲染树状结构
∙显示视图树状结构
∙显示片断编辑器
∙显示缓存窗口
∙显示页面载入测试窗口
∙显示透明窗体
∙总是检测文字换行
∙使用向前/后退缓存
∙使用线形图片解码
∙对所有字体使用ATSU（AppleTypeServicesforUnicode）
∙关闭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实例中。
远程：
S
升级会员 