web开发工具

chrome开发工具

做web开发，基本都会接触到chrome开发工具，打开chrome浏览器，按F12即可见到。这里我将开发过程中，最常用到的功能列举出来，具体怎么使用可自行百度。

1. 查看样式、修改样式
2. 代码调试
3. 手机、平板模拟
4. 控制台运行js命令
5. storage的查看（如cookie、localstorage）
6. 网络请求查看【前后台联调、定位问题时用到】
7. 网速模拟【加载特效开发、性能调优时会用到】
8. chrome远程调试【混合app开发会用到】

分辨率测试

响应式布局这几年应用的越来越广泛，一个页面需要在不同终端、不同分辨率的设备上，都有较好的用户体验。所以作为兼容性测试的一部分，分辨率测试越来越重要。在实际开发过程中，我将分辨率测试分为三个小的阶段，具体如下。

1. 准备阶段：明确测试目标
   简单说就是测试哪些分辨率，这个是要用数据说话的，参考百度分辨率使用情况统计，根据项目规模，选取主流分辨率进行测试。
   

2. 开发阶段：分辨率模拟
   也就是在页面的合成阶段，合成好一个页面后，需要看效果，这时候使用什么工具效率最高呢？

   chrome开发工具的模拟器
   缺点是不能同时对多个分辨率下的效果进行查看

   responsive-design-bookmarklet-generator
   这个工具是github上的一个开源项目https://github.com/benkeen/responsive-design-bookmarklet-generator，懒得部署的朋友可以直接访问我部署好的在线工具，此工具可以同时查看多个分辨率下的效果，缺点是没法模拟人手滑动（手机端开发需求）。实际项目中两个工具可以结合使用。

3. 测试阶段：真机测试
   真机测试发现是分辨率问题时，最高效的做法是，告诉程序员哪个分辨率下有问题。这时需要一个工具来显示当前设备的分辨率。推荐https://quirksmode.org/m/tests/widthtest_vpdevice.html，也可以直接扫描下方二维码。同时此工具还可以显示移动设备的dpr。
   

其他小工具

二维码生成/解码
http://tool.oschina.net/qr
Html5检测
http://html5test.com/
图片压缩【图片较少时使用】
https://tinypng.com/
屏幕取色工具
https://colorpix.en.softonic.com/
在线正则测试
http://tool.oschina.net/regex
在线加解密
http://tool.oschina.net/encrypt