关键词不能为空

当前您在： 主页 > 英语 >

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

作者：高考题库网
来源：https://www.bjmy2z.cn/gaokao
2021-02-24 15:40
tags:

-

2021年2月24日发(作者：盛筵难再)



文思创新技术有限公司







各种主流浏览器的调试



调试工具的使用



百度项目组培训班



2010.10


北


京


市


海


淀


区


开


拓


路


上


地


七


街


数


字


传

< br>媒


大


厦



各种主流浏览器的调试



目录



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


总结


......... .................................................. .........................................


1


0



2


对火狐进行调试


........ .................................................. ............................................


1


0



2.1


安装


Firebug .... .................................................. ............................................


1


0



2.2


、打开和关闭


Firebug .................................................. .................................


1


1



2.3


、查看、编辑


HTML


元素及其


CSS ...................................... ........................


1


3



2.4


、查看动态生成的


HTML


代码的方法



........................... ..............................


1


6



2.5


、查看


/


测试页面的函数执行效率



............................. ..................................


1


6



2.6


、使用


Firebug


查看

< p>
XMLHttpRequest.............................. ............................


1


7



2.7


、查看页面上所有的


CSS


与


JS......................................... ............................


1


8



2.8


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


.................................................. ..................


1


9



2.9


、使用


Firecookie


调试页面


cookie ................................ ..............................


2


0




浏览器对


JS


的调试方法

............................................... ............................


2


0



3.1.


准备工作


........ .................................................. .............................................


2


0



3.1.1


所涉及的版本


..... .................................................. .............................


2


0



3.1.2


存在的问题


...... .................................................. ................................


2


0



3.2


调试脚本步骤


....... .................................................. ......................................


2


1



3.2.1


实例所需代码（例子）


. .................................................. .................


2


1



3.2.2


调试的基本步骤


.... .................................................. ..........................


2


2



3.3


总结


........... .................................................. ..................................................


2


7



4


对


Safari


进行调试

< br> .............................................. .................................................. ...


2


7



4.1


启用


Safari


的调试功能


...................................... ..........................................


2


7



4.1.1


浏览器简介


..... .................................................. ................................


2


7



4.1.2


安装与使用


..... .................................................. ................................


2


7



4.2


开启


Debug


菜单

< br>


................................... .................................................. ......


3


3



4.3 Debug


菜单选项


... .................................................. .......................................


3


3



4.4


查看当前页面的


html


结构



.


................... .................................................. ....


3


4



4.5


查看当前页面的资源


.... .................................................. .............................


3


4



4.6


查看当前页面的脚本


.... .................................................. .............................


3


5



4.7


查看运行时控制台信息


... .................................................. ..........................


3


6



4.8


调试脚本


......... .................................................. ............................................


3


6




浏览器调试工具


......... .................................................. ................................


3


7



fly


简介及其工作原理


< p>
.


................................ ......................................


3


7



5.2


调试方法


......... .................................................. ............................................


3


8



5.2.1


主要有两种调试方法：


. .................................................. .................


3


8



2



各种主流浏览器的调试



5.2.2


如何得到



Dragonfly


？


< p>
.


................................ ....................................


4


1



5.2.3


如何启动



Dragonfly


.


...... .................................................. ..................


4


2



5.2.4


用户界面概述


..... .................................................. .............................


4


4



5.3


基本操作


......... .................................................. ............................................


4


5



5.3.1


脚本标签


....... .................................................. ...................................


4


6



5.3.2


调用栈面板


...... .................................................. ................................


4


9



5.3.3


线程日志面板


..... .................................................. .............................


5


0



5.3.4


检查面板


....... .................................................. ...................................


5


0



5.3.5


命令行


........ .................................................. ......................................


5


1



5.3.6DOM


标签


< p>
.


................................ .................................................. ........


5


2



5.3.7


网页样式表标签


... .................................................. ..........................


5


4



5.3.8


样式标签


....... .................................................. ...................................


