用Firefox进行Web开发

Firefox的最新功能

本人所使用的Firefox版本是11。这个版本默认带了很多好的工具来支持Web开发。

Shift+F4 运行 javascript 乱写板，在里面可以任意测试 javascript
Ctrl+Shift+J 打开错误日志，可以查看当前页面有哪些 javascript 错误
Ctrl+Shift+K 打开控制台，在控制台可以通过 javascript 与页面内容交互
Ctrl+Shift+I 打开页面元素查看器，可以查看页面的元素，**支持 3D 模式**

有了这些利器，开发Web就容易多了。Firefox 可以说是给Web开发人员提供了很大的便利。以下详细介绍每个工具的使用。

乱写板(Shift+F4)

通过乱写板可以写入 javascript 代码，并执行代码，以查看代码运行的结果是否符合预期。

运行模式(Ctrl+R)

该模式可用于在控制台查看运行代码的变量。

如上例所示，在写一段 javascript 代码时，可以通过 console 对象的 log 方法将内容打印到控制台里面去。

在运行模式中，如果要在控制台中打印数据，则需要先打开控制台(Ctrl+Shift+K)。

检查模式(Ctrl+I)

在经过了一系列操作之后，要查看某个容器中的对象（容器）是否发生改变，就可以通过检查模式来做到这一点。Firefox 带有一个对象（容器）查看器。

由上图可以看到一种隐藏私有变量的面向对象的实现。

求值模式(Ctrl+L)

如果只需要简单地得到一段代码运行之后的值，可以使用求值模式。选定一段代码运行之后，将会在代码之后直接显示当前一条表达式的值。

可以利用求值模式得到选定的代码最后一条语句的值。这在简单找一段代码的错误时很有用。

错误日志(Ctrl+Shift+J)

错误日志可以用于查看一个网站的 javascript 是否在运行时出错。

通过错误日志来调试 javascript 代码。特别是要调试的代码并不是自己所写。如，其它网站的代码。

控制台(Ctrl+Shift+K)

通过控制台可以查看在 javascript 运行过程中的所有日志。并且可以查看指定的对象（容器）的内部结构是什么样的。

如，打开google地图，可以查看到在浏览器容器(this)中创建了很多属性。

通过控制台也可以直接使用 javascript 来控制 HTML 元素。

var a = document.createElement('div');
a.appendChild(document.createTextNode('Hello'));
document.body.appendChild(a);

通过以上 javascript 就可以在页面中添加一个 DIV，DIV 中包含着 Hello 这样的字符。

页面元素查看器(Ctrl+Shift+I)

通过页面元素查看器，可以查看到页面中包含的元素及元素中的内容。

部分支持 3D 硬件加速的机器可以通过 3D 模式来查看浏览器元素。

结语

HTML 是直接面对用户体验的接口，为了做好这样的一个接口，HTML 自身发展到 HTML 5 规范。让所有的浏览器支持更强大的用户体验。正因为这样，为了开发出良好的用户接口，各种浏览器都推出了方便开发人员进行开发的工具。有了工具，那就不要等了，用吧。