《JS前台调试概述》精选课件.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名称。是的