IE8 如何调试.docx
- 文档编号:18952258
- 上传时间:2023-04-24
- 格式:DOCX
- 页数:12
- 大小:219.10KB
IE8 如何调试.docx
《IE8 如何调试.docx》由会员分享,可在线阅读,更多相关《IE8 如何调试.docx(12页珍藏版)》请在冰豆网上搜索。
IE8如何调试
IE8如何调试
1.浏览器模式
2.文本模式
3.利用IE8开发人员工具调试JavaScript脚本
1.还是让我们先看看脚本调试界面吧
2.控制台
3.断点
4.局部变量
5.监视
6.调用堆栈
4.IE8开发人员工具的探查器
1.函数视图
2.调用树
3.一些关于IE8开发人员工具探查器Profiler的资料
自己亲自使用心得:
在想要调试的网页上按下f12快捷键,然后切换到调试模式。
在想要调试的代码上加断点,然后点击启动调试,但是ie往往会提示:
无法加载进程,该进程可能附加另一个...,点击确定,然后重新点击开始调试,刷新页面,然后即可。
但是你要保证你调试的代码能够运行到。
一下是转载的关于ie调试的扩展功能:
浏览器模式
应了《无间道》的那句话——“出来混,迟早是要还的!
”。
IE6种下的苦果,现在果然到了要咽下的时候了。
当IE8发布的时候,他不得不面对着世界上成千上万“只有在IE6中才能正常显示”的页面。
不发布IE8了吧,FireFox和Chrome又跟着后面抢蛋糕;不管那些“IE6only”的页面吧,那浏览器出来还不被人骂死;让所有的站长都把页面重构吧,想想自己都要笑。
唉,这可咋整呀。
唉,有了,咱采取一个手段,让用户自己去处理,如果他碰到了“IE6only”页面,就让他自己手动处理一下,让浏览器还用老的渲染模式渲染页面,这虽然麻烦了一点用户,但是也不失是个办法。
于是“浏览器模式”出来了。
说白了,就是让用户选择当前页面用何种IE版本去渲染。
举个例子吧,顺便练习一下《IE的有条件注释详解》,核心代码如下——
--[ifIE7]>
浏览器是IE7
[endif]-->
--[ifIE8]>
浏览器是IE8
[endif]-->
让我们来试试这个页面,在不同的浏览器模式下的显示效果吧——
IE8开发人员工具之浏览器模式
对于普通用户,微软官方推荐的是这个玩意——兼容性视图按钮。
当然,对前端开发人员来说,这个工具主要用来测试页面多浏览器兼容性而已。
但是非常遗憾的是:
没有IE6模式。
没有IE6的世界,虽然是一个美好的愿望,但是可惜的是:
我们生活在现实之中,或许说生活在地狱中更确切。
所以,我还是不得不提下面的两个工具——
IE多版本共存的解决方案——IETester
微软网页开发调试利器SuperPreview(附下载)
文本模式
说起“文本模式”这个名词,这又要回到渲染页面的3种模式了:
诡异模式(Quirksmode,也有翻译为兼容模式、怪异模式的),标准模式(Standardsmode),和几乎标准模式(Almoststandardsmode)。
这是一个非常重要、但是很多人却比较模糊的概念。
一两句话不太能说清楚,这样说吧——“页面的不同渲染模式,将直接影响页面的最终呈现效果”,也就是说,一个页面如果在这种模式下显示完美,但是在另外一种模式下可能就显示的一塌糊涂。
而决定页面模式的是页面的!
DOCTYPE属性。
乖乖,这玩意太绕人了,还是直接上例子吧。
最经典的就是对盒装模型的解释差异了。
下面两个图,是相同页面,采用不同页面渲染模式的最终显示效果。
页面很简单,只要一个div元素,然后随便设置一点高度、宽度、padding、margin就可以了。
核心代码如下——
#divTest{
background-color:
red;
padding:
10px;
margin:
10px;
width:
100px;
height:
100px;
}
--[ifIE7]>
浏览器是IE7
[endif]-->
--[ifIE8]>
浏览器是IE8
[endif]-->
IE8开发人员工具之文本模式
从图片中,我们可以清楚的看到,红色div块的大小和位置,在不同的文本模式下,发生了明显的变化。
关于文本模式的详细资料,我建议你看这篇文章《Quirksmode、Almoststandardsmode、Standardsmode》。
虽然是英文原版的资料,也绝对值得翻着字典看完。
还有这篇视频教程中,我也有较为详细的介绍到,《“阿一web标准学堂”第4课》
利用IE8开发人员工具调试JavaScript脚本
重头戏来了。
很多朋友梦寐以求的功能呀——JavaScript脚本调试。
一直摆脱不掉FireFox,就是因为Firebug实在太好用。
虽然利用VS这样航母级的软件也能进行JavaScript脚本的调试。
但是,很多前台开发人员并不会为了一个JavaScript调试功能而去安装那种大家伙。
所以对JavaScript的调试,IE的用户一直耿耿于怀。
但是,现在终于可以平息了。
因为IE8开发人员工具终于也有了小巧,却功能强大的JavaScript调试功能。
不多说,直接上例子,这里就举一个简单到弱智的例子吧。
核心代码如下:
1:
functiontest(){
2:
test2();
3:
}
4:
functiontest2(){
5:
var_obj=document.getElementById("divTest");
6:
varstr=_obj.id;
7:
alert(str);
8:
}
还是让我们先看看脚本调试界面吧
利用IE8开发人员工具调试JavaScript脚本
图上的说明已经很清楚了,下面就详细讲一下“控制台”、“断点”、“局部变量”、“监视”、“调用堆栈”这些视图吧。
控制台
在控制台会显示脚本调试中的一些信息,例如错误信息、警告信息一类的。
恩,其实也可以当成是一个微型JavaScript运行环境。
你可以在这里直接键入脚本并运行。
如果一行不够的话,可以切换到多行模式。
输入完毕后,点击“运行脚本”,就可以看到运行结果了。
断点
是一个显示你设定的所有断点的列表。
方便你统一管理:
统一删除、统一使用或者统一禁用。
局部变量
我非常喜欢的视图之一。
可以详细的显示各个变量的所有方法、事件和属性。
我最喜欢干的事情,就是一个个的看下去,看到不知道的就去查资料,绝对是个学习JavaScript的好方法。
例如,下面途中这就发现了一些IE8特有的方法。
监视
我非常喜欢的视图之一。
可以显示任意你需要的变量的方法、事件和属性。
可以添加多个。
整体来说和局部变量视图差不多,只是可以更灵活的显示你需要的而已。
调用堆栈
可以直观地显示函数调用堆栈情况,以及现在执行到哪个函数的情况。
对于理顺脚本的运行顺序和嵌套很有帮助。
IE8开发人员工具的探查器
“探查器”这玩意一开始还真的让我摸不到头脑,还以为是类似那些国产的,用在马桶或者世界之窗上的插件,用来分析出网页中的flash或者视频、音频地址的呢。
到后来,看到的英文原版的才知道,其实就是——“Profiler”。
用过微软SQL数据库中的Profiler的朋友都知道,那个一个帮助SQL分析效率的工具。
它会记录所有的执行以及他们的执行时间,从而提供一份报表。
这样,就可以知道到底是什么在效率上拖l了后腿。
IE8的探查器(Profiler),也引入了这个概念,只是它探测的是JavaScript脚本而已。
先点击【开始配置文件】按钮,然后运行脚本或者刷新页面。
等脚本执行完了,或者页面刷新完毕后点击【停止配置文件】按钮,就会生成探查报告了。
它提供两种视图,一种是“函数”,另一种是“调用树”。
无论何种视图,都可以清晰且忠实的展现出各个函数的执行所用时间。
从而,方便你分析出“为啥我的页面那么慢呢?
”
函数视图
函数视图可以方便的按照各个参数进行排序,从而方便的找出类似“谁用的时间最长”这样的答案。
调用树
调用树视图可以方便的看出各个函数之间的调用关系。
一些关于IE8开发人员工具探查器(Profiler)的资料
如果,你还没有过瘾的话,可以看看下面这篇文章,绝对权威。
《IntroducingtheIE8DeveloperToolsJScriptProfiler》
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- IE8 如何调试 如何 调试
![提示](https://static.bdocx.com/images/bang_tan.gif)