美文网首页我的 ionicionic3+
ionic2学习指引-真机调试

ionic2学习指引-真机调试

作者: 昵称已被使用_ | 来源:发表于2017-08-10 22:24 被阅读2598次

前言

  • 真机调试前需要先会"普通调试". 百度搜索"chrome调试"等有大量教程,请自行学习

了解chrome开发者和工具(控制台面板)
会使用debuggerconsole.log()
熟练使用常用的快捷键

  • 如下gif演示了最常用的调试操作


android真机调试

  1. 用数据线连接手机和电脑.点击查看如何确保数据线连接成功
  2. 在手机上打开需要调试的app
  3. 使用chrome浏览器访问chrome://inspect/#devices.并点击inspect.如下图
  4. 点击inspect会打开如下界面.剩下的调试工作就和"普通调试"一样了
    注: 第一次打开如下界面可能比较慢/可能需要翻墙
  5. 如下gif演示了真机调试定位功能


ios真机调试

xcode查看日志信息

  • 还不会ios打包app?点这里.如下图是xcode调试步骤

1.用xcode打开app
2.选中用数据线连接的iphone手机名称(我的iPhone名称叫0iPhone0)
3.点击运行按钮
4.正在运行..大概需要2分钟
5.打开xcode控制台窗口
6.可以看到app的启动日志.代码中的console.log()输出的日志信息等

Safari查看日志信息

  • 如下图.启用Safari浏览器的"开发"菜单
  • 在Safari选中连接的手机和手机打开的调试页面
  • 资源tab页查找main.ts并给将要调试的方法打断点
  • 调试

在上一步成功打断点后,点击手机页面触发断点按钮就会跳到调试器tab页
剩下的调试方法和在chrome上调试基本一直

相关文章

  • ionic2学习指引-真机调试

    前言 真机调试前需要先会"普通调试". 百度搜索"chrome调试"等有大量教程,请自行学习 了解chrome开发...

  • 真机调试

    真机调试 1. 真机调试概念 2. 真机调试的必要 APP发布之前一定要做真机调试!!! 3. 怎样做真机调试? ...

  • 真机调试(一):准备和配置真机调试

    1.1 什么是真机调试? 简单理解就是将App项目运行到苹果真机上进行测试 1.2 为什么学习真机调试? 真机和模...

  • 【React Native 极速指南】开发环境

    这篇文章你将会学习到: iOS运行环境模拟器调试真机调试 Android运行环境模拟器调试真机调试 iOS 运行环...

  • 真机调试、打包测试、发布、内购,广告

    一.真机调试 1.什么是真机调试? 简单理解就是将App项目运行到真机上进行测试. 2.真机调试的必要 真机和模拟...

  • Xcode真机调试简介

    真机调试 什么是真机调试? 为什么要运行到真机上? 怎样做真机调试 ** Xcode7.0之前,并不是任何人,任何...

  • 2015 Xcode7 真机调试(开发者)以及P12配置

    关于真机方面,首要的就是真机调试,因为一个程序的开发是肯定离不开真机调试的,在Xcode7之前想要进行真机调试需要...

  • 真机调试发布程序

    真机调试 一、证书 决定哪台电脑可以真机调试 安装在电脑上,只有安装了证书的电脑,才有可能进行真机调试。 [x] ...

  • 真机调试+打包+发布

    真机调试需要两个文件 ios7之前真机调试需要的步骤 打包测试 打包测试和真机调试的区别 注意: ios7之前的真...

  • APP生成证书.真机调试.上线流程(详细版)

    IOS中生成证书、真机调试、上线发布程序的步骤 前言:学习ios开发快一年了生成证书,真机调试,程序上线发布的总结...

网友评论

  • d0760d2310bd:请问有没遇到ios端app头部和状态栏重叠的问题?还有一个问题是ios端复制不了文字,user-select: auto !important;这样设置也不好用
    昵称已被使用_:@Tzoe 头部重叠记得ionic1遇到了,忘记怎么处理了,应该是代码问题。要想复制文字,ion-input要放到ion-item标签中
  • 75babac31fb2:我的只有chrome浏览器打开的网页才可以inspect
    昵称已被使用_:@Mr光_a4e0 已更新内容:在手机上打开需要调试的app(调试的app是debug版本,release版本不能调试)
    昵称已被使用_:@Mr光_a4e0 :+1:
    麻辣小猪:安卓要打Debug包才能调试
  • d0760d2310bd:求助,我用ionic cordova build android --prod 打出来的apk安装包安装到手机上,打开报错,提示:Application error net::ERR_FILE_NOT_FOUND(file:///android_asset/www/index.html),请问您遇到过这种情况吗?
    昵称已被使用_:@Tzoe https://www.jianshu.com/p/ab1fd5e5e426
  • 8d9747b91604:手机确定连接了电脑,却一直没有出现inspect
    昵称已被使用_:@MrC_Turtle 需要翻墙
  • 清丶虹:博主,请问下ionic项目ios真机调试连不上服务器会是什么情况,试了n多种方法还是没用:sob:
    返回responese with status: 0 for URL: null
  • 差不多先生_2517:博主博主,我的界面出来了,但是没有手机页面,看到的都是代码,看不到效果,那个小手机按钮也点不了,灰色的,怎么解决:relaxed:
    昵称已被使用_:我只能说有些手机是这样,你是不是华为..
  • 差不多先生_2517:博主大大,我按照帖来弄,检测电脑已连接,已启动app,也安装了手机驱动,但用谷歌打开chrome://inspect/#devices不行,一开始以为谷歌版本,然后下载了最新的,还是不行,求搭救
    差不多先生_2517:@小军617 收到
    昵称已被使用_:@差不多先生_2517 第一次打开图3需要翻墙
    差不多先生_2517:就是没有出现图3的,下面只有这些Remote Target
    #LOCALHOST
    Offline
    #621QACQD98FVP
    Pending authentication: please accept debugging session on the device.
  • 李白不喝酒:一直不出现inspect 会是什么问题?
    差不多先生_2517:@李白不喝酒 你在调试的时候看的到效果吗,就是界面,我只能看到html代码
    李白不喝酒:@差不多先生_2517 多谢,我现在可以了,可能是第一次的时候 时间有点太长了
    差不多先生_2517:之气按我也是,博主说要扶墙才可以,还有先检测手机是否连接
  • Wiki1991:ios真机调试只能用Safari,真的难用
  • 095a03563e78:坐等ios
  • stormKid:怎么统一ionic的主题,把ios变成android的 除了标签上mode="md",哈有没有全局更改的方法啊?
    stormKid: @小军617 对了,单独一个页面呢?这又是怎么弄得。
    stormKid: @小军617 多谢多谢
    昵称已被使用_:@stormKid 看第58行代码https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/app/app.module.ts

本文标题:ionic2学习指引-真机调试

本文链接:https://www.haomeiwen.com/subject/shrzlxtx.html