iOS之Safari调试webView/H5页面

以前作过混合开发，用的是JavaScriptCore+OC+UIWebView。

Safari调试功能真的颇有用，经过它能够轻松定位问题的所在，下面说说怎么调试.

开启Safari开发菜单

在Mac的Safari偏好设置中，开启开发菜单。具体步骤为：Safari -> 偏好设置… -> 高级 -> 勾选在菜单栏显示“开发”菜单。

 

 

iPhone开启Web检查器

具体步骤为：设置 -> Safari -> 高级 -> Web 检查器。

 

 

运行App

打开项目，Cmd + R 运行，打开想调试的Web页面。

 

 

调试对应的页面

打开Safari -> 开发 -> 设备 -> URL。

 

选中的页面会变成蓝色，点击而后打开了以下的界面。

 

这个页面就很像Windows 平台Chrome的F12。能够打断点：

 

查看断点

 

 

查看Cookie

 

打印Cookie或者元素

 

 

好比在这里Alert页面的title，输入 alert(document.title);，你会在模拟器中看到弹窗

 

 

总体十分有用，操做的体验跟Xcode很像，小伙伴们自行探索。

 

好比新作的h5页面中，有一个分享按钮，点击调用原生的分享，可是发现，点击以后没有反应了，什么问题呢？是Native端实现有问题，仍是前端写的有问题呢？如图

 

咱们来帮忙看下吧，打开Safari Web 检查器，定位到资源，而且在share方法中添加断点，如图

 

会发现，并无断住，而是页面直接报错了，仔细查看错误描述，share方法里多了一个“/”，所以报错了。当我点击分享按钮时

 

 

会发现，提示找不到变量share。这里我须要说明一下：

当js中报错的时候，报错位置所在的函数以及报错位置以后的代码，都不会执行，因此我点击分享时，提示的是找不到方法，由于js的语法不对，报错了，这里解析不出来，因此也就没有了share、testAddMethod和以后的函数。

那么当我点击分享下面的按钮是，调用share下面定义的方法也就会提示找不到对应的函数了。

 

 

至此，问题找到了，只要告以前端开发人员便可，让他修复便可。

实际遇到的问题可能要复杂的多，能够经过断点，以及控制台打印一些js变量的值，DOM操做来寻找问题，解决问题。但愿能够帮助到小伙伴们。