zoukankan      html  css  js  c++  java
  • Internet Explorer Developer Toolbar

    IE的网页分析工具--Internet Explorer Developer Toolbar

     

     

    无论您是亲自开发 Web 内容还是仅为本地网站管理员提供支持,都可以使用一个免费的 Microsoft 实用工具来更轻松地完成工作。借助 Internet Explorer Developer Toolbar,您可以通过查看后台修复行为错误的网页。Toolbar 会显示适用于文本、表格、图像和其他 HTML 内容的所有标记和样式。您可以查看样式规则、突出显示页面上的特定元素,甚至还可以验证 HTML CSS


    和其它应用程序一样,下载完IE Developer Toolbar之后,双击程序运行安装,一路Next完成安装,在安装过程中并不会要求关闭IE窗口(至少IE7下如此),安装完成后,新开一个IE窗口,从工具栏最右边的图标处可以找到它的快捷方式,如下图:

     查看更多精彩图片

    点击它后即打开IE Developer Toolbar的界面:

     查看更多精彩图片

     

    红线画出的为菜单栏和浮动窗口与独立窗口切换按钮.
    在左边窗口处,点击相应的标签,IE Developer Toolbar即可在IE窗口中将相应的位置用线条标出,并用闪烁来提醒,很是方便实用。


    您可以从下载的 IEDevToolBarSetup.msi 文件安装 Internet Explorer Developer Toolbar。安装后,重新打开 Internet Explorer,命令栏上即会显示名为“IE Developer Toolbar”的新按钮。单击此按钮,Toolbar 会在浏览器窗口的下半部分打开,并且分为三个窗格(请参阅屏幕快照)。第一个窗格显示所有网页元素的树视图。单击任一元素,即可在其他两个窗格中显示其属性和样式。

    通过单击或搜索特定元素,您可以使用下拉菜单在屏幕上突出显示它们。例如,搜索所有的 h3 标记后,它们就会逐个显示在树视图中。选择标记即可框住其在网页上的对应元素。您还可以通过选择特定类别(如 div 标记、表格、图像和使用绝对定位或相对定位放置的对象)来查找元素。

    Toolbar
    对处理样式规则尤其有用。它可以突出显示页面上使用 ID 或类别样式设置格式的所有项目。您可以生成一个包含样式表中所有规则的报表,以确定应用这些规则的位置和方式。您甚至可以禁用所有 CSS 来查看页面元素受到的影响。

    要使用 Toolbar 管理图形对象,您可以启用和禁用图像,并显示每个图片的分辨率、大小、路径及 alt 标记。Toolbar 还将生成一个易读的图像报表,以显示所有图形的详细信息。

    使用 Toolbar,您可以轻松地将调整浏览器页面的分辨率,您可以选择 800x600 1280x1024,也可以调整为自定义大小。屏幕上标尺可以测量任何元素的大小(以像素为单位)。颜色选取器工具可以显示取色器,您可以通过它选择对象,以查看其 RGB 和十六进制颜色值。

     

    为了帮助您解决网页问题,Toolbar 可以禁用某些元素,例如 JavaScript Cookie。您可以查看内容的 HTML 源代码,此内容可以是整个页面也可以只是选定对象。此外,源代码显示已经过格式化并使用颜色标识,因此,很容易分辨出内容与标记。从树视图中,您甚至可以添加和删除呈现的页面中显示的样式和其他属性,以便查看其效果。最后,Toolbar 会将您的页面输送到万维网联合会 (W3C) 验证服务,以确保您的内容已通过以下几个方面的检查:XHTML 有效性、断开的链接和可访问性。 

    FireFox丰富的插件使其一直倍受Web开发者的宠受,如FireBugWeb DeveloperDOM InspectorLive HTTP Headers等均是Web开发中强大的工具。相比之下,IE下的这类插件斥相对缺乏了。可能是为了扭转在Web开发领域尴尬的局而,微软于075月发布了Internet Explorer Developer Toolbar,一款针对Web开发而设计的IE插件,欲与FireFox等展开正面交锋。Internet Explorer Developer Toolbar的推出,让我们又一次看到了竞争带来的进步。

    点击Disable工具,即可关闭CSS,JavaScript,Popup Blocker(弹出?),其中关闭Javascript这个功能甚是实用,至少去某些站点复制东西的时候,就不会再有不允许复制的提示出现了....

    Images
    工具栏下提供详细的图片参数显示,Tools工具下自带了标尺和取色器两个小工具,还能设置网页在不能分辨率下显示的效果.

    FireFoxFireBug相比,功能基本类似,但没有FireBug工具的网页打开时间统计,此工具可以知道网页上哪个元素影响了网页打开速度.从而解决网页打开速度过慢的问题.

    微软官方列出的Internet Explorer Developer Toolbar的主要工能如下: 

    查看和修改页面中的DOM对象

    通过不同的形式定位和选择页面中的元素

    开关指定的IE设置项

    查看HTML元素的classID、链接的路径、tab indexaccess keys

    高亮显示表格、单元格、图像和指定的标签

    校验HTMLCSSWAIRSS

    查看图片尺寸、文件体积、路径信息以及ALT文本等

    以指定的分辨率查看网页

    删除指定域名的cookies和缓存

    可精确量度页面对象尺寸的标尺

    查找样式规则并修改元素的样式值

    以格式化和高亮的形式显示HTMLCSS代码

     

    下载地址:

    Internet Explorer Developer Toolbar

  • 相关阅读:
    客户端本地存储,web存储,localStorage
    js地理定位对象 navigator.geolocation
    使用defined和require引入js
    VUE的使用方法
    $.each()的用法
    jQuery的deferred对象详解
    jquery 中prop()的使用方法
    IE7下对某些seajs压缩文件不兼容的解决方法
    饼状图注释
    $.grep()的用法
  • 原文地址:https://www.cnblogs.com/Gemgin/p/3136366.html
Copyright © 2011-2022 走看看