《JS前台调试概述》PPT课件.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验证工具，并 得到验证报表。 【源】：验证页面的源文件代码。会将本页面发送到验证 工具，并得到验证报表。 【链接】：验证页面的链接。会将本页面发送到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调试 【调用堆栈】：可以直观地显示函数调用堆栈情况，以及现在执行到那个函数 情况。对于理顺脚本的运行顺序和嵌套很有帮助。 “开发人员