Monster for Chrome

Monster是Alipay UED推出的网站代码分析、质量检测及评分的浏览器扩展,它能智能分析CSS、JS、HTML内容并生动形象展示网页得分情况(类似YSlow)。它是一个开源项目,您可以在GoogleCode中心检出MonsterForChrome项目源代码。不久会推出Firefox版扩展。

下载及演示

Monster主要检测规则:

  1. 检测是否有重复ID的标签;
  2. 检测是否使用内联标签嵌套块级标签,如a嵌套div;
  3. 检测https协议页面,是否使用了http协议的图片、JS、CSS等;
  4. 检测compatMode、doctype是否出错;
  5. 检测是否使用了HTML5不再支持的标记,如font,s,u等;
  6. 检测标签是否正确关闭;
  7. 检测CSS、JS、background-image文件是否为404;
  8. 检测CSS、JS文件是否重复调用;
  9. 检测是否引用过多外部JS、CSS文件;
  10. 检测CSS、JS、HTML是否压缩;
  11. 检测CSS样式表是否使用了CSS expression;
  12. 检测Cookie是否超过30KB;
  13. 检测是否有form标签嵌套form标签;
  14. 检测是否直接在标签里定义JS事件,如<a href=”#” onclick=”…”>link</a>;
  15. 检测<meta charset=”utf-8″ />是否为<head>第一个子标签;
  16. 检测一个<form>标签内部是否出现二个input[type=submit]标签;
  17. 检测是否在<form>标签中使用了 id=”submit” 的标签;
  18. 检测是否将<style>块放置在</head>前面;
  19. 检测是否将<script>块放置在</body>前面;
  20. 检测<img>标签是否指定alt属性;
  21. 检测是否为input[text]指定label;
  22. 检测网页编码是否为gbk或utf-8;
  23. 检测是否使用了@import导入样式表;
  24. 如果CSS、JS指定 类似于“?t=20100405”时间戳,则自动输出最后修改时间,方便对比;
  25. 如果background-image超过6个,则提示所有背景图片及大小,超过30KB,标红显示;

Monster评分规则:

Monster是根据问题解决难易程度、性能提升程度、可用性提升程度以及维护性提升程度来综合评分的。具体,请下载 Monster评分算法.xls

这是Monster的第一版,欢迎抓虫,如果您有更好的改进建议,请反馈给我们。

43 continue reading

Firebug调试经验与技巧

不了解的同学先“点这里”看看什么是Firebug。简单来说,Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DOM和JavaScript的扩展工具。

我们先到Firebug的主页上下载最新的版本装上,下面开始调试:

1、查看、编辑HTML元素及其CSS

安装好Firebug之后,你可以通过点击浏览器右下方的小虫子打开Firebug,如图:

或者直接按F12,如果要以窗口形式打开的话,就按下CTRL+F12

打开Firebug之后,点击“查看”,然后选择页面上任何需要编辑的地方,Firebug会将其选中,并且在HTML结构中将其高亮,如图:

之后你可以对该元素的HTML结构、属性进行任意的编辑,修改后的效果都会实时的展现在页面当中。

同时在Firebug的右侧是该元素对应的CSS样式,如下图:

..

9 continue reading