FireFox
FireFox 以速度,可扩展性,标准性深受广大开发人员的喜爱。FireFox 具有强大的插件机制,用户可以自己为 FireFox 增添新的功能(很多插件只需要有 JavaScript/CSS/XUL 经验即可),而 WEB 开发人员最喜爱的插件之一即为:FireBug。FireBug 是一个 FireFox 的插件,使用它,使前端开发人员丢弃了老旧的 alert,FireBug 提供一个控制台,开发人 员可以直接像在 windows 的控制台那样,通过简单的命令来查看变量的值,状态等。 作为一个调试工具,FireBug 提供如其他 IDE 中那样的基本功能,断点,步进,watch 等等功能,下面我们来详细介绍 FireBug:
通过在提示符”>>>”之后键入 JavaScript 代码即可执行这些代码,由图可见 FireBug 有 6 个标签:控制台,HTML 查看器,CSS 查看器,脚本查看器,DOM 查看器,以及网络性能监控。
图 HTML 查看器标签
在 FireBug 处于“查看”状态时,通过鼠标在页面上移动,页面的一部分区域会高亮,点击此高亮区域即进入查看状态,注意此时 FireBug 的 HTML 查看窗口中的内容:它会高亮显示当前选中区域的 HTML 代码,而且你可以动态的编辑这些标签的属性和样式,对于 页面大小,风格的微调十分有用。
图 FireBug DOM 查看器
通过 DOM 查看器,我们可以清晰的看到页面中所有 JavaScirpt 对象,而且是以树的形式,可以逐层点开,查看详情,这对于调试页面非常有用。
图 FireBug 的调试界面
通过使用 FireBug,我们就可以丢弃 alert 方式的调试了,FireBug 的调试与其他的 IDE 的使用非常类似,通过在代码左侧的行号旁边单击打断点,然后刷新页面进入调试环境,可以单步执行,直接返回等。右侧的面板上包含 watch,栈情况,以及关于所有断点的信息,调试起来非常方便。
FireBug 的控制台中常用的一些命令: 记录日志,一般用于调试时将 JavaScript 字符串打印出来:
console.log(object[, object, ...])
打印消息,用于调试,
console.info(obj)
用于打印一个对象,将JavaScript对象的各个属性树以直观的形式展现。
console.dir(obj)
console.trace()
{$ activeFileHint $}