5


5



5.3.9 DOM


属性标签


.. .................................................. ..............................


5


7



5.3.10


布局标签


..... .................................................. ..................................


5


9



5.3.11


错误控制台标签


.. .................................................. .........................


5


9






3



各种主流浏览器的调试



1.


对


IE


浏览器的调试



1.1. IE6,IE7


浏览器对


J S


的调试方式



1.1.1


准备工作



1.1.1.1


下载


install- companionjs-v0.5.3


首先下载


< p>
，然后按照默认路径安装。



1.1.1.2


安装



双击



安装




1.1.1.3


取消“禁止脚本提示”



然后打开


ie6


或

IE7


浏览器选择工具


->Internet


选项


-


>


高级

< p>
->


浏览，把禁


止脚本调试的两个选项的对号勾掉 。



4



各种主流浏览器的调试




1.1.2


调试脚本步骤


< p>
第一步：


打开你要调试的页面，


查看


->


脚本调试程序


->


打开 ，


会在浏览器左


上角出现以下的情况。




第二步：


点击红色的


error


的图片就会在浏览器下面出现调试信息，


在 左边


会出现代码。


右面会出现代码的错误信息。


点击右边的错误，


左边就会显示相应


的错误代码。



5



各种主流浏览器的调试




1.1.3


总结







IE6


，


IE7


调 试


javascript


感觉不是太好用，

IE8


自带的调试工具比这个好用多


了


8


浏览器对


JS


的调试方法



1.2.1.


准备工作



1.2.1.1


取消“禁止脚步调试”



点击菜单栏工具


->Internet


选项


->


高级


->

设置


->


浏览。把“禁用脚本调试


(Internet Explorer)


”和“禁用脚本调试


(


其他


)


”的对号取消掉。

< p>


1.2.1.2


打开调试工具



单击菜单栏工具


->


开发人员工具，便可打开如下工具或按


F 12


快捷键也可



6



各种主流浏览器的调试




1.2.2


调试脚本步骤



第一步：设置断点






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


设置断点如图：




7



各种主流浏览器的调试



单击所在行则 此行前端就会有断点，


设置断点后，


当程序运行到断点时便会< /p>


暂停运行



第二步：启动调试



点击“启动调试” 按钮，开始启动调试。返回


IE8


页面，触发

< br>javascript


事


件如单击按钮，程序运行到断点 后暂停如图：




第三步：逐语句调试



单击工具栏上的 逐语句调试或按


F11


快捷键进行逐语句调试如图：

< p>



第四步：逐过程调试



单击工具栏上的逐过程调试按钮或按


F10

快捷键进行逐过程调试



第五步：



跳出调试



8



各种主流浏览器的调试


< p>
单击工具栏上的跳出调试按钮或按


shift+F11

快捷键跳出调试



第六步：停止调试



单击停止调试按钮 或按


shift+F5


快捷键停止调试



第七步：



控制台



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



第八步：局部变量



在调试过程中，< /p>


单击右侧工具栏局部变量按钮可看到程序中的局部变量，


名


称


-


值


-

< p>
类型如图：




第九步：监视



单击右侧工具栏的监视 按钮在单击


“单击以添加”


输入要坚持的变量，


对象


回车便可监测到其的值、类型如图：



9



各种主流浏览器的调试




1.2.3


总结







IE8


自带的此调试工具已经足够强大，


可 以满足我们平时对


javascript


的调试


需求，其简单易用，比


IE6


，


IE7


调试


javascript


的 插件好上手。其次，此调试工


具对


HTML

，


CSS


等也都有调试，大家不妨亲手试试。



2


对火狐进行调试



2.1


安装


Firebug


Firebug


在


Firefox


浏览器中运行。另外有一个


Firebug lite


版本，可以通过


javascript


调用，包含在页面中， 从而在其他非


Firefox


浏览器中使用。

< br>


安装


Firebug


，请访问


Firebug


下载页面。点击该页面右边栏中部巨大的


