其实除了 firebug 之外，在其他浏览器上，也存在 Developer Tools、Dragonfly 等等开发者工具。在此简要介绍一下 Web Inspector(网页审查工具)，希望可以方便大家在多领域进行网页开发。

    开启方法：

    在支持该功能的浏览器上?hrome/Maxthon3/Safari)，点击右键，调用“审查元素”：

    点击“审查元素”开启后的界面如下：

    元素(Elements)、资源 (Resources) 、脚本 (Scripts) 、时间轴 (Timeline)

     剖析 (Profiles) 、存储 (Storage) 、控制台 (Console)：

    在工具窗口右侧，显示的是被选元素的style样式信息。

     例如我在上图中，左侧选中的是标签，这时候，就可以通过双击右侧对应该元素的style值，(拿background测试)来修改该选择器的属性值。也可以通过“勾选”的方式，取消掉body上的color值：

    当然，左侧的内容也一样可以修改的。

     修改之后的内容，会实时的显示到页面中去。

     我们可以通过该功能搞一些恶作剧。

     例如将某新闻中的人名，双击修改成朋友“大黄”的名字，再截图发到QQ群里：

资源(Resources)面板

    在这可以看到从网络上下载的所有资源。打开资源面板的时候，通常会看到如下的界面：

    由于资源跟踪会对性能产生一定影响，可以选择只对本次会话进行追踪还是对所有会话都进行资源跟踪。选择只对本次会话进行追踪(Only enable for this session)，点击启用资源追踪(Enable resource tracking)按钮，会看到如下的状态：

    这是加载此网页使用网络资源的时间表。每个水平的棒状图示代表一个资源占用网络的时间，而在每个棒状图示的左侧颜色较浅的部分代表延迟时间(Latency)，即从向服务器发出请求到服务器第一次响应之间的时长。鼠标移至棒状图示上，可看到每个部分所花销的精确时间。

     图中紫色和橙色的两条垂直线分别代表 DOMContent 加载完成和 Load 事件被触发的时间点。在了解了网页各部分加载所花费的的时间后，我们可以进行有效改进从而提高网站的效率。

    位于时间表上方的横轴，列出了可供选择的不同类型的资源，在这可以选择查看ALL所有资源，或仅查看某一类(例如Images)的资源。通过时间表下方的左侧菜单，可以按照加载时间或者文件大小，来指定排序的方式。

脚本(Scripts)面板

    下图中标注了在脚本面板里的几个主要功能。

     我们可以在右侧添加所需观察的变量(Watch Expressions)，来进行跟踪变量值的变化，也可查看堆栈调用情况及变量和函数的信息，也可以将鼠标移到感兴趣的变量名上直接查看此变量当前的值。设置断点后按 F5 刷新，页面会在执行到断点语句处停下。

时间轴(Timeline)面板

    时间轴，顾名思义就是告诉我们载入页面在哪花了多少时间。它为网页及网络应用程序做了一个详细的性能分析。从加载资源到解析 JavaScript 脚本、计算样式表及页面渲染的所有步骤，都可以在这里看到它们消耗的时间。

    首先把“黑点”，点成“红”的，然后刷新页面，可以得到如下的报表：

剖析(Profiles)面板

    剖析面板由 CPU 分析器和堆分析器组成，它能够帮助我们了解网页和网络应用程序的执行时间和内存使用情况。(maxthon将在下一版本实现这个功能)

存储 (Storage)

    通过存储面板，我们可以与 HTML 5 的数据库存储和 cookie 进行交互。可以检查当前页面打开的所有数据库的内容，也可以在这些数据库中进行 SQL 查询。

    使用介绍：

     打开 Webkit 演示页，新建三个便条。

     这样，再打开“存储面板”中的“数据库图标”，会发现此页面建立了一个名为“WebkitStickyNotes”的表，点击此表，可查看里面所有的记录。当然也可以敲sql命令SELECT * FROM WebKitStickyNotes得到同样的数值：

控制台 (Console)

    控制台可与其它面板联合使用，我们可以借助它来审查 DOM 元素、调试 JavaScript 代码、查看 HTML 解析错误等。例如我们想查找id为wrap的元素，只需要输入$(‘wrap’)，还可以通过 &0 选中最近选中的元素，$1 选中前一个选中的元素。而使用 inspect() 语句可以获得当前窗口或页面中的对象，例如输入 inspect(window.navigator.userAgent) 可获得当前浏览器信息。其他还有dir() 、dirxml() 等等各种东西，各位不妨亲自一试：

建议继续学习：

1. 代码审查清单可消除更多的bug    (阅读：2956)
2. 代码审查不是用来……    (阅读：2241)