手机调试js技巧，让你爱上Bug

趁着空闲实现总结下在商城模块下面使用的原生和html之间的通信遇到的问题，以及js调试报错这一块，主要针对iOS，小编Android技能还是有限，所以只能下次更新喽，期待与你们相遇。

先介绍下公司的项目吧
公司的项目是个，以旧换新的购物回收的项目，主要功能是两块：
1.旧货回收，抵扣G币（虚拟币）
2.商城模块，京东发货，价格抵扣G币。

其实公司项目没什么新颖之处，就是回收旧货，以旧换新，好点的衣服、书籍等会捐出去，算了不扯这些了，和咱们的技术没什么关系，我们还是聊下技术吧，现在公司有专一的网站，也同样有手机站，App等。因为App的更新是需要审核的，而公司的活动是多变，只能使用了Native+html结合来写活动页面，但是同一个后台去兼容iOS，Android、手机站三个板块，后台写的js的调试就是哥比较单单的忧伤了。特变是手机站要兼容两个手机系统ios 和Android。

何为手机站##

个人理解：就是使用了手机加载网页。公司使用的是微信微站一类的。利用微信公众号，进入网页。（目前还没开发小程序，正在准备）

iPhone手机调试js##

大家都知道，网页上面的展示效果、动画等，都是需要用的js来实现的，但是我们把网页运行都爱浏览器的时候，并不能看到debug和断点模式，调试起来就有点淡淡的忧伤了,现在我来教大家来实现html加载浏览器的时候，可是使用debug和断点模式.

准备材料：MacBook Pro 电脑一个，iPhone 手机一部

1.首先打开手机的开发着模式，只要手机连接到Pro上面以后，开发模式就会显示出来。（一般的情况是不显示的，插进电脑后，就会显示）

image

2.再打开Safari浏览器，打开Safair的开发模式

image

image

image

image

3，在手机上使用Safair浏览器打开你想调试的html页面（小编大家的是我们手机站首页）

image

4.打开pro上面Safair浏览器的的开发模式

image

5，这个时候在你电脑上面就会出现一个弹框

image

解释下什么意思：
1.当前手机Safair浏览器显示的页面的所有内容标签写法.
2.当前页面需要下载的js和css所有的文件。
3.监听你每次请求的时间，完成情况等。
4.请求所耗的时间。
5.调试器，就是我们的重点。可以打断点。（下面详解）
6.储存空间，当前浏览器下面是否时有数据库储存。
7.控制台，就是debug模式，打印的东西，错误信息。
8.全站搜索。
9.错误,必须解决的就是加载当前页面锁出现的错误。（小遍的全部是超时）
10.警告,不解决也没事，你懂的。

调试器界面

image

控制器界面

image

储存空间

image

网络界面

image

以上的就是小编使用iPhone调试js的使用心得，希望可以帮助到你。

2.手机站调试##

因为手机站是使用微信内置浏览器打开的html。所以调试起来就比较麻烦，有的明明在Safair上面可以完全使用，但是就是在微信里面打开会报错，这就有淡淡的忧伤了，其实就是微信那些孩子改了些东西，没办法，那也得调试，不然饭都没得吃。幸好微信前段时间出了开发小程序的开发工具，同样也是微信浏览器的测试工具。
没错，就是玩意儿，刚开始还不让玩只能破解版，但是现在好了，随便可以下载了。