说明
更新与2020-02-20，文章的末尾增加了一种新的方式，基于局域网的调试方式，目前已在非ionic（但是同样启动服务，比如http-server）的方式中成功运行。详见文末【额外补充】
应用场景
某些功能必须在真机上测试时，以往的做法是打包安装包进行安装，这种方法很费时间（打包时间长，反馈慢），特别是iOS环境下，除了打包过程，还必须借助xcode为iphone写入测试app（由于xcode支持落后于ios系统，某些时候，xcode还无法为高版本的ios写入），总归是很麻烦。借助【ionic devapp】，可以直接在本地调试过程中，在真机上实时查看app在真机上的运行效果，很大程度上节省了等待时间（具体稳定性如何，有待进一步测试）。
安装app
Android app
需要在google play中搜索【ionic devapp】，当前最新版1.0.4,（对于无法正常访问google play的，推荐一个可以自由访问的网页，可以直接网页搜索并下载apk，同步google play），安装后登录（需要注册ionic账户）
iOS App
在app store搜索【ionic devapp】，安装，然后登录，出现下图所示的页面
运行
在ionic程序中运行
// android命令，后面可以自己定义--port，默认port是8100ionic serve --devapp// ios命令，后面可以自己定义--port，默认port是8100ionic serve -c
以上的2条命令会在对应设备中自动发现同一网络下运行的app，并且修改后会自动更新（就像在电脑端一样），如下面的视频所示
问题似乎只能连接第一个绑定的手机，其他手机发现不了，比如android下，第一个手机连接后，无论是退出账户还是清除后台，都不能发现。
那么怎么解决这个问题呢？运行 ionic serve --devapp 或 ionic serve -c，会生成3个地址，第1个是我们之前常用的本地调试地址，第2、3个是局域网访问地址，最后一个打马赛克的不是地址，是ionic devapp会显示的名称。
借助第二个地址，可以手动添加，同样可以访问，而且ios和android都可以访问，也就是说不论你运行 ionic serve --devapp 还是 ionic serve -c，只要能获取External地址，就可以在不需重新启动的情况下，在任意多个设备中直接进行真机调试（具体方法参见以下视频）
额外补充
基于局域网的调试方式
web app或者hybrid app开发过程中大部分的调试都是使用chrome 的app模式进行开发（输入网址，打开网页）。本地IIS发布网站，我们可以在同一局域网中通过ip地址访问到系统，那么app在调试运行的过程中，实际上也是相当于启用了临时的服务器，那么是不是也可以通过ip地址访问到呢？答案是肯定的！
获取本机ip地址
移动浏览器运行
将web端浏览器中的localhost地址替换为ip地址（端口号不变，如果有端口号的话），直接将新的地址输入到移动端浏览器中，就可以在移动端真机中浏览app，并且刷新会自动同步web端，也就是说web端自动刷新，移动端也会自动刷新。
额外说明这种方式相比于ionic devapp的方式更加简洁，快速，并且适用性更广（不止支持ionic的框架）。可以快速查看app在真机上的布局是否正常（某些情况下会出现web端正常，真机排版错位或者字体过小的情况）。但是否能够调用app的底层功能，有待进一步测试。总的来说，推荐将这种方式作为真机调试的第1选择。
参考文献
若有收获，就点个赞吧
0 人点赞
