zoukankan      html  css  js  c++  java
  • iOS中web app调试(mac)

    原文

    iOS中web app调试(mac).md

    利用mac safari进行移动端web调试

    近期公司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配置

    iphone上设置:safari设置->高级(最下面)->如上图打开Web检查器和JavaScript。

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

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

    safari设置

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

    真机调试

    三、iOS模拟器使用

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

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

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

    Simulator.app

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

    Simulator使用

    通过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
  • 相关阅读:
    docker部署spring boot并接入skywalking【探索篇】
    转载:如何处理一个CVE漏洞?
    转载:JavaScript利器分享之Proj4js
    转载:geoserver 2.18.0 跨域配置
    转载:如何实现OSM地图本地发布并自定义配图
    wsl2搭建ElasticSearch集群
    测试方法
    测试用例
    软件测试分类
    前端html
  • 原文地址:https://www.cnblogs.com/xiaoshen666/p/10748429.html
Copyright © 2011-2022 走看看