iOS中web app调试(mac)

原文

iOS中web app调试(mac).md

目录

• 一、真机联调配置
• 二、mac上Safari配置及真机联调
• 三、iOS模拟器使用
• 四、在iOS模拟器中安装app

近期公司vue项目开发，目的是一次开发，多平台发布，其中就包含了app，app采用离线web方案，将vue打包后的js bundle文件、静态资源文件打包进app中，为提高性能、优化体验，app也通过jsbridge，暴露原生接口给web调用。

为此，web app开发时可以使用chrome等pc模拟器进行调试，但是涉及app适配，特别是原生接口调试时，就比较麻烦，必须要依赖于真机，这样那是不是有方法进行真机联调呢？

iphone连接mac，通过mac下safari就可以很方便对真机safari、app中webview进行联调。

一、真机联调配置

iphone上设置：safari设置->高级（最下面）->如上图打开Web检查器和JavaScript。

通过数据线连接mac，或者也可以手机或mac间共享热点（不需要数据线挺方便的）。

二、mac上Safari配置及真机联调

mac上配置下safari，在菜单栏显示“开发”菜单，设置好这些，将光标移动到safari的“开发”菜单项，此时就可以看到iphone上正打开的web（app webview也一样），如下图，点击任一项即可进入调试，调试方式跟平台web调试无差。

三、iOS模拟器使用

以上方式不仅适用于真机，也可用于mac模拟器，为什么有真机联调，我还要用模拟器呢？

最近试验性选用weex开发（weex是阿里推出的，基于vue的前端框架，目的是通过一次开发，同时构建web、android和ios应用，实现跨平台开发），确实有点大胆，直接用当前业务来试错，将在微信、app、m网站上线。

weex的坑基本填完了，回到模拟器使用，weex不支持打包-webkit-的部分属性，在ios8上发现了该问题。手里没有ios8的操作系统，这里用模拟器就很方便。

默认mac已经安装了xcode，通过Alfred输入sim即可快速找到ios模拟器(Simulator.app)。

通过Hardware->Device即可管理使用对应的ios版本。接下来，回到第二步即可进行模拟器联调。

四、在iOS模拟器中安装app

除了通过模拟器调试web，我们也可以安装app，进行app webview，调试，iOS模拟器安装app与真机安装不同，模拟器只能安装基于源代码打包出来的app bundle（找ios开发要）。

// 通过xcode提供的simctl命令进行安装
/Applications/Xcode.app/Contents/Developer/usr/bin/simctl install booted EgretFly_InHouse.app