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 规范。让所有的浏览器支持更强大的用户体验。正因为这样,为了开发出良好的用户接口,各种浏览器都推出了方便开发人员进行开发的工具。有了工具,那就不要等了,用吧。