前言

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

了解chrome开发者和工具(控制台面板)
会使用debugger和console.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上调试基本一直