最前端

我的工作,我的生活,点点滴滴...

关于‘ 工具技巧 ’ 目录的归档

web前端工具

测试阶段,欢迎反馈意见及建议。

web前端工具,目前包括的功能有:脚本注入(JS Inject), JSON格式化(JSON Format)目前使用扩展jsonview的代码, 外引CSS重载(CSS Reload), 功能禁用(Disable), 页面检查(Check), HTML元素检查(HTML Inspect), 二维码生成(QR Code),和 映射(Auto Response)等。

  1. 脚本注入(JS Inject)

    可在页面注入远程脚本。

    inject

  2. JSON格式化(JSON Format)

    JSON数据格式化,亦可在页面加载时格式化页面的JSON数据。

    format

  3. 外引CSS重载(CSS Reload)

    可使用F9快捷键或点击按钮重新加载外引的CSS样式文件。

    reload

  4. 功能禁用(Disable)

    可禁用浏览器的javascript,cookie,弹出页面,flash等功能。

    disable

  5. 页面检查(Check)

    可检查链接的有效性及是否有id重复等。

    check

  6. HTML元素检查(HTML Inspect)

    可自定义检查元素的各种属性,避免在Styles选项卡中滚动查找。

    inspect1

    inspect2

  7. 二维码生成(QR Code)

    可为每个页面生成对应的二维码,如避免在手机上面输入链接地址查看页面。

    qrcode

  8. 映射(Auto Response)

    可把任何请求映射到另外一个文件上,甚至本地文件(需要在chrome://extensions/页上启用“允许访问文件网址”的选项)。

    response

占窝猫咪

很有爱的占位图,占窝猫咪,http://placekitten.com/720/360 就是一张好720*360的猫咪图片,简单有趣创意,做占位图片很方便。

placekitten

类似的站点还有:

fpoimg,如:http://fpoimg.com/720×100?text=fpoimg&bg_color=97aed8&text_color=ffffff
fpoimg

lorempixel,可生成随机的某类型的固定大小图片,如:http://lorempixel.com/720/500/city/720-500/
lorempixel

fakeimg,如:http://fakeimg.pl/720×100/97aed8/ffffff/?text=720-100&font=lobster
fakeimg

巧用“代理自动配置脚本”进行测试

使用代理自动配置脚本,一改全改,避免频繁修改hosts,避免频繁部署到测试机,避免同时修改多台设备。

  1. 新建proxy.pac [1]文件,如把dc.sina.com.cn的请求代理到本机上(10.218.36.131),则填入如下内容:

    function FindProxyForURL(url, host) {
    	if (shExpMatch(url, "*dc.sina.com.cn/*")) {
    		return "PROXY 10.218.36.131";
    	}
    	return "DIRECT";
    }
  2. 把proxy.pac上传到一个固定的地址上,如http://bq69.com/xxx/xxx/proxy.pac,然后把该地址填写各测试设备的http 自动代理上。

参考资料