橙黄色按钮即可。你也可以在


Mozilla


的


FireFoxAdd- ons


站点下载它。安装后


10



各种主流浏览器的调试



只要重新启动


FireFox


，就可以使用了。




如果你已经安装过了，那么请检查是否更新到了最新版本。打 开


Firefox


的


“Tools”< /p>


菜单，选择


“Add


-

< br>ons”


命令，然后在弹出窗口中点击左下角的


“Fin d


Updates”


按钮。



2.2


、打开和关闭


Firebug


在


Firebug


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




*


打开


Firebug


：按


F12


，或者点击浏览器状态栏右边的



11



绿色标志。



各种主流浏览器的调试



*


关闭


Firebug


：按


F12


，或者点击浏览器状态栏右边的


点击

< br>Firebug


窗口右上角的


红色关闭标志。

< p>


绿色标志，或者


*


在 单独窗口中打开


Firebug


：


点击


firebug


窗口右上角的


或者使用


Ctrl+F12/


?


+F12


按钮。



红色箭头标识，



Firebug


的相关设置：



*


固定


Firebug


在新窗口打开：先打开


firebug


，点击左上角 的


bug


标志，


选择

< br>options


菜单中的


“Always Open in New Window”


设置。



*


增加


/


缩 小字体大小：先打开


firebug


，点击左上角的

< p>
bug


标志，选择


“Text Size”


命令。每次字体变化的幅度非常小，你可能需要使用多次。




*


限制只对某些站点使用


Firebug


：先右击浏览器状态上的


gre en check


mark


标志，选择


“disable Firebug”


命令。然后，再右击这个已经变灰的标志，


选 择


“Allowed Sites...”


命令，增加允许


Firebug


生效的域名。



12



各种主流浏览器的调试



< p>
2.3


、查看、编辑


HTML

元素及其


CSS


安装好


Fire bug


之后，你可以通过点击浏览器右下方的小虫子打开


Fir ebug


，如


图：




或者直接按


F12

< br>，如果要以窗口形式打开的话，就按下


CTRL+F12


打开


Firebug


之后，点击


“< /p>


查看


”


，然后选择页面上任何需要编辑的 地方，


Firebug


会将其选中，并且在

HTML


结构中将其高亮，如图：



13



各种主流浏览器的调试



< p>
之后你可以对该元素的


HTML


结构、属性进行任 意的编辑，修改后的效果都会


实时的展现在页面当中。



同时在


Firebug


的右侧是该元素对应的


CSS


样式，如下图：



14



各种主流浏览器的调试



< p>
图中的样式，显示了该元素被重新定义的样式继承关系，比如


“

< p>
继承自


e”


的


“text


-


align”


属性被


“


继承自


”


的


“text


-


align”


覆 盖，原先


的属性就会以中横线的形式表示出来。如果要查看所有的属性，


请勾选图中标


“1”


的选项。



单击


“2”


可以禁用

< br>/


打开某条


CSS


属性；单击任 意一个属性或者属性值可以进行


CSS


的编辑，如


“3”


；双击


“4”


则可以 新建一条


CSS


属性。现在我们点击下


“5”


来


看看


CSS

< br>布局面板：




15



各种主流浏览器的调试


< p>
上面这幅图展现的是一个


HTML


结构的标准盒模 型，通过点击相应的数值可以


修改该值，同时在浏览器窗口中显示出对应的效果来。



2.4


、查看动态生成的


HTML


代码的方法



通过“ 查看源代码”的方法，


无法看到由


JS


动态生成的


HTML


结构，


这里我们可


以通过


Firebug


来查看，如下图 ，选中“body”节点，按下“编辑”，即可输出


页面上源文件的代码以及动态生成的 代码。




还有另外一种简单的方法，


选中你要查看的页面元素，


然后在右键菜单中选择


“


查


看选中部分源代码


”< /p>



2.5


、查看


/


测试页面的函数执行效率



