网页审查工具介绍

标签: 前端开发 开发工具 | 发表时间: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: 这个确实有难度,我们也没有什么好方法.

网页设计师的新宠,可以触摸的网页原型工具

- 蕗 - 互联网的那点事
电子书再好,还是有很多人喜欢纸质的书本,喜欢那份书香和质感. 很多设计师也一样,他们喜欢可以触摸得到的设计工具. 譬如下面这款用于网页原型设计的草稿本:. 它如同那些可视化的原型设计软件一样,常用元素都给你准备好了,信手拈来,任你摆放. 不同的是,这可是真正的信手拈来. 搭起一个实体的感觉,是对着屏幕画个界面所难以比拟的,这就是所谓的存在感吧.

网页完美保存工具:SaveAs Plus绿色版

- gloomy - 精品绿色便携软件
SaveAs Plus也是为唐失惊绿化的一个免费小软件,由WizBrother开发,是一个浏览器网页保存增强软件,有极好的网页保存效果. 浏览器提供的网页另存功能有诸多不足,如对特定页面不兼容、丢失HTML和DOM对象等,SaveAs Plus旨在弥补浏览器保存网页的缺陷,通过内置MIME优化引擎,达到完整保存的效果,真正的所见即所得,完美解决脱机保存网页.

Google发布Chrome网页安全检测工具DOM Snitch

- zou guangxian - 36氪
Google今天发布了一个名为DOM Snitch的开源工具,可以帮你找出网站上的恶意软件. 这个工具是一个Chrome扩展,可以检查网站的代码执行情况,看是否有命令可以导致跨站脚本和其他通过网页浏览器发起的攻击行为. Google表示DOM Snitch可以帮助开发者和测试人员发现潜藏在客户端代码里的非安全惯例.

Adobe 发布 HTML5 网页动画工具 Adobe Edge

- Joji - ITeye资讯频道
    Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具Adobe Edge,允许设计师通过HTML5、CSS和JavaScript制作网页动画,无需Flash.     Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.

Adobe发布HTML5网页动画工具{Adobe Edge}

- Zen - 36氪
Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具{Adobe Edge},允许设计师通过HTML5、CSS和JavaScript制作网页动画. Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.