web前端JS各种主流浏览器的调试.docx

《web前端JS各种主流浏览器的调试.docx》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、各种主流浏览器的调试方法WEB前端常用浏览器的调试目录1.对IE浏览器的调试21.1.IE6,IE7浏览器对JS的调试方式21.1.1准备工作21.1.2调试脚本步骤31.1.3总结41.2.IE8浏览器对JS的调试方法41.2.1.准备工作41.2.2调试脚本步骤51.2.3总结82对火狐进行调试82.1安装Firebug82.2、打开和关闭Firebug92.3、查看、编辑HTML元素及其CSS112.4、查看动态生成的HTML代码的方法142.5、查看/测试页面的函数执行效率142.6、使用Firebug查看XMLHt

2、tpRequest152.7、查看页面上所有的CSS与JS162.8、查看页面上所有的资源列表172.9、使用Firecookie调试页面cookie183.Chrome浏览器对JS的调试方法183.1.准备工作183.1.1所涉及的版本183.1.2存在的问题183.2调试脚本步骤193.2.1实例所需代码（例子）193.2.2调试的基本步骤203.3总结254对Safari进行调试254.1启用Safari的调试功能254.1.1浏览器简介254.1.2安装与使用254.2开启Debug菜单314.3Debug菜单选项3

3、14.4查看当前页面的html结构324.5查看当前页面的资源324.6查看当前页面的脚本334.7查看运行时控制台信息3453各种主流浏览器的调试方法4.8调试脚本345.Opera浏览器调试工具355.1.Dragonfly简介及其工作原理355.2调试方法365.2.1主要有两种调试方法：365.2.2如何得到Dragonfly？395.2.3如何启动Dragonfly405.2.4用户界面概述425.3基本操作435.3.1脚本标签445.3.2调用栈面板475.3.3线程日志面板485.3.4检查面板485.3.5

4、命令行495.3.6DOM标签505.3.7网页样式表标签525.3.8样式标签535.3.9DOM属性标签555.3.10布局标签575.3.11错误控制台标签5753各种主流浏览器的调试方法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.

5、1.1.3取消“禁止脚本提示”然后打开ie6或IE7浏览器选择工具->Internet选项->高级->浏览，把禁止脚本调试的两个选项的对号勾掉。53各种主流浏览器的调试方法1.1.2调试脚本步骤第一步：打开你要调试的页面，查看->脚本调试程序->打开，会在浏览器左上角出现以下的情况。第二步：点击红色的error的图片就会在浏览器下面出现调试信息，在左边会出现代码。右面会出现代码的错误信息。点击右边的错误，左边就会显示相应的错误代码。53各种主流浏览器的调试方法1.1.3总结IE6，IE7调试javascript感觉不是太好用

6、，IE8自带的调试工具比这个好用多了1.2.IE8浏览器对JS的调试方法1.2.1.准备工作1.2.1.1取消“禁止脚步调试”点击菜单栏工具->Internet选项->高级->设置->浏览。把“禁用脚本调试(InternetExplorer)”和“禁用脚本调试(其他)”的对号取消掉。1.2.1.2打开调试工具单击菜单栏工具->开发人员工具，便可打开如下工具或按F12快捷键也可53各种主流浏览器的调试方法1.2.2调试脚本步骤第一步：设置断点点击工具栏上的“脚本”，选择需要调试的文件。在文件右侧单击鼠标便可设置断点如图：单击所

7、在行则此行前端就会有断点，设置断点后，当程序运行到断点时便会暂停运行第二步：启动调试点击“启动调试”按钮，开始启动调试。返回IE8页面，触发javascript事件如单击按钮，程序运行到断点后暂停如图：53各种主流浏览器的调试方法第三步：逐语句调试单击工具栏上的逐语句调试或按F11快捷键进行逐语句调试如图：第四步：逐过程调试单击工具栏上的逐过程调试按钮或按F10快捷键进行逐过程调试第五步：跳出调试单击工具栏上的跳出调试按钮或按shift+F11快捷键跳出调试第六步：停止调试单击停止调试按钮或按shift+F5快捷键停止调试第

8、七步：控制台调试中程序出错可单击后侧工具栏控制台按钮第八步：局部变量在调试过程中，单击右侧工具栏局部变量按钮可看到程序中的局部变量，名称-值-类型如图：53各种主流浏览器的调试方法第九步：监视单击右侧工具栏的监视按钮在单击“单击以添加”输入要坚持的变量，对象回车便可监测到其的值、类型如图：