网站前端,web前端,前端脚本,前端优化|时代前端 » 检测 http://www.52shidai.com 网站前端研究中心 Thu, 02 Feb 2012 03:36:54 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 检测CSS是否溢出的脚本 http://www.52shidai.com/javascript/688.html http://www.52shidai.com/javascript/688.html#comments Wed, 02 Mar 2011 10:33:23 +0000 admin http://www.52shidai.com/?p=688 我的理解，CSS Bug 包含：

  1. 兼容性 Bug
  2. 内容 Bug (即运营填入内容或数据库读取内容后出现的 Bug)

其中兼容性 Bug 通常在开发阶段就能解决，而内容 Bug 通常被我们忽略。比如忘记对文字设置 overflow: hidden；比如忘记对图片设置宽高；等。不知大家是否也有类似经历?

所以，为自动化这块的测试工作，我写了个 简单的脚本 ，功能有二：

  1. 文本内容 * 2
  2. 图片替换为大图

我们先拿淘宝首页开刀，看看效果。。(还是有一些可以改善的地方的)

使用很简单，在地址栏运行以下脚本即可，或者把他们加入 BookMarklet 随时运行。

  1. 文本＋图片
    2. javascript:(function(){var f=[],h=document;(function(n){var p=arguments.callee,l=n.childNodes,m=0,k=l.length;for(;m<k;m++){var o=l[m];if(o.nodeType===1){p(o)}else{if(o.nodeType===3){f.push(o)}}}})(h.body);for(var d=0;d<f.length;d++){var b=f[d],j=b.nodeValue.replace(/^\s+|\s+$/g,""),c=h.createTextNode(j);if(j!==""&&j.length!==1){b.parentNode.insertBefore(c,b)}}var g=document.images,a=0,e=g.length;for(;a<e;a++){g[a].src="http://www.yoobao.com/shoppic/2010410425118938.jpg"}})();
  2. 只文本
    3. javascript:(function(){var list=[],doc=document;(function(parent){var func=arguments.callee,nodes=parent.childNodes,i=0,len=nodes.length;for(;i<len;i++){var node=nodes[i];if(node.nodeType===1){func(node);}else if(node.nodeType===3){list.push(node);}}})(doc.body);for(var i=0;i<list.length;i++){var node=list[i],value=node.nodeValue.replace(/^\s+|\s+$/g,''),tmpNode=doc.createTextNode(value);if(value!==''&&value.length!==1){node.parentNode.insertBefore(tmpNode,node);}}})();
  3. 只图片
    4. javascript:(function(){var images=document.images,n=0,len=images.length;for(;n<len;n++){images[n].src='http://www.yoobao.com/shoppic/2010410425118938.jpg';}})();

最后，友情提示下：

此工具不可滥用，并非所有地方都要考虑溢出的扩展性。

打开一个网站，把上面的三个代码随意一个贴到地址栏里，回车 ok。

本文转自：http://www.chencheng.org/blog/archives/css-overflow-test-script.html

 

您可能感兴趣的文章

]]> http://www.52shidai.com/javascript/688.html/feed 4 Monster-Chrome浏览器的扩展插件（前端检测） http://www.52shidai.com/seo/566.html http://www.52shidai.com/seo/566.html#comments Tue, 13 Jul 2010 10:32:59 +0000 admin http://www.52shidai.com/?p=566 前端工程师的福音来了，又多了一个前端优化的好工具，怎么说这话感觉心里有种莫名的伤感，哎！前端开发者就是辛苦呀，天天要测试要分析的太多太多，要支持的要考虑的一天比一天多。

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的第一版，欢迎抓虫，如果您有更好的改进建议，请反馈给我们。

您可能感兴趣的文章

]]> http://www.52shidai.com/seo/566.html/feed 1