2020年(IE工业工程)IE8“开发人员工具”使用详解

使用过FireFox的FireBug的朋友，对此一定不会陌生。区别仅仅是：FireBug是把优先级比较低的样式排列在下方，仅此而已。
【跟踪样式】视图和【样式】视图的作用是一样的，都是用来见选中元素的样式信息。区别仅仅是：它换了个视图方式而已。具体习惯哪种视图，就见你自己的喜好了。
【布局】视图能够显示选中元素的盒装模型信息。虽然相比FireBug能够显示更多的信息，可是我仍是比较喜欢FireBug中直接在页面上用色块表现出来的方式。
【显示Alt文本】
能够显示出img元素的alt属性的文本。顺便说一下：图片的alt千万不要进行关键字的堆砌，否则很容易被认定为SEO过渡优化。
【查见图像报告】
生成一份详细的改页面的图像报表。包含每个图片的非常详尽的信息。
【缓存】菜单
IE8开发人员工具【缓存】菜单
管理缓存和Cookie的菜单组。对于开发人员来说这个将会是非常令人欢喜的功能。
【属性】视图能够查见选中元素的属性信息。非常令人高兴的是：你能够立即增加或者删除一些属性，用来快速的调试页面。
哦，对了。需要注意的是：无论你是在开发人员工具中修改选中元素的样式仍是属性，他们都是暂时的调试而已，且不会正在修改你的网页源代码。
【禁用】菜单
【脚本】
会禁止使用页面的JavaScript或者VBScript脚本。为什么要禁用呢？为了测试页面的健壮性。有些对页面设计要求比较高的客户会问：“如果客户禁用了脚本，这个页面仍能不能使用呢？”恩，对，这个功能就是用来测试这些操蛋客户的变态需求的。
验证页面的CSS代码。会将本页面发送到w3c的css验证工具，且得到验证报表。
【源】
验证页面的源文件代码。会将本页面发送到验证工具，且得到验证报表。
【链接】
验证页面的链接。会将本页面发送到w3c的验证工具，且得到验证报表。
【本地HTML】
打开w3c的html验证工具，对本地的页面进行验证。
ok，我们已经见到它了，且且也知道它能干什么了。那就让我们根据菜单的顺序一一来介绍它吧——
【文件】菜单
IE8开发人员工具【文件】菜单
【全部撤销】
以前在开发人员工具中进行的操作全部取消，且且刷新页面和DOM结构。
【自定义Internet Explorer试图源】
【试图源】真是操蛋的名词。通俗一点的说法就是：“用什么编辑器查见网页源文件”。例如：我用的就是EditPlus。
例如上面的图。左边的区域显示了此超链接元素的DOM信息。能够明确地见出它的父元素、子元素以及兄弟元素。
右面的区域显示了改元素样式信息。其中被线划掉的样式，表示该样式因为优先级不够高，已经不再起作用了。调试的时候，前面的勾能够钩掉的，钩掉的时候表示强行删除此样式。而且，每个样式的属性，用鼠标点击后都能够立即修改。从而即时的见到修改后的页面效果，非常方便。
和上面一样。它会把页面中的所有超链接都会一坨坨的红色框出来，且且显示其链接地址。
【链接报告】
使用链接报告功能，开发人员工具会帮你生成一份此页面的链接报表。包含链接数量、链接地址、是否新窗口打开等信息。不过，具体这玩意有什么用。我也不知道。
【选项卡索引】
高亮显示出所有包含tabindex属性的元素。tabindex属性的设置，能够改变网页元素获得焦点的顺序。
【访问键】
高亮显示所有包含“accesskey属性”的元素。设置accesskey属性，能够设定元素获得焦点的快捷键。
【源文件】之“带有样式的元素源”
生成一份包含选中元素样式、HTML代码，网页级别信息的源文件。
必须先选中一个元素，此命令才有效。而且生成的源文件也只和选中元素有关。
【源文件】之“DOM（元素）”
开发人员工具在IE8的工具菜单下，或者直接点击F12快捷键也能够呼叫出来。
IE8开发人员工具使用详解
在我们介绍它之前，我们先来说说这玩意到底能做什么？如果你只是用浏览器来浏览网站，而不用操心页面是怎么做出来的。那么我想你已经能够离开这页面了。
总体来说，开发人员工具就是是为前端开发人员开发页面而设计的工具。提供一系列的小工具，让你能够方便的查找页面的bug，包括html代码、css代码和JavaScript代码。同时，他也提供了一些虽然比较鸡肋，可是仍能咂咂味的小工具，例如取色、屏幕尺子等。
【源文件】之“原始状态”
极其操蛋的功能，其实就是“查见网页源码”。大家应该都比较喜欢用鼠标右键直接在网页上点吧。
【轮廓】菜单
【轮廓】菜单，很明显就是把满足条件的元素勾画出来显示的命令。
【表单元格就是表的单元格呀。
【表】
就是把form表单用桔色线框出来。让你知道——哦。原来这里就是form表单呀。
【定位元素】之“相对”
会用绿色线框出来，所有具有position:relative样式的元素。
【定位元素】之“绝对”
会用黑色线框出来，所有具有position:absolute样式的元素。
【定位元素】之“固定”
会用蓝色线框出来，所有具有position:static样式的元素。
【定位元素】之“浮动”
【本地CSS】
打开w3c的CSS验证工具，对本地的页面进行验证。
【辅助功能】之“WCAG清单”
验证页面的WCAG(Web Content Accessibility Report-页面的可访问性)。会将本页面发送到验证工具，且得到验证报表。
【辅助功能】之“第508条清单”
【重新调整大小】
非常有用的小工具。能够快速的将浏览器窗口调整到相关的尺寸。这样，测试网页分辨率兼容性的时候就方便多了。
【显示标尺】
一个简单的标尺工具。使用它能够度量长度、距离等信息。线的颜色是能够换的。也能够创建多个标尺。如果太细微的地方，能够使用放大镜功能。
【显示颜色选取器】
一个简单的拾色工具。点击鼠标就能够选中颜色。不过，我向你推荐另外一个工具——《我的工作工具箱——抓色工具(ColorPic)》，相比之下，开发人员工具中的这个就太简单了。
（IE工业工程）IE8“开发人员工具”使用详解
IE8“开发人员工具”使用详解
<上篇>
IE8正式版已经发布了。本篇文章不会非常扯蛋地去进行什么评测，然后给出什么“Chrome运行JavaScript能力是IE8的15倍”、什么“IE8页面渲染速度是Safari的2.456倍”、什么“IE8的抗强暴能力比FireFox高出1.235倍” 这样的操蛋的结论。我管谁比谁强多少？我只知道：当windows7发布的时候，IE8浏览器的市场占有率将让前台开发人员无法说：“不用去管IE8，没有几个人在用它”。所以，这篇文章将会非常务实的讲解一下，IE8中也许是唯一让开发人员感到亲切的“开发人员工具”。同时，我们会延伸一些相关的资料和知识。所以，请抛弃你对IE8的偏见，耐心的见下去吧。
【禁用Cookie】
没有什么好处说。不让吃饼干了。
【清除会话Cookie】
清除浏览器所有的Cookie。你的论坛呀，社区呀都等着重新登陆吧。
【清除域的Cookie】
只清除本域下的Cookie。
【查见Cookie信息】
查见此页面包含的Cookie信息。想都别想，密码你是得不到的。
【工具】菜单
开发人员工具附送的一些很有用的小工具，虽然相比其他专门的相关工具有点弱。可是应急仍是足够的。
<下篇>
在上一篇文章IE8“开发人员工具”使用详解上(各级菜单详解) 中，我们详细地讲解了IE8开发人员工具中各个菜单中命令的使用方法，相信很多朋友应该已经使用上了。而IE8开发人员工具更强劲的功能例如：如何测试版本兼容性、如何利用开发人员工具调试JavaScript脚本，以及如何利用探查器检测页面脚本函数效率等，我们将在本篇文章中讲解。小弟拙笨，此处仅为抛砖。
【始终从服务器中刷新】
好像很高深的命令一样。其实换句话说就是：“禁止使用浏览器缓存”。
【清除浏览器缓存】
快捷键Ctrl+R。没啥好说的，只是简化了以前的操作步骤而已。
不知道你注意到菜单中【清除浏览器缓存】后面有三个点没有。这个表示，点击此菜单后会确认对话框。
【清除此域的浏览器缓存】
快捷键Ctrl+D。没啥好说的，只清除本域下的浏览器缓存。
【DIV元素】
就是把页面中的所有div元素用绿色线框出来。让你知道——哦。原来这些都是div元素呀。
【图像】
就是把页面中的所有img元素用紫色线框出来。让你知道——哦。原来这些都是img元素呀。
【任何元素】
这个比较强劲了。你能够自定义任何标签和他们要用什么颜色的线框出来。点击这个菜单，会弹出下面的对话框。很简单。不再做说明了。
快捷键是Ctrl+T。生成一份源文件。此源文件只包含选中元素的DOM结构信息。用过FireBug的朋友，能够联想到“拷贝元素HTML代码”这个命令。其实这个和那个差不多。只是这个是生成到一个窗口，而FireBug直接复制到剪贴板而已。
【源文件】之“DOM（页面）”
快捷键Ctrl+G。生成一份源文件。此源文件包含整个页面的DOM信息结构。非常操蛋的功能，不知道是不是因为bug的原因，此功能其实就是“查见网页源码”。因为，生成的源码且不仅仅是DOM信息，也包含CSS和脚本信息等。
【退出】
为了不侮辱阁下的智商，这个我就不多说了。嗯，F12是个奇偶快捷键，这个顺便提一下吧。
【查找】菜单
【单击选择元素】
快捷键Ctrl+B，和点击图中的那个鼠标ICO按钮效果一样。最最常用的功能。也是一个奇偶开关。打开时，用鼠标点击页面上的元素时，就会选中改元素，且且列出改元素的DOM结构、CSS样式等信息。
【弹出窗口阻止程序】
弹出窗口的过滤器。用来测试哪种“怎么才能让浏览器或者安全软件不过滤掉我的弹出窗口。”
【CSS】
“CSS裸奔节”来了！用这里来测试一下你的页面在CSS裸奔时的姿态吧。这个也是检验页面健壮性和可访问性的重要测试。虽然，当下在中国会访问网页的盲人仍不是很多。