标签归档:firebug

Internet Explorer Developer Toolbar

下载地址:Internet Explorer Developer Toolbar

IE Developer Toolbar特性如下:
-浏览和修改Web页的文档对象模型(DOM).
-通过多种技术方式定位、选定Web页上的特定元素.
-禁止或激活IE设置.
-查看HTML对象的类名、ID,以及类似链接路径、tab顺序、快捷键等细节.
-描绘表格、单元格、图片或选定标签的轮廓.
-显示图片象素、大小、路径、替代文字等.
-即时重定义浏览器窗口大小到800×600或自定义大小.
-清空浏览器缓存和cookie,被清除项可从所有对象或给定域中选择.
-直接访问关联W3C规范参考、IE开发组blog或其他来源.
-显示设计时标尺,帮助对齐对象.

IE下的类似Firebug的工具,“View Elements Source with Style”的功能不错,添加本地属性的操作比Firebug方便。
另外还有很多功能,说它是 Firebug + Web Developer 可能更形象。
有个缺点是不能显示页面内文件的载入时间等信息,刚装上,用的时间还不长,等待继续研究。

ps:刚才点击Firebug的DOM功能时导致Firefox崩溃了,还好Wordpress有自动保存草稿的功能。

Firebug

为什么我今天才知道这个插件……
相见恨晚啊

安装地址:http://www.getfirebug.com/
如果想在firefox以外使用:http://www.getfirebug.com/lite.html

主要功能简介:
1、Inspect and edit HTML

Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

可以用鼠标选择element并高亮显示出相应的代码,然后可以编辑代码并实时看到效果

2、Tweak CSS to perfection

Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.

自动完成功能相当强大。还有一个不错的功能是提示哪些语句没有发生作用(多余的、被废弃),例如我们单位系统找人做的页面,css重复定义特别多。如果想调整样式,还可以点击每一行左边的小图标临时禁止该项。
css.jpg

3、Visualize CSS metrics

When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

可视化的调节页面边距等样式
可视化调节CSS

如果Inspect选择了element,还可以显示标尺
页面标尺

4、Monitor network activity

Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner’s servers taking a siesta? Firebug breaks it all down for you file-by-file.

可以查看页面以及页面内所有文件的载入速度,从而进行相应的优化
页面载入时间

5、Debug and profile JavaScript

Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.

debug javascript,我最需要的功能,想了很久了,这个插件很方便的实现了,而不用安装别的一些庞然大物。
断点执行断点执行

6、Quickly find errors

When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.

7、Explore the DOM

The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol’ fashioned command line for JavaScript complete with very modern amenities.

8、Logging for JavaScript

Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.