JS前台调试概述1.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,#,IE8 JS,前台调试概述,2011-05-31,李 元 勋,目录,“开发人员工具”的认识,“开发人员工具”模式,“开发人员工具”调试,JS,脚本,“开发人员工具”探查器,认识“开发人员工具”,“开发人员工具”概述,“开发人员工具”菜单栏。,“开发人员工具”概述,“开发人员工具”前身是“,IEdevtoolbar,”，以前只是,IE,的一个插件而已，而在,IE8,中，浏览器已经自动集成了这个工具，不仅改了名字，而且功能也加强了很多。,“开发人员工具”在,IE8,的工具菜单下，或者直接点击,F12,快捷键也可以呼叫出来，,F12,是个奇偶快捷键，奇数是打开“开发人员工具”，偶数是关闭“开发人员工具”。打开之后如下图：,开发人员工具就是为前端开发人员开发页面而设计的工具。提供一系列的小工具，让你可以方便的查找页面的,bug,，包括,html,代码、,css,代码和,JavaScript,代码，还有取色、屏幕尺子等。,ok,，我们已经看到它了，并且也知道它能干什么了。那就让我们根据菜单的顺序一一来介绍它吧,【,文件,】,菜单,【,全部撤销,】,：以前在开发人员工具中进行的操作全部取消，并且刷新页面和,DOM,结构。,【,自定义,Internet Explorer,试图源,】,：,通俗一点的说法就是：“用什么编辑器查看网页源文件”。例如：如果要设置我们查看源文件使用其他工具，在“其他”中选择即可。,【,退出,】,：这个我就不多说了。,菜单,-,文件,【,查找,】,菜单,【,单击选择元素,】,：快捷键,Ctrl+B,，和点击图中的那个鼠标,ICO,按钮效果一样（见图一）。这个最最常用的功能，也是一个奇偶开关。打开时，用鼠标点击页面上的元素时，就会选中改元素，并且列出该元素的,DOM,结构、,CSS,样式等信息（见图二）。,菜单,-,查看,图一,图 二,图二中，左边的区域显示了此超链接元素的,DOM,信息。可以明确地看出它的父元素、子元素以及兄弟元素。,【,样式,】,右面的区域显示了该元素样式信息。其中被线划掉的样式，表示该样式因为优先级不够高，已经不再起作用了。调试的时候，前面的勾可以钩掉的，钩掉的时候表示强行删除此样式。而且，每个样式的属性，用鼠标点击后都可以立即修改。从而即时的看到修改后的页面效果，非常方便。,重要说明,：使用开发人员工具所做的任何更改都是临时的，不影响网页的基础源代码。刷新页面时，将还原更改，浏览器将导航到新的页面或关闭浏览器窗口。单击“开发人员工具”工具栏上的“磁盘,(,保存,)”,按钮可将,HTML,和,CSS,更改保存到文本文件。,【,跟踪样式,】,视图和,【,样式,】,视图的作用是一样的，都是用来看选中元素的样式信息。区别仅仅是：它换了个视图方式而已。具体习惯哪种视图，就看你自己的喜好了。,【,样式,】,工具,以级联顺序显示应用于所选元素的所有样式,规则。,【,跟踪样式,】,工具,显示特定样式属性的计算。在该视图中，样式按属性（而不是规则）进行,分组。,【,布局,】,视图可以显示选中元素的盒装模型信息。,【,布局,】,工具,显示下列值：,偏移,量值表示所选对象与其父项之间的距离，由,offsetLeft,和,offsetTop,属性表示。,“外边距”,Margin,、“边框”,Border,和“内边距”,Padding,值显示,在网页,中指定的相应值。如果未在网页的源代码中指定值，“布局”工具将显示,Windows Internet Explorer,使用的默认值。,最,内部的值是元素的高度和宽度，由,offsetHeight,和,offsetWidth,属性,定义,.,默认情况下，“布局”工具假定以像素为单位指定框模型,属性。,【,属性,】,视图可以查看选中元素的属性信息。非常令人高兴的是：你可以立即增加或者删除一些属性，用来快速的调试页面。,通过单击“属性”工具窗口顶部,的,按钮,可添加或删除属性。通过组合框，您可选择要添加的,属性。,【,禁用,】,菜单,【,脚本,】,：会禁止使用页面的,JavaScript,或者,VBScript,脚本。为什么要禁用呢？为了测试页面的健壮性。有些对页面设计要求比较高的客户会问：“如果客户禁用了脚本，这个页面还能不能使用呢？”恩，对，这个功能就是用来测试这些要求比较高客户的苛刻需求的。,【,弹出窗口阻止程序,】,：弹出窗口的过滤器。用来测试哪种“怎么才能让浏览器或者安全软件不过滤掉我的弹出窗口。,菜单,-,禁用,【CSS】,：用这里来测试一下你的页面在,CSS,裸奔时的姿态吧。这个也是检验页面健壮性和可访问性的重要测试”,【,查看,】,菜单,【,类和,ID,信息,】,：快捷键是,Ctrl+I,，奇偶开关。打开以后，你就会看到页面上布满了密密麻麻的红色色块。同时会显示出,class,名称或者,ID,名称。是的，这个就是查看类和,ID,信息的效果了。,【,链接路径,】,：和上面一样。它会把页面中的所有超链接都会一坨坨的红色框出来，并且显示其链接地址。,菜单,-,查看,【,链接报告,】,：使用链接报告功能，开发人员工具会帮你生成一份此页面的链接报表。包含链接数量、链接地址、是否新窗口打开等信息。,【,选项卡索引,】,：高亮显示出所有包含,tabindex,属性的元素。,tabindex,属性的设置，可以改变网页元素获得焦点的顺序。,【,访问键,】,：高亮显示所有包含“,accesskey,属性”的元素。设置,accesskey,属性，可以设定元素获得焦点的快捷键。,【,源文件,】,【DOM,（元素）,】,：快捷键是,Ctrl+T,。生成一份源文件。此源文件只包含选中元素的,DOM,结构信息。,【DOM,（页面,）,】,：,快捷键,Ctrl+G,。生成一份源文件。此源文件包含整个页面的,DOM,信息结构。,【,原始状态,】,：其实就是“查看网页源码”。大家应该都比较喜欢用鼠标右键直接在网页上点吧。,菜单,-,查看,【,轮廓,】,菜单,：就是把满足条件的元素勾画出来显示的命令,【,表单元格,】,：就是把,form,表的各个单元格用,桔黄色线,框出来。让你知道,哦。原来这里就是表的单元格呀。,【,表,】,：就是把,form,表单用,桔红色线,框出来。让你知道,哦。原来这里就是,form,表单呀。,【DIV,元素,】,：就是把页面中的所有,div,元素用,绿色线,框出来。让你知道,哦。原来这些都是,div,元素呀。,菜单,-,轮廓,【,图像,】,：就是把页面中的所有,img,元素用,紫色线,框出来。让你知道,哦。原来这些都是,img,元素呀。,【,任何元素,】,：你可以自定义任何标签和他们要用什么颜色的线框出来。点击这个菜单，会弹出下面的对话框。比如我要将所有的,td,用蓝色表示。,菜单,-,轮廓,【,定位元素,】,【,相对,】,：会用,绿色线,框出来，所有具有,position:relative,样式的元素。,【,绝对,】,：会用,黑色线,框出来，所有具有,position:absolute,样式的元素。,【,固定,】,：会用,蓝色线,框出来，所有具有,position:static,样式的元素。,【,浮动,】,：会用,黄色线,框出来，所有具有,float,样式的元素。,【,清除轮廓,】,：当你的页面已经被各种颜色的线搞的像,Excel,表格一样的时候，你可以可以使用这个命令来清除所有的线了,菜单,-,轮廓,【,图像,】,菜单,：这个命令就是控制页面上各种图片的,【,禁用图像,】,：禁用页面的图片元素，禁用的不仅是,img,元素而且连元素的背景图片都会被禁用。,【,显示图像尺寸,】,：很不错的功能。可以不用查看图片属性就快速的知道各个图片的尺寸大小，当然，单位是像素。,【,显示图像文件大小,】,：很不错的功能。可以不用查看图片属性就快速的知道各个图片的文件大小，当然，单位是字节。,菜单,-,图像,【,显示图像路径,】,：很不错的功能。可以不用查看图片属性就快速的知道各个图片的,URL,路径，而且还可以复制。,【,显示,Alt,文本,】,：可以显示出,img,元素的,alt,属性,(,为无法显示的图像，表单，,applets,的浏览器，显示替换文字,),的文本。,【,查看图像报告,】,：生成一份详细的改页面的图像报表。包含每个图片的非常详尽的信息。,菜单,-,图像,【,缓存,】,菜单,：管理缓存和,Cookie(,指某些网站为了辨别用户身份、进行,session,跟踪而储存在用户本地终端上的数据（通常经过加密）,),的菜单组,【,始终从服务器中刷新,】,：其实就是“禁止使用浏览器缓存”。,【,清除浏览器缓存,】,：快捷键,Ctrl+R,。不知道你注意到菜单中,【,清除浏览器缓存,】,后面有三个点没有。这个表示，点击此菜单后会确认对话框。,【,清除此域的浏览器缓存,】,：快捷键,Ctrl+D,。只清除本域下的浏览器缓存。,【,禁用,Cookie】,：,.,。,【,清除会话,Cookie】,：清除浏览器所有的,Cookie,。,【,清除域的,Cookie】,：只清除本域下的,Cookie,。,【,查看,Cookie,信息,】,：查看此页面包含的,Cookie,信息。,菜单,-,缓存,【,工具,】,菜单,：开发人员工具附送的一些很有用的小工具，虽然相比其他专门的相关工具有点弱。但是应急还是足够的,【,重新调整大小,】,：非常有用的小工具。可以快速的将浏览器窗口调整到相关的尺寸。这样，测试网页分辨率兼容性的时候就方便多了。,【,显示标尺,】,：一个简单的标尺工具。使用它可以度量长度、距离等信息。线的颜色是可以换的。也可以创建多个标题。如果太细为的地方，可以使用,放大镜,功能。,【,显示颜色选取器,】,：一个简单的拾色工具。点击鼠标就可以选中颜色。,菜单,-,工具,【,验证,】,菜单,【HTML】,：验证页面的,HTML,代码。会将本页面发送到,w3c,的,html,验证工具，并得到验证报表。,【CSS】,：验证页面的,CSS,代码。会将本页面发送到,w3c,的,css,验证工具，并得到验证报表。,【,源,】,：验证页面的源文件代码。会将本页面发送到,feedvalidator.org,验证工具，并得到验证报表。,【,链接,】,：验证页面的链接。会将本页面发送到,w3c,的验证工具，并得到验证报表。,【,本地,HTML】,：打开,w3c,的,html,验证工具，对本地的页面进行验证。,【,本地,CSS】,：打开,w3c,的,CSS,验证工具，对本地的页面进行验证。,【,辅助功能,】,之“,WCAG,清单”：验证页面的,WCAG(Web Content Accessibility Report-,页面的可访问性,),。会将本页面发送到,验证工具，并得到验证报表。,【,辅助功能,】,之“第,508,条清单”：验证页面的,508 Standards,。会将本页面发送到,验证工具，并得到验证报表。,【,多个验证,】,：同时验证对页面进行多个规范的验证。,菜单,-,验证,“开发人员工具”模式,我们前面已经了解了,IE8,开发人员工具中各个菜单中命令的使用方法，而,IE8,开发人员工具更强劲的功能例如：如何测试版本兼容性、如何利用开发人员工具调试,JavaScript,脚本，以及如何利用探查器检测页面脚本函数效率等，我们将在下面一起学习：,【,浏览器模式,】,：,就是让用户选择当前页面用何种,IE,版本去渲染。默认情况下，,IE8,的浏览器模式为,IE8,，我们框架会设置为兼容性视图模式。,【,文本模式,】,：,用于指定,IE,的页面排版引擎（,Trident,）以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新。,“开发人员工具”,JS,调试,目前框架调试不能直接点击“启动调试”进行调试，如果点击“启动调试”框架会弹开好几个登陆页面。开发手册上有描述调试的方法是，右键“属性”，复制“地址（,URL,）”，然后在新的,IE,中打开，然后再按,F12,进行调试。,“开发人员工具”,JS,调试,调试的主窗口如下图，下面我们一一了解一下“控制台”、“断点”、“局部变量”、“监视”、“调用堆栈”这些视图。,【,控制台,】,：,在控制台会显示脚本调试中的一些信息，例如错误信息、警告信息一类的。,【,断点,】,：,是一个显示你设定的所有断点的列表。方便你统一管理：统一删除、统一使用或者统一禁用。,“开发人员工具”,JS,调试,【,局部变量,】,：,可以详细的显示各个变量的所有方法、事件和属性。,【,监视,】,：,以显示任意你需要的变量的方法、事件和属性。可以添加多个。整体来说和局部变量视图差不多，只是可以更灵活的显示你需要的而已。,也可以“右键”脚本中选中的变量获取表达式，选中添加监视。,“开发人员工具”,JS,调试,【,调用堆栈,】,：,可以直观地显示函数调用堆栈情况，以及现在执行到那个函数情况。对于理顺脚本的运行顺序和嵌套很有帮助。,“开发人员工具”探查器,先点击,【,开始配置文件,】,按钮，然后运行脚本或者刷新页面。等脚本执行完了，或者页面刷新完毕后点击,【,停止配置文件,】,按钮，就会生成探查报告了。,【,探测器,】,是一个帮助分析效率的工具。它会记录所有的执行以及他们的执行时间，从而提供一份报表。这样，就可以知道到底是什么在效率上拖,l,了后腿,“开发人员工具”探查器,【,函数视图,】,函数视图可以方便的按照各个参数进行排序，从而方便的找出类似“谁用的时间最长”这样的答案。,【,调用树,】,调用树视图可以方便的看出各个函数之间的调用关系。,THANK YOU!,