移动端以及微信调试

一、常规调试

日常开发中，使用最多的调试工具就是chrome的devtool，能解决开发过程中的绝大多数问题，但是也仅限于开发阶段常规的调试。

1. Network 调试请求面板

1）filter工具
过滤请求：查看特定域名下的请求：domain:xxx

filter.gif

2）preserve log
保留日志

3）disable catch
当浏览器有缓存时，可以通过勾选此选项，避免缓存的影响。

4）respons-header
调试缓存的时候，可通过respons-header菜单设置以下：

respon-header.png

5）对请求的处理
再次请求，或者copy请求的一些信息

xhr.gif

2. Sources 源码面板

ctrl + p 查找源码
通常在开发、测试环境，通过设置webpack的sourcemap模式，可以展示源码用于调试。
在生产环境，要设置成none。

打断点

3. Application 面板

cookies、localStorage等缓存信息，都可以看到，这里可以清除这些缓存信息。

二、调试利器

chrome 终究是在电脑上面模拟手机，和真机运行还是有差异的，下面介绍一些在真机调试时用到的一些工具：

浏览器远程调试
chrome + android 调试麻烦
safari + ios 调试麻烦

weinre 调试麻烦
使用方法：http://www.cnblogs.com/xiaofeixiang/p/4993812.html

集成console
eruda 推荐
使用方法：https://github.com/liriliri/eruda

vconsole 推荐，相比于eruda ，没有样式查看功能
使用方法： https://github.com/Tencent/vConsole

三、微信jssdk 本地调试

微信需要正式的域名才可以完成 jssdk 的初始配置，当线上发生某个问题时，在本地无法复现，但是改一次代码，上传到测试环境看，又太麻烦，所以找到一种本地调试jssdk的方法：

使用charlse进行代理，当访问测试环境的url时，代理到本地开发启动的localhost上，即可在真机上测试jssdk。

四、pc版微信的缺陷

测试就喜欢用pc版微信，没办法，遇到坑记录下来。

1. jssdk 相关

1.）定位
getLocation 无法在pc版微信中定位(可运行官方demo验证)。

2. 语法问题
   不支持 ES6 的 includes 方法。

五、微信兼容性

1. 光标问题
   参考本人另外一篇文章：input 清除按钮点击无效

2. jssdk配置

SPA 路由模式对jssdk config的影响
android和ios差异详解： https://github.com/yongheng2016/blog/issues/78

url的查询字符串中有中文需要encodeURIComponent转义

转义.png