网页审查工具介绍

标签： 前端开发 开发工具 | 发表时间：2011-04-04 22:04 | 作者：崔凯溪梦

出处：http://uicss.cn

其实除了 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() 等等各种东西，各位不妨亲自一试：

网页审查工具介绍

- 溪梦 - 崔凯,前端开发

其实除了 firebug 之外，在其他浏览器上，也存在 Developer Tools、Dragonfly 等等开发者工具. 在此简要介绍一下 Web Inspector（网页审查工具），希望可以方便大家在多领域进行网页开发. 在支持该功能的浏览器上（Chrome/Maxthon3/Safari），点击右键，调用“审查元素”：.

网页抓取工具

- - Web前端 - ITeye博客

Webdup能够把您想要浏览的信息(如网页和图片等)预先下载下来，保存在本地硬盘，使您可以从本地进行离线浏览，这样不仅可以大大减少上网时间，降低上网费用，还可以加快浏览速度；并且将来无须上网就可以很方便地查阅这些信息. 不仅如此, Webdup更提供了备份历次下载记录和比较完善的管理功能，使您能够方便地分类保存和管理有价值的下载信息.

Kraken.io：网页优化最佳工具

- - TechWeb 新酷网站 RSS阅读

　　Kraken Web Optimizer 是一个集图片压缩、ICO图片格式转换、JavaScript 检查等功能于一体的在线网页优化工具. 如果你想优化网站速度、加快网站的开启速度或是减少浏览浪费的话，把图片压缩一下就是会个不错的方法，可达到立竿见影的效果. 倘若网站使用了不JavaScript、CSS 或 HTML，Kraken.io 也能针对这些程序代码进行优化.

网页正文抽取工具

- - 丕子

PS：你知道weibo问答的力量有多么的强大了吧. @丕子:有个测试链接： http://jimplush.com/blog/goose 测试了个链接，goose没提出来，cx-ectractor提出来了；不过goose的metadata以及image等不错；谁有空写个吧，两者优点结合一下. @52nlp: 转cx-ectractor( http://t.cn/hDO2xf )的维护者 @陈鑫Shin @王利锋Fandy // @陈阿荣: cx-extractor // @马少平THU: 这个确实有难度，我们也没有什么好方法.