《JS前台调试概述》PPT课件.ppt

IE8JS前台调试概述,2011-05-31李元勋,目录,“开发人员工具”的认识“开发人员工具”模式“开发人员工具”调试JS脚本“开发人员工具”探查器,认识“开发人员工具”,“开发人员工具”概述“开发人员工具”菜单栏。,“开发人员工具”概述,“开发人员工具”前身是“IEdevtoolbar”，以前只是IE的一个插件而已，而在IE8中，浏览器已经自动集成了这个工具，不仅改了名字，而且功能也加强了很多。“开发人员工具”在IE8的工具菜单下，或者直接点击F12快捷键也可以呼叫出来，F12是个奇偶快捷键，奇数是打开“开发人员工具”，偶数是关闭“开发人员工具”。打开之后如下图：,开发人员工具就是为前端开发人员开发页面而设计的工具。提供一系列的小工具，让你可以方便的查找页面的bug，包括html代码、css代码和JavaScript代码，还有取色、屏幕尺子等。ok，我们已经看到它了，并且也知道它能干什么了。那就让我们根据菜单的顺序一一来介绍它吧,【文件】菜单【全部撤销】：以前在开发人员工具中进行的操作全部取消，并且刷新页面和DOM结构。【自定义InternetExplorer试图源】：通俗一点的说法就是：“用什么编辑器查看网页源文件”。例如：如果要设置我们查看源文件使用其他工具，在“其他”中选择即可。【退出】：这个我就不多说了。,菜单-文件,【查找】菜单【单击选择元素】：快捷键Ctrl+B，和点击图中的那个鼠标ICO按钮效果一样（见图一）。这个最最常用的功能，也是一个奇偶开关。打开时，用鼠标点击页面上的元素时，就会选中改元素，并且列出该元素的DOM结构、CSS样式等信息（见图二）。,菜单-查看,图一,图二,图二中，左边的区域显示了此超链接元素的DOM信息。可以明确地看出它的父元素、子元素以及兄弟元素。【样式】右面的区域显示了该元素样式信息。其中被线划掉的样式，表示该样式因为优先级不够高，已经不再起作用了。调试的时候，前面的勾可以钩掉的，钩掉的时候表示强行删除此样式。而且，每个样式的属性，用鼠标点击后都可以立即修改。从而即时的看到修改后的页面效果，非常方便。,重要说明：使用开发人员工具所做的任何更改都是临时的，不影响网页的基础源代码。刷新页面时，将还原更改，浏览器将导航到新的页面或关闭浏览器窗口。单击“开发人员工具”工具栏上的“磁盘(保存)”按钮可将HTML和CSS更改保存到文本文件。,【跟踪样式】视图和【样式】视图的作用是一样的，都是用来看选中元素的样式信息。区别仅仅是：它换了个视图方式而已。具体习惯哪种视图，就看你自己的喜好了。【样式】工具以级联顺序显示应用于所选元素的所有样式规则。【跟踪样式】工具显示特定样式属性的计算。在该视图中，样式按属性（而不是规则）进行分组。,【布局】视图可以显示选中元素的盒装模型信息。【布局】工具显示下列值：偏移量值表示所选对象与其父项之间的距离，由offsetLeft和offsetTop属性表示。“外边距”Margin、“边框”Border和“内边距”Padding值显示,在网页中指定的相应值。如果未在网页的源代码中指定值，“布局”工具将显示WindowsInternetExplorer使用的默认值。最内部的值是元素的高度和宽度，由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验证工具，并得到验证报表。【源】：验证页面的源文件代码。会将本页面发送到验证工具，并得到验证报表。【链接】：验证页面的链接。会将本页面发送到w3c的验证工具，并得到验证报表。【本地HTML】：打开w3c的html验证工具，对本地的页面进行验证。【本地CSS】：打开w3c的CSS验证工具，对本地的页面进行验证。【辅助功能】之“WCAG清单”：验证页面的WCAG(WebContentAccessibilityReport-页面的可访问性)。会将本页面发送到验证工具，并得到验证报表。【辅助功能】之“第508条清单”：验证页面的508Standards。会将本页面发送到验证工具，并得到验证报表。【多个验证】：同时验证对页面进行多个规范的验证。,菜单-验证,“开发人员工具”模式,我们前面已经了解了IE8开发人员工具中各个菜单中命令的使用方法，而IE8开发人员工具更强劲的功能例如：如何测试版本兼容性、如何利用开发人员工具调试JavaScript脚本，以及如何利用探查器检测页面脚本函数效率等，我们将在下面一起学习：【浏览器模式】：就是让用户选择当前页面用何种IE版本去渲染。默认情况下，IE8的浏览器模式为IE8，我们框架会设置为兼容性视图模式。,【文本模式】：用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新。,“开发人员工具”JS调试,目前框架调试不能直接点击“启动调试”进行调试，如果点击“启动调试”框架会弹开好几个登陆页面。开发手册上有描述调试的方法是，右键“属性”，复制“地址（URL）”，然后在新的IE中打开，然后再按F12进行调试。,“开发人员工具”JS调试,调试的主窗口如下图，下面我们一一了解一下“控制台”、“断点”、“局部变量”、“监视”、“调用堆栈”这些视图。,【控制台】：在控制台会显示脚本调试中的一些信息，例如错误信息、警告信息一类的。【断点】：是一个显示你设定的所有断点的列表。方便你统一管理：统一删除、统一使用或者统一禁用。,“开发人员工具”JS调试,【局部变量】：可以详细的显示各个变量的所有方法、事件和属性。,【监视】：以显示任意你需要的变量的方法、事件和属性。可以添加多个。整体来说和局部变量视图差不多，只是可以更灵活的显示你需要的而已。也可以“右键”脚本中选中的变量获取表达式，选中添加监视。,“开发人员工具”JS调试,【调用堆栈】：可以直观地显示函数调用堆栈情况，以及现在执行到那个函数情况。对于理顺脚本的运行顺序和嵌套很有帮助。,“