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

  • 相关阅读:
    jMeter 里 CSV Data Set Config Sharing Mode 的含义详解
    如何使用 jMeter Parallel Controller
    使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
    使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
    关于 SAP 电商云首页加载时触发的 OCC API 请求
    SAP UI5 确保控件 id 全局唯一的实现方法
    SAP 电商云 Accelerator 和 Spartacus UI 的工作机制差异
    介绍一个好用的能让网页变成黑色背景的护眼 Chrome 扩展应用
    Chrome 开发者工具 performance 标签页的用法
    Client Side Cache 和 Server Side Cache 的区别
  • 原文地址:https://www.cnblogs.com/Gemgin/p/3136366.html
Copyright © 2011-2022 走看看