查看页面 上所有函数执行效率可以很容易的找到运行最慢的函数，


从而帮助


WD


有针对性的进行页面的


JS


优化 。如图，为需要调试的页面


“


启用控制台


”


：




点 击


“


概况


”


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



16



各种主流浏览器的调试


< p>
在


firebug


控制台的最底下是一排命令行， 在这里你可以输入任意


JS


语句，按


下 回车键即可执行：




使用

< p>
console


，还可以测试一段代码或者函数的执行时间，点击命令行最 右侧的


红色按钮切换到命令行多行模式：




2.6


、使用


Firebug


查看


XMLHttpRequest


使用


Firebug


查看

XMLHttpRequest


，对于调试


AJAX


是很有帮助的。如


图：



17



各种主流浏览器的调试



< p>
为需要调试的站点开启


“


网络

”


监控功能，其实该功能可以查看页面上所有类型的


pos t


和


get


请求，并且还会显示出请求 消耗的时间。对于


XMLHttpRequest


会

< p>
有详细的参数与返回值。



2.7


、查看页面上所有的


CSS


与


JS


在页面调试中我们发现，对于外部引用的


CSS


与


JS


很难进行调试，使用基于


Firebug


的


Yslow


扩展即可解决该问题。


首先在


Yslow


的主页上下载一个最新的


版本装上：


/yslow/



在


Firebug

< br>小虫子的右边就是


Yslow


，后面的数值是当前页面完 全加载所消耗的


时间，点击


Yslow


即可打开（或者通过


Firebug


的


Yslow


面板，运行


“Performance”

< p>
进行页面分析）。



18



各种主流浏览器的调试




如上图，选择


“All JS”


后，当前页面的所有内部


JS


和外部


JS


都会被显示在一个


新开的页面中，这样查 看页面上所有的


JS


源代码就变得方便多了。

< br>


2.8


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



其实前面第四点介绍到的


“


网络


”


功能就可以查看所有资源列表，而且可以通过查

看状态来进行对应的优化（例如排查


404


元素）。这里可 以通过


Yslow


的


componen ts


功能看到到包括类型与详细路径的资源列表：




鼠标


hover

可以看到对应的缩略图，点击则可在新窗口中打开。更多


Yslow


功


能请查看其主页。



19



各种主流浏览器的调试


< p>
2.9


、使用


Firecookie


调试页面


cookie


Firecookie


是基于


Firebug


的

< br>cookie


调试工具，先到作者的主页上了解下详细


信 息，再下载一个安装上。



/blog/firecookie/


安装好之后，


Firebug


中会多出一个“cookie”面板，你可以为需要调试 的页


面添加、删除、修改


cookie


信息。







浏览器对


JS


的调试方法



3.1.


准备工作



3.1.1


所涉及的版本



本文档所说都是基于


chrome 7


版本的，下载及安装问题我相信大家应该都


没有什么问题。



3.1.2


存在的问题



我发现调试功能中有个小


bug


（作者发现的），尤 其是在打开调试窗口时打


开控制窗口，我的


chrome


浏览器会像变魔术一样从屏幕上消失（在下面的调试


过程中没有遇到这 样的问题，可能是作者用的


β


版的）。接下来的步骤将不再


20



各种主流浏览器的调试



由我控制。< /p>


我仅仅是用了一个很简单的测试页面就出了问题，


不敢想象更大工 作


量下的情况。



如果你设置了断点后 关闭了调试工具，


断点任然存在


（在测试过程中发现对


程序运行没有影响，但是再次启动调试工具后原来的断点会对调试产生影响）。

< br>


注：以上问题，作者在


MAC


本本上调试出的问题，你不一定会碰到，不用在意。



3.2


调试脚本步骤



3.2.1


实例所需代码（例子）


< /p>


下面是一个简单的


HTML


页面以及外部 引用的


js


文件，


有两个函数和两个按


钮，两个函数分别是两个按钮点击时的处理函数。



HTML


页面：







TEST