Firefox - IE Developer Toolbar
在 Firefox （及其各种 extension） 的众多 feature 里，我最喜欢的是 DOM inspector 和 Web Developer toolbar，这两样东西加起来，对修改网页（对我来说主要是 WordPress 主题）极为有用。如果回头看的话，简直不敢想象 Firefox 流行之前的日子－－比如在 BlogBus 时修改主题的经历，简直就像是只能用 printf() 或者根据 core dump 调程序一样，真佩服死自己。
不过今儿要说的不光是 Firefox 一家，IE 最近更新了 IE Developer Toolbar 。这是 PDC 2005 以来，IEDT 的第一个正式发布。
IE 在标准支持和安全性上受人口水最多，在鼓励和支持 Web 开发上也没什么非常值得说起的举动（不过 script debugger 真的很有特色），所以这次 IEDT 发布挺有别样意义。自己用了用，觉得可以聊聊。这儿把两个工具放到一块不是为了比个高下，而是或许你也能发现他们可以互为补充，对自己有用。
DOM inspector 是 Firefox 的一部分，Web DT 是 extension，IEDT 则一人兼有两者的功能。
共有的功能有不少，比如 DOM 显示，ruler，点击 element 查看代码等等。类似功能的实现风格可能不同，比如 点击 element 查看代码这个功能（在 Web DT 的 CSS->View CSS Information 里，IEDT 是最左边的 Select Element by Click 按钮），Web DT 显示所有相关 CSS 定义，当然就包括继承的，有效的无效的，override 的，而 IEDT 显示最终有效定义。风格不同，各自有用。
Firefox 的有些功能，比如 View CSS 简直让人爱不释手，IEDT 缺少对应项。
因为 Web DT 功能特强（貌似很多我这儿都用不上），加之好钢更要用重锤的理念，这就列列 Firefox 弱而 IEDT 强的地方：
1。在 DOM inspector 里，点击 element，页面上对应的区域会有红框闪烁，很明了地显示对应区域，这个功能设计得不错，可是实现得不到位。举例说，wordpress 的 sidebar，通常在垂直方向都很长，其底端要向下翻 N 页才能看到。拉滚动条下去了，再点 sidebar element 想让其闪闪底端，页面会自动滚到sidebar 的顶端，这样永远都只能看到一个 element 对应区域的起始地方，不胜其烦。除非手快，趁其闪烁的时候狂滚滚轮向下走，否则绝无机会看到底端在哪里。
在 IEDT 里，可以将页面拉到任意位置，点击任意 element，如果此 element 不在目前可见区域内，会自动滚屏到达；如果对应区域任意部分在屏幕上，不会乱翻页，这样可以方便地观察此 element 的边角，实际上，IEDT 会一直用蓝框表示显示范围，不像 Firefox 闪烁片刻即罢，所以可安心观察无妨。
2。IEDT 可以 dock，窗口独立可停靠，Web DT 则只能在 Firefox 内上下左右定位，不够灵活。
3。DOM inspector 开启的时候在 Firefox 里刷新页面，DOM inspector 上点击 element 就不管用了，必需把 DOM inspector 关掉再打开才行，很烦，而 IEDT 会在页面刷新的时候自动更新，甚至还有个 refresh 按钮，非常方便。
4。IEDT 在 View 菜单里有个 CSS Selector Matches 可以查看 CSS 的定义的使用次数。
5。IEDT 的 Find->Find Element 很方便。
6。IEDT 的 color picker。
N。有些时候，IE 就是恶心地显示不对，而 Firefox 就是没问题，那就只有看 IEDT 了 :-)
[tags]ie, firefox, html, css, toolbar[/tags]
Leave a Reply
如果您没注册 Gravatar 的服务，这里会随机选择一张 Flickr 或者 JPG Magazine 的照片作为您的头像哟~~ 已注册了 Gravatar？那自然，您的头像正常显示。A random picture from Flickr or JPG Magazine will be used as your avatar if you haven't registered Gravatar or use a fake email.