js前台调试概述.ppt

IE8 JS前台调试概述;目录;认识“开发人员工具”;“开发人员工具”概述;【文件】菜单? 【全部撤销】：以前在开发人员工具中进行的操作全部取消，并且刷新页面和DOM结构。 【自定义Internet Explorer试图源】 ：通俗一点的说法就是：“用什么编辑器查看网页源文件”。例如：如果要设置我们查看源文件使用其他工具，在“其他”中选择即可。 【退出】 ：这个我就不多说了。;【查找】菜单? 【单击选择元素】：快捷键Ctrl+B，和点击图中的那个鼠标ICO按钮效果一样（见图一）。这个最最常用的功能，也是一个奇偶开关。打开时，用鼠标点击页面上的元素时，就会选中改元素，并且列出该元素的DOM结构、CSS样式等信息（见图二）。 ; 图 二; 图二中，左边的区域显示了此超链接元素的DOM信息。可以明确地看出它的父元素、子元素以及兄弟元素。  【样式】右面的区域显示了该元素样式信息。其中被线划掉的样式，表示该样式因为优先级不够高，已经不再起作用了。调试的时候，前面的勾可以钩掉的，钩掉的时候表示强行删除此样式。而且，每个样式的属性，用鼠标点击后都可以立即修改。从而即时的看到修改后的页面效果，非常方便。; 【跟踪样式】视图和【样式】视图的作用是一样的，都是用来看选中元素的样式信息。区别仅仅是：它换了个视图方式而已。具体习惯哪种视图，就看你自己的喜好了。 【样式】工具以级联顺序显示应用于所选元素的所有样式规则。【跟踪样式】工具显示特定样式属性的计算。在该视图中，样式按属性（而不是规则）进行分组。; 【布局】视图可以显示选中元素的盒装模型信息。 【布局】工具显示下列值： 偏移量值表示所选对象与其父项之间的距离，由 offsetLeft 和 offsetTop 属性表示。 “外边距”Margin、“边框”Border和“内边距”Padding值显示 ; 【属性】视图可以查看选中元素的属性信息。非常令人高兴的是：你可以立即增加或者删除一些属性，用来快速的调试页面。;【禁用】菜单? 【脚本】：会禁止使用页面的JavaScript或者VBScript脚本。为什么要禁用呢？为了测试页面的健壮性。有些对页面设计要求比较高的客户会???：“如果客户禁用了脚本，这个页面还能不能使用呢？”恩，对，这个功能就是用来测试这些要求比较高客户的苛刻需求的。 【弹出窗口阻止程序】：弹出窗口的过滤器。用来测试哪种“怎么才能让浏览器或者安全软件不过滤掉我的弹出窗口。 ;【查看】菜单? 【类和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样式的元素。 【浮动】：会用黄色线框出来，所有具有