第十章 JS前台调试概述.pdf

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信息。可以明确地 看出它的父元素、子元素以及兄弟元素。 【样式】右面的区域显示了该元素样式信息。其中被线划掉的样式， 表示该样式因为优先级不够高，已经不再起作用了。调试的时候，前面 的勾可以钩掉的，钩掉的时候表示强行删除此样式。而且，每个样式的 属性，用鼠标点击后都可以立即修改。从而即时的看到修改后的页面效 果，非常方便。 重要说明：使用开发人 员工具所做的任何更改 都是临时的，不影响网 页的基础源代码。刷新 页面时，将还原更改， 浏览器将导航到新的页