网页审查工具介绍
其实除了 firebug 之外，在其他浏览器上，也存在 Developer Tools、Dragonfly 等等开发者工具。在此简要介绍一下 Web Inspector（网页审查工具），希望可以方便大家在多领域进行网页开发。
开启方法：
在支持该功能的浏览器上（Chrome/Maxthon3/Safari），点击右键，调用“审查元素”：
点击“审查元素”开启后的界面如下：
元素（Elements）、资源 (Resources) 、脚本 (Scripts) 、时间轴 (Timeline)
剖析 (Profiles) 、存储 (Storage) 、控制台 (Console)：
在工具窗口右侧，显示的是被选元素的style样式信息。
例如我在上图中，左侧选中的是<body>标签，这时候，就可以通过双击右侧对应该元素的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将在下一版本实现这个功能）
- CPU 分析器显示的是 JavaScript 脚本里的每个函数分别占用了多少执行时间
- 堆分析器显示每个 JavaScript 对象所使用的内存大小
存储 (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() 等等各种东西，各位不妨亲自一试：
04/04/2011 at 22:07
firefox的firebug和chrome的审查元素都是我的最爱，各有优点
回复
04/04/2011 at 22:54
原来M3也有这个功能
回复
四月 5th, 2011 at 0:04
因为他用的是webkit的内核
04/05/2011 at 9:28
chrome上的“审查元素”这个功能确实不错。比直接查看源文件清晰多了。
回复
04/05/2011 at 21:05
学习了，貌似在chrome 10下的inspect element与M3又有些更新了
回复
四月 5th, 2011 at 21:53
chrome下的审计（Audits）功能可以给出关于网络利用及性能优化方面的建议，相当有价值。
04/05/2011 at 21:05
我用的是谷歌的
回复
04/05/2011 at 23:49
chrome的审查我觉得还可以 。
回复
04/06/2011 at 12:20
终于也有这个功能了. 威武威武. 这回可以用的舒坦了~
回复
04/06/2011 at 13:42
马桶3，挺不错的~~
回复
04/06/2011 at 21:05
很不错的教程。。
回复
04/08/2011 at 9:49
过来学习
回复
04/08/2011 at 15:09
再看一遍，又有新的收获，，
回复
04/08/2011 at 17:53
这个功能经常用，很熟练！！
回复
04/09/2011 at 21:17
话说遨游3双内核模式做的挺不错
回复
04/10/2011 at 20:52
mx就是强大哦
回复
04/11/2011 at 11:34
图文并茂，借鉴了
回复
04/12/2011 at 19:38
审查元素这个的确方便了许多
回复
04/13/2011 at 8:38
用过，但没这么细的用过 谢谢啊
回复
04/13/2011 at 12:54
问题是这个是英文的，看不懂！
回复
04/13/2011 at 13:28
好强大。过来学习！
回复
04/14/2011 at 13:34
firebug一直用着，还有你放上去的图片贼清晰，我每次放上去的很小
回复
04/15/2011 at 1:06
我们可以通过该功能搞一些恶作剧。
例如将某新闻中的人名，双击修改成朋友“大黄”的名字，再截图发到QQ群里。
—————
-________-! 这个好玩~
回复
04/17/2011 at 9:24
遨游如此给力
回复
04/20/2011 at 16:11
啊哈 自从接触互联网行业 了解得越来越多 我也是用这种爬虫工具查看元素 再改自己的博客模板 很好用的~
ps 给你发邮件了 期待回复~
回复
05/25/2011 at 19:28
很受用啊。。。
Web Inspector
我来围观了。。。
回复
05/25/2011 at 20:11
凯哥。你出个Web Inspector安装教程吧。。我整了个把小时，愣是没安上。
回复
五月 27th, 2011 at 18:12
浏览器自带的啊