IE8“开发人员工具”使用详解VIP免费

第1页共35页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第1页共35页IE8“开发人员工具”使用详解<上篇>IE8正式版已经发布了。本篇文章不会非常扯蛋地去进行什么评测，然后给出什么“Chrome运行JavaScript能力是IE8的15倍”、什么“IE8页面渲染速度是Safari的2.456倍”、什么“IE8的抗强暴能力比FireFox高出1.235倍”这样的操蛋的结论。我管谁比谁强多少？我只知道：当windows7发布的时候，IE8浏览器的市场占有率将让前台开发人员无法说：“不用去管IE8，没有几个人在用它”。所以，这篇文章将会非常务实的讲解一下，IE8中也许是唯一让开发人员感到亲切的“开发人员工具”。同时，我们会延伸一些相关的资料和知识。所以，请抛弃你对IE8的偏见，耐心的看下去吧。开发人员工具在IE8的工具菜单下，或者直接点击F12快捷键也可以呼叫出来。IE8开发人员工具使用详解在我们介绍它之前，我们先来说说这玩意到底能做什么？如果你只是用浏览器来浏览网站，而不用操心页面是怎么做出来的。那么我想你已经可以离开这页面了。第2页共35页第1页共35页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第2页共35页总体来说，开发人员工具就是是为前端开发人员开发页面而设计的工具。提供一系列的小工具，让你可以方便的查找页面的bug，包括html代码、css代码和JavaScript代码。同时，他也提供了一些虽然比较鸡肋，但是还能咂咂味的小工具，例如取色、屏幕尺子等。ok，我们已经看到它了，并且也知道它能干什么了。那就让我们根据菜单的顺序一一来介绍它吧——【文件】菜单IE8开发人员工具【文件】菜单第3页共35页第2页共35页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第3页共35页【全部撤销】以前在开发人员工具中进行的操作全部取消，并且刷新页面和DOM结构。【自定义InternetExplorer试图源】【试图源】真是操蛋的名词。通俗一点的说法就是：“用什么编辑器查看网页源文件”。例如：我用的就是EditPlus。【退出】为了不侮辱阁下的智商，这个我就不多说了。嗯，F12是个奇偶快捷键，这个顺便提一下吧。第4页共35页第3页共35页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第4页共35页【查找】菜单【单击选择元素】快捷键Ctrl+B，和点击图中的那个鼠标ICO按钮效果一样。最最常用的功能。也是一个奇偶开关。打开时，用鼠标点击页面上的元素时，就会选中改元素，并且列出改元素的DOM结构、CSS样式等信息。第5页共35页第4页共35页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第5页共35页例如上面的图。左边的区域显示了此超链接元素的DOM信息。可以明确地看出它的父元素、子元素以及兄弟元素。右面的区域显示了改元素样式信息。其中被线划掉的样式，表示该样式因为优先级不够高，已经不再起作用了。调试的时候，前面的勾可以钩掉的，钩掉的时候表示强行删除此样式。而且，每个样式的属性，用鼠标点击后都可以立即修改。从而即时的看到修改后的页面效果，非常方便。使用过FireFox的FireBug的朋友，对此一定不会陌生。区别仅仅是：FireBug是把优先级比较低的样式排列在下方，仅此而已。第6页共35页第5页共35页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第6页共35页【跟踪样式】视图和【样式】视图的作用是一样的，都是用来看选中元素的样式信息。区别仅仅是：它换了个视图方式而已。具体习惯哪种视图，就看你自己的喜好了。第7页共35页第6页共35页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第7页共35页【布局】视图可以显示选中元素的盒装模型信息。虽然相比FireBug可以显示更多的信息，但是我还是比较喜欢FireBug中直接在页面上用色块表现出来的方式。第8页共35页第7页共35页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第8页共35页【属性】视图可以查看选中元素的属性信息。非常令人高兴的是：你可以立即增加或者删除一些属性，用来快速的调试页面。哦，对了。需要注意的是：无论你是在开发人员工具中修改选中元素的样式还是属性，他们都是暂时的调...