虎牙直播APP
在虎牙直播APP能开发调试两种小程序类型：
准备工作
iOS系统需要下载安装TestFlight上面的版本才能进行本地开发调试，使用手机浏览器访问https://testflight.apple.com/join/ot37bAoJ，点击“开始测试”即可下载安装：
安卓系统去对应的渠道下载市场版本即可。
上述两种小程序类型的开发调试方式差异不大，我们以虎牙直播APP-面板为例，在虎牙直播APP预览开发版本的小程序：
在点击入口打开小程序面板后，可以注意到开发服务的控制台会输出一些日志：
如果没有类似的日志信息：
- 在小程序版本设置 -> 程序设置里面找到虎牙直播APP-面板对应的路径，用手机访问一下这个路径看看是否能访问；
- 如果能，再确认一下这个路径是否跟开发服务打开的IP和端口是一致的；
终端上的H5调试工具
以下的虎牙直播APP版本使用H5技术栈加载小程序：
- iOS：大于等于11.2.0
- 安卓：大于等于11.6.20
针对移动端上的H5小程序类型，仅支持在@hyext/cli的命令行输出中查看日志，具体操作步骤如下：
npm i @hyext/utils- 使用
createLogger创建一个打印日志的工具：
import { createLogger } from "@hyext/utils"
const logger = createLogger({})
- 使用这个工具打印日志：
class App extends Component {
render() {
logger.log('render', { foo: 'bar' })
return (
<View className="container"><Text>hello world</Text></View>
)
}
}
按照在直播间预览的步骤，添加到直播间，然后在开发服务的控制台里面就可以看到日志了：
Beyond · LoggerServer connection
app_panel_h5/ios/17:58:24.896
INFO render{"foo":"bar"}
终端上的RN调试工具
以下的虎牙直播APP版本使用RN技术栈加载小程序：
- iOS：小于11.2.0
- 安卓：小于11.6.20
我们可以使用终端上面的RN调试工具进行开发调试，调试工具的图标类似长这样（位置可能有点差异）：
点击调试工具图标，展开调试菜单：
里面有几个功能（以iOS为例，安卓会有一点差别）：
- 重载：点击后刷新小程序面板；
- 热重载：开启/关闭热重载功能，开启后在本地修改代码保存后小程序界面会自动更新，开启/关闭时小程序面板会自动刷新一次；
- 远程调试：开启/关闭远程调试功能，开启后会在PC端浏览器打开调试页面，可以进行代码断点调试：
--- a/viewer/app.js
+++ b/viewer/app.js
@@ -31,6 +31,7 @@ class App extends Component {
})
}
render() {
+ console.log('测试测试')
return (
<View className="container"><Text>hello world</Text></View>
)
- 检查器：开启/关闭查看小程序界面元素的样式信息的面板：
- Console：开启/关闭控制台，里面会输出日志：
注：
- 断点调试由于一些技术原因，在devtools中的位置跟实际的断点位置不能保证一致，正在努力解决中；
- 安卓上没有出现这个工具，可以轻摇几下手机，并同意悬浮窗权限即可；
- 远程调试打开的浏览器窗口的地址可能是
0.0.0.0的域名，需要手动修改成开发服务打开的主机名或者IP地址（可以查看对应版本里面程序配置里面的相关信息）； - 由于RN调试工具仅会关联最后一个打开的RN实例，所以如果这个开发版本同时支持面板和浮窗小程序类型，则开发工具仅会关联到后一个打开的小程序类型；
开发服务命令行工具
如果只需要看日志的话，开发服务里面也会显示小程序的日志：
