JS前台调试概述.ppt
《JS前台调试概述.ppt》由会员分享,可在线阅读,更多相关《JS前台调试概述.ppt(30页珍藏版)》请在三一办公上搜索。
1、IE8 JS前台调试概述,2011-05-31李 元 勋,目录,“开发人员工具”的认识“开发人员工具”模式“开发人员工具”调试JS脚本“开发人员工具”探查器,认识“开发人员工具”,“开发人员工具”概述“开发人员工具”菜单栏。,“开发人员工具”概述,“开发人员工具”前身是“IEdevtoolbar”,以前只是IE的一个插件而已,而在IE8中,浏览器已经自动集成了这个工具,不仅改了名字,而且功能也加强了很多。“开发人员工具”在IE8的工具菜单下,或者直接点击F12快捷键也可以呼叫出来,F12是个奇偶快捷键,奇数是打开“开发人员工具”,偶数是关闭“开发人员工具”。打开之后如下图:,开发人员工具就是为
2、前端开发人员开发页面而设计的工具。提供一系列的小工具,让你可以方便的查找页面的bug,包括html代码、css代码和JavaScript代码,还有取色、屏幕尺子等。ok,我们已经看到它了,并且也知道它能干什么了。那就让我们根据菜单的顺序一一来介绍它吧,【文件】菜单【全部撤销】:以前在开发人员工具中进行的操作全部取消,并且刷新页面和DOM结构。【自定义Internet Explorer试图源】:通俗一点的说法就是:“用什么编辑器查看网页源文件”。例如:如果要设置我们查看源文件使用其他工具,在“其他”中选择即可。【退出】:这个我就不多说了。,菜单-文件,【查找】菜单【单击选择元素】:快捷键Ctrl
3、+B,和点击图中的那个鼠标ICO按钮效果一样(见图一)。这个最最常用的功能,也是一个奇偶开关。打开时,用鼠标点击页面上的元素时,就会选中改元素,并且列出该元素的DOM结构、CSS样式等信息(见图二)。,菜单-查看,图一,图 二,图二中,左边的区域显示了此超链接元素的DOM信息。可以明确地看出它的父元素、子元素以及兄弟元素。【样式】右面的区域显示了该元素样式信息。其中被线划掉的样式,表示该样式因为优先级不够高,已经不再起作用了。调试的时候,前面的勾可以钩掉的,钩掉的时候表示强行删除此样式。而且,每个样式的属性,用鼠标点击后都可以立即修改。从而即时的看到修改后的页面效果,非常方便。,重要说明:使用
4、开发人员工具所做的任何更改都是临时的,不影响网页的基础源代码。刷新页面时,将还原更改,浏览器将导航到新的页面或关闭浏览器窗口。单击“开发人员工具”工具栏上的“磁盘(保存)”按钮可将 HTML 和 CSS 更改保存到文本文件。,【跟踪样式】视图和【样式】视图的作用是一样的,都是用来看选中元素的样式信息。区别仅仅是:它换了个视图方式而已。具体习惯哪种视图,就看你自己的喜好了。【样式】工具以级联顺序显示应用于所选元素的所有样式规则。【跟踪样式】工具显示特定样式属性的计算。在该视图中,样式按属性(而不是规则)进行分组。,【布局】视图可以显示选中元素的盒装模型信息。【布局】工具显示下列值:偏移量值表示所
5、选对象与其父项之间的距离,由 offsetLeft 和 offsetTop 属性表示。“外边距”Margin、“边框”Border和“内边距”Padding值显示,在网页中指定的相应值。如果未在网页的源代码中指定值,“布局”工具将显示 Windows Internet Explorer 使用的默认值。最内部的值是元素的高度和宽度,由 offsetHeight 和 offsetWidth 属性定义.默认情况下,“布局”工具假定以像素为单位指定框模型属性。,【属性】视图可以查看选中元素的属性信息。非常令人高兴的是:你可以立即增加或者删除一些属性,用来快速的调试页面。,通过单击“属性”工具窗口顶部的
6、 按钮可添加或删除属性。通过组合框,您可选择要添加的属性。,【禁用】菜单【脚本】:会禁止使用页面的JavaScript或者VBScript脚本。为什么要禁用呢?为了测试页面的健壮性。有些对页面设计要求比较高的客户会问:“如果客户禁用了脚本,这个页面还能不能使用呢?”恩,对,这个功能就是用来测试这些要求比较高客户的苛刻需求的。【弹出窗口阻止程序】:弹出窗口的过滤器。用来测试哪种“怎么才能让浏览器或者安全软件不过滤掉我的弹出窗口。,菜单-禁用,【CSS】:用这里来测试一下你的页面在CSS裸奔时的姿态吧。这个也是检验页面健壮性和可访问性的重要测试”,【查看】菜单【类和ID信息】:快捷键是Ctrl+I
7、,奇偶开关。打开以后,你就会看到页面上布满了密密麻麻的红色色块。同时会显示出class名称或者ID名称。是的,这个就是查看类和ID信息的效果了。【链接路径】:和上面一样。它会把页面中的所有超链接都会一坨坨的红色框出来,并且显示其链接地址。,菜单-查看,【链接报告】:使用链接报告功能,开发人员工具会帮你生成一份此页面的链接报表。包含链接数量、链接地址、是否新窗口打开等信息。【选项卡索引】:高亮显示出所有包含tabindex属性的元素。tabindex属性的设置,可以改变网页元素获得焦点的顺序。【访问键】:高亮显示所有包含“accesskey属性”的元素。设置accesskey属性,可以设定元素获
8、得焦点的快捷键。【源文件】【DOM(元素)】:快捷键是Ctrl+T。生成一份源文件。此源文件只包含选中元素的DOM结构信息。【DOM(页面)】:快捷键Ctrl+G。生成一份源文件。此源文件包含整个页面的DOM信息结构。【原始状态】:其实就是“查看网页源码”。大家应该都比较喜欢用鼠标右键直接在网页上点吧。,菜单-查看,【轮廓】菜单:就是把满足条件的元素勾画出来显示的命令【表单元格】:就是把form表的各个单元格用桔黄色线框出来。让你知道哦。原来这里就是表的单元格呀。【表】:就是把form表单用桔红色线框出来。让你知道哦。原来这里就是form表单呀。【DIV元素】:就是把页面中的所有div元素用绿
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JS 前台 调试 概述
![提示](https://www.31ppt.com/images/bang_tan.gif)
链接地址:https://www.31ppt.com/p-6510